Creating Styles and Style Sheets

 CSS styles don’t communicate in nice clear English, they have their own language.  P { color: red; font-size: 1.5 em;} This code says, “make all text in all paragraphs marked with a red and 1.5 ems tall.” An em is a unit of measure that is based on a browser’s normal text size. Using an em tag as opposed to a px tag adjusts the size of text based on the size of text the user has specified for her/his computer.

Selector Declaration Declaration Property Value Property Value Declaration Block color: red;Font-size: 1.5em; p

 A single style will not transform a Web page into a work of art  To infuse your web site with great design, you will need many different styles  A collection of CSS styles comprises a style sheet.  Style sheets can be one of two types— internal or external

 External style sheets are the way to go.  Easier to build a web page  Contain all of your style information  Just one line of code to attach the sheet to your web page  Easier to edit  Help web pages open faster Downloads your style document to a user’s computer or cache

 A collection of styles that is part of the web page’s code  Always appears between the opening and closing HTML tags in the web page’s section  EXAMPLE:  H1 { color: #FF7643; font-face: Arial;  }

 The tag is HTML, not CSS—tells the browser that the information contained within the tags is CSS code.  Internal style sheets are easy to add to a web page  Provide immediate visual boost to your HTML  Style not the most efficient method of design  Especially if web page is comprised of many pages.  More of a hassle when you want to update the look of the site.

 HTML:   XHTML:   The Difference?  How the tag is ended

 url (css/global.css);   Unlike the is part of the CSS language and has some definite un- HTML-like qualities.  Use url, not href  Enclose the path in parentheses

 Chapter 2—Tutorial  Page 39 in your textbook  Then Assignment 1 in Blackboard  Don’t forget to validate both your HTML and your CSS  Upload your documents to your Assignment 01 folder on the SWS