HTML & CSS Contents: the different ways we can use to apply CSS to The HTML documents CSS Colors and Background CSS Fonts CSS Text CSS box model: padding, margin,Borders Height and width Floating elements (floats) Positioning of elements Web page layout using elements HTML- lec 5 T.A. Reem Alshnaifi17-Feb-13

HTML & CSS CSS can be added to HTML in the following ways: Inline - using the style attribute in HTML elements Internal - using the element in the section External - using an external CSS file CSS (Cascading Style Sheets) is used to style HTML elements.

CSS Example This is a heading This is a paragraph. Inline Styles

CSS Example body {background-color:#d0e4fe;} h1 {background-color:red;} p {background-color:green;} CSS example! This is a paragraph. Internal Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the tag. The tag goes inside the section External Style Sheet

CSS Example External Style Sheet

CSS Example CSS example! This is a paragraph. External Style Sheet body {background-color:#d0e4fe;} h1 {background-color:red;} p {background-color:green;} mystyle.css

CSS Colors and Background CSS Colors Property : 1.Colors CSS Background Properties: 1.background-color 2.background-image 3.background-repeat 4.background-attachment 5.background-position

CSS Colors and Background welcome to baby's shop Here you can find all your child's needs Index.html

CSS Colors and Background body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; } Style.css body { background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; } Can be compiled into:

Repeat background image [background-repeat] ValueDescription background-repeat: repeat-x The image is repeated horizontally background-repeat: repeat-yThe image is repeated vertically background-repeat: repeat The image is repeated both horizontally and vertically background-repeat: no-repeatThe image is not repeated

[background-attachment] ValueDescription Background-attachment:scroll he background image scrolls with the rest of the page. This is default Background-attachment: fixedThe background image is fixed

Place background image [background-position]

CSS Fonts CSS Font Properties: font-family font-style font-weight font-size

CSS Fonts. p { font-style: italic; font-weight: bold; font-size: 30px; font-family: arial; } Style.css

CSS Text CSS Text Properties: text-align Center, right, left text-decoration : Underline, overline, line-through,none

CSS box model The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element

CSS box model

Article 1: All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood Example

CSS box model By adding some color and font-information the example could be presented as follows: Result

CSS box model The example contains two elements: and. The box model for the two elements can be illustrated as follows:

CSS box model The properties which regulate the different boxes are: padding, margin and border Set the margin in an element An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document)

CSS box model the margin in an element As the first example, we will look at how you define margins for the document itself i.e. for the element body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } CSS Code body { margin: 100px 40px 10px 70px; } Can be compiled into:

CSS box model the margin in an element You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with : p { margin: 5px 50px 5px 50px; } CSS Code

CSS box model Set padding in an element: padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. h1 { background: yellow; padding: 20px 20px 20px 80px; } CSS Code

CSS Borders CSS Borders Properties: border-width border-color border-style P { border-width: 1px; border-style: solid; border-color: blue; } p { border: 1px solid blue; } Can be compiled into: CSS Code

border-style : CSS Borders

Height and width Setting the width and the height p{ height: 500px; width: 200px; border: 1px solid black; background: orange; } CSS Code

Floating elements (floats) An element can be floated to the right or to left by using the property float. That is to say that the box with its contents either floats to the right or to the left in a document

Floating elements (floats) If we for example would like to have a text wrapping around a picture, the result would be like this:

Floating elements (floats) How is it done? The HTML code for the example above, look as follows: img { float:left; width: 100px; } p { width: 400px; } CSS Code An element can be floated to the...

Positioning of elements With CSS positioning, you can place an element exactly where you want it on your page.

The principle behind CSS positioning: Imagine a browser window as a system of coordinates:

CSS positioning: Let's say we want to position a headline. By using the box model the headline will appear as follows: If we want this headline positioned 100px from the top of the document and 200px from the left of the document, we could type the following in our CSS: h1 { position:absolute; top: 100px; left: 200px;} CSS Code

CSS positioning: The result will be as follows:

HTML & CSS HTML Layouts: Web page layout using elements

Website Layouts This element uses separate opening and closing tags.... The tag can be used to divide an HTML document into sections. Styles can then be applied to whole sections at the same time. The tag is a block-level element that can contain other block-level elements

Website Layouts body{ margin : -20px 20px 10px 130px; background-color: # ; background-image: url("soon.jpg"); background-repeat:repeat; background-attachment:scroll; background-position: top left;} #container{width:1100px;} #header{ background-color:#CC9933; margin-bottom:-22px; color:#000000; text-align:center;}

Website Layouts #menu{background-color:#DEB887 ; height:555px; width:150px; float:left;} #content{ background-color:#ffffff; height:555px; width:950px; float:left;} #footer{ background-color:#CC9933; clear:both; text-align:center;}

Website Layouts Main Title of Web Page Menu HTML CSS JavaScript Content goes here Copyright © W3Schools.com

Website Layouts