Style Sheets Coding Style Sheets w Style sheets

  • Slides: 11
Download presentation
Style Sheets

Style Sheets

Coding Style Sheets w Style sheets use RULES to create the style w A

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

External Style Sheets w External style sheets (just simple text files with a. css

External Style Sheets w External style sheets (just simple text files with a. css extension) keep the rules in a separate file. They ensuree consistency in a website and making it very easy to make global changes/updates.

w To access them use the <link> in the head section: w <link rel="stylesheet"

w To access them use the <link> in the head section: w <link rel="stylesheet" href="stylesheetname. css"> w where stylesheetname. css refers to the name of your file, and an appropriate path, if needed.

Type this on your computer body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; background-color:

Type this on your computer body { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; background-color: #00 FFFF; } td { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; } th { font-family: Verdana, Geneva, Arial, helvetica, sans-serif; }

And this… h 1 { color: #333333; } h 2 { color: #666699; }

And this… h 1 { color: #333333; } h 2 { color: #666699; } h 3 { color: #993399; } h 6 { color: #333366; }

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

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

To use special font you must w <p class="specialfont"> The text you want special

To use special font you must w <p class="specialfont"> The text you want special </p> in your html code

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

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

Add a table to each of your pages w 2 columns by 2 rows

Add a table to each of your pages w 2 columns by 2 rows Name Bob Age 16 w Check your web pages now

Add the following to the web pages w Page 1 Part A w Page

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