Style Sheets Coding Style Sheets w Style sheets

  • Slides: 19
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.

What is CSS? w CSS provides a means for web authors to separate the

What is CSS? w CSS provides a means for web authors to separate the appearance of web pages from the content of web pages. w We'll be learning n n n 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 w The traditional HTML approach was to "hardcode" all of the

Why Use It w The traditional HTML approach was to "hardcode" all of the appearance information about a page. w 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? w You've got more than 100 pages? n n n That

Why Use It? w You've got more than 100 pages? n n n 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 w Style sheets can be embedded or external n

How do you use CSS w Style sheets can be embedded or external n n 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 w Both ensure consistency in a website and making it very easy to make global changes/updates.

How do style sheets work? w The parts of a style sheet n Every

How do style sheets work? w The parts of a style sheet n 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? w w w w By elements, I mean: paragraphs,

How do style sheets work? w w w w 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:

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

Example of a css style Selector body { Opening Curly brace font-family: Verdana, "Minion

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

Linking and embedding a style sheet w 1 st you need a web page.

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

Linking a style sheet w Open the web page w Make an external link

Linking a style sheet w Open the web page w Make an external link to the style sheet w This is what the code looks like: <link rel="stylesheet" href="stylesheetname. css"> w where stylesheetname. css refers to the name of your file, and an appropriate path, if needed.

Embedding a Style sheet w Embedding a style sheet example (Download from the Web

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

Tips w Have a template style sheet saved w Use the template for all

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

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…