Transcript Style Sheets

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
Selector  body {
Opening Curly brace
font-family: Verdana, "Minion Web",
Helvetica, sans-serif;
font-size: 1em;
Value
text-align: justify;
Property name
}
Closing Curly brace
Linking and embedding a style
sheet
 1st you need a web page. (Download from
Web site)
 2nd a css style sheet (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:
<link rel="stylesheet" href="stylesheetname.css">
 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)
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)
Add this to your stylesheet
.specialfont {
font-family: font-family: "Times New Roman",
Times, serif;
color: green
}
To use special font you must
 <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: #FF0000;
}
Add a table to each of your
pages
 2 columns by 2 rows
Name
Bob
Age
16
 Check your web pages now
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…