Web Design (12) CSS Introduction

Cascading Style Sheets - Defined CSS is the W3C standard for defining the presentation of documents written in HTML. By editing one style sheet, the appearance of the entire web site can be changed.

Cascading Style Sheets - Method 1. Produce the HTML page (‘structural layer’) 2. Write the style rules for how you wish certain elements to look (‘presentation layer’) 3. Attach the style rules to the document

Examples of CSS Rules h1 { color: green;} Selector Declaration Value p {font-size: 16px; font-family:sans-serif; } Selector Declaration Value Declaration Value

Exercise(1) 1.Create a new web site folder ‘cssintro’ 2.Place in it a blank.html and a small image 3.Enter 3 paragraphs of text on your home page, incorporating the image within the text. 4.Apply several h1, h2 and p tags to parts of your text 5.Look at your page in live preview

Exercise (2) 6. In the head area of the home page ( after the title element) enter the following code: h1 { color: green;} p {font-size: 16px; font-family:sans-serif; } 7. Look at your page in live preview – what do you notice?

Exercise (3) 8. Change the h1 color to ‘gray’ – check in live preview 9. Now change the h1 color to ‘red’ and again, check in live preview 10. Add a new CSS Rule that makes h2 elements red as well. h1 { color: red;} h2 { color: red;} p {font-size: 16px; font-family:sans-serif; }

Exercise (4) 11. Add a 100 pixel left margin to the p element using this declaration: margin-left : 100px; - look at the result in live preview 12. Add a 100 pixel left margin to the h2 headings also. Again, check live preview. h1 { color: red;} h2 { color: red; margin-left: 100px;} p {font-size: 16px; font-family:sans-serif; margin-left: 100px;}

Exercise (5) 13. Add a red 1 pixel border to the bottom of the h1 element using this declaration: border-bottom : 1px solid red; Check out the result in live preview. h1 { color: red; border-bottom:1px solid red;} h2 { color: red; margin-left: 100px;} p {font-size: 16px; font-family:sans-serif; margin-left: 100px;}

Exercise (6) 14. Move the image to the right margin and allow the text to flow around it with the float property, using this declaration: img { float: right; margin: 0 12px;} (Note: The pixel values after ‘margin’: the first relates to the space on the top and bottom of the image; the second to the space on the left and right of the image.) Check with Live Preview h1 { color: red; border-bottom:1px solid red;} h2 { color: red; margin-left: 100px;} p {font-size: 16px; font-family:sans-serif; margin-left: 100px;} img {float:right; margin: 0 12px;}

And two more things …… (1) Comments in Style Sheets: /* comment goes here */ (2) If you need to apply the same properties to a number of elements: h1, h2, p, img {border: 1px solid blue:}

Three ways of applying CSS (1) 1.Embedded Style Sheets ( in the head) Applies only to the page on which it appears. /*style rules go here*/

Three ways of applying CSS (2) 2. Inline Styles (in the body) These apply only to the particular element in which they appear Introduction Add this to your index page – and check the result

Three ways of applying CSS (3) 3. External Style Sheets (separate sheet from html page) Can apply to many pages in your web site More about these later ……..

Style Sheet Hierarchy What if contradicting styles appear in these 3 ways of applying CSS to HTML? Which takes priority? Answer: Inline, Embedded, External Note: This order can be changed by adding: !important to a style rule.

Four CSS Styles (1) Tag Style Used to change the appearance of an existing HTML tag. h1 {font-family: Arial; font-size: large;}

Four CSS Styles (2) ID Style Used mainly as building blocks in page layout. Well suited in formatting tags. Can only be used once per page. #wrapper {background-color: green; width: 950px; height: auto;} (Note the hash symbol before the ID style) On the HTML page, the ID Style appears (within body) as: …………………………..

Four CSS Styles (3) Class Style Can be used more than once per page. e.g. to create a caption under each photo on a page:.caption {font-family: Arial; color: red} (Note the dot before the class style) On the HTML page, class styles must be applied to an element such as p Family Photo

Four CSS Styles (4) Compound Style Created by combining ID, Class or Tag Styles. For example, to define a tag style within a particular element: #banner h1 A combination of id style and tag style So here, within the banner, all text is to be h1

Four CSS Styles A lot to take in, so put Class and Compound Styles to one side for the moment. You have already used Tag Styles. Next time we will be using Tag and ID Styles and will be considering External Style Sheets ….