Style Sheets

Coding Style Sheets  Style sheets use RULES to create the style  A selector (a tag or user-defined style name)  and then declarations contained within { } and separated by ;  declarations consist of properties and values separated by a.

What is CSS?  CSS provides a means for web authors to separate the appearance of web pages from the content of web pages.  We'll be learning how to do it, why it's good to do it, and why it's not so good to keep using the old ways.

Why Use It  The traditional HTML approach was to "hardcode" all of the appearance information about a page.  So you want all your headings in courier, and at different point sizes to the sizes built into browsers? Then, for every heading, in every page, set the font size and face properties.

Why Use It?  You've got more than 100 pages? That is a lot of editing, a lot of re-editing if you decide to modify the appearance of your pages later. with all of that editing there is plenty of possibility for introducing errors.

How do you use CSS  Style sheets can be embedded or external External style sheets (just simple text files with a.css extension) keep the rules in a separate file. Embedded do the same thing but are part of the HTML code  Both ensure consistency in a website and making it very easy to make global changes/updates.

How do style sheets work?  The parts of a style sheet Every Cascading Style Sheet (css) is a series of instructions called statements. A statement does two things: 1.it identifies the elements in an HTML document that it affects 2.it tells the browser how to draw these elements

How do style sheets work?  By elements, I mean:  paragraphs,  links,  list items  Tables  and so on.  In technical HTML terms, an element is anything marked up inside HTML tags.

Example of a css style body { font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 1em; text-align: justify; } This is a single statement, perhaps one of many in a style sheet.

Example of a css style body { font-family: Verdana, "Minion Web", Helvetica, sans-serif; font-size: 1em; text-align: justify; } Selector  Opening Curly brace Property name Value  Closing Curly brace

Linking and embedding a style sheet  1st you need a web page. (Download from Web site)Download from Web site  2nd a css style sheet (Download from the Web)Download from the Web  Both can be accessed from the Web 10 site.

Linking a style sheet  Open the web page  Make an external link to the style sheet  This is what the code looks like:  where stylesheetname.css refers to the name of your file, and an appropriate path, if needed.

Embedding a Style sheet  Embedding a style sheet example (Download from the Web 10 site)Download from the Web 10 site

Tips  Have a template style sheet saved  Use the template for all your web pages Just tweak the page to suit the needs of the page  Download a template (from the web site)from the web site

Add this to your stylesheet.specialfont { font-family: font-family: "Times New Roman", Times, serif; color: green }

To use special font you must  The text you want special in your html code

Modify your style sheet body { font-family: Arial, Helvetica, sans-serif; background-color: #FF0000; }

Add a table to each of your pages  2 columns by 2 rows  Check your web pages now NameAge Bob16

Add the following to the web pages  Page 1 Part A  Page 1 Heading 2  Page 1 Heading 3  Page 1 Heading 6  Do the same for each of your pages..  Check your web page now…