1. CSS
• Cascading Style Sheets came about due to the
realization that the HTML language really is
geared towards structure rather than formatting.
• Thus, with a style-sheet, you remove all of your
formatting from your HTML page.
• You leave HTML to do what it does best --
structure; that is, you use HTML to define what is
a paragraph, table cell, heading, list, etc., but you
don't put any instructions inside your HTML code
as to how to display those tags
• The how goes into a separate file, the stylesheet
2. CSS
• The concept of a cascading style sheet (CSS) is
actually quite simple. You create a separate file
known as a stylesheet and place the formatting
there and link each HTML file to it. Here is some
sample logic you might find in a stylesheet:
• I want all of my heading 1 tags to have a drop
shadow
• I want all of my pages to have a blue background
• I want my default font to be Georgia and black
• I want my heading 2 to be Verdana, red, twice as
large as the default font, and centered on the page.
•
3. Why are they called
"Cascading"?
• This refers to the notion of nesting. Let's
say you have a thirty page web site and
your stylesheet indicates that the
background color on all pages is a dark
blue. What if on your index page you want
the background to be a lighter shade of
blue? You can add an inline stylesheet to
your document that overrides for this page
only the stylesheet for your entire web site.
4. Linking to a StyleSheet
• Associating a web page with a stylesheet is easy,
as you add just one line of code inside your page's
header:
• <link rel="stylesheet" href="mystyle.css">
• This tells the web browser to get some
information from another file and that it is a
stylesheet (link rel="stylesheet"). The next
part (href="mystyle.css") tells it the name of
the stylesheet. You can name your
stylesheet whatever you'd like, but by
convention you always end it with a ".css".
5. EXAMPLE
• Using the example above, a typical header
would then look like:
• <head>
<title>This is my web page</title>
<link rel="stylesheet"
href="mystyle.css"> </head>
6. Stylesheets and Classes
• Here, in a simplified form, is the format of a stylesheet:
• /* My First StyleSheet */
• TAG1 {
• property1 : value;
• property2 : value;
• property2 : value;
• property2 : value;
• }
• The first difference is that stylesheet comments are enclosed in
"/*" and "*/". You'll also notice that each tag has several
properties associated with it. These could be such properties as
the color of the text, the font of the text, or the size of the border
around it. Value is what you'd expect, a value (e.g. red,
Verdana, 2 pixels).
7. Thus, a real stylesheet might look like this:
• /* My First StyleSheet */
• BODY {
• background-color : blue;
• font-family : Georgia, serif; color : white; }
• H1 {
• font-family : Verdana, sans-serif; font-size :
2em; }
8. CSS
• As you can see, the format of a stylesheet
simply attached certain styles to a particular
HTML tag. From the above, you can see
that all H1 tags will be in the font Verdana
at twice the size (em) of the default font.
9. Rules and Stylesheets
• A rule is a statement about one syllogistic aspect
of one or more elements
• A stylesheet is a set of one or more rules that
apply to an HTML document.
• EXAMPLE:
– H1{color:green}
– The rule above sets the color of all first-level headings
(h1
– A style sheet is a set of one or more rules that apply to
an HTML document.
10. Anatomy of a rule
• A rule consists of two parts:
– Selector - the part before the left curly brace
– Declaration - the part within the curly braces
11. Anatomy of a rule
• The selector is the link between the HTML
document and the style. It specifies what
elements are affected by the declaration
• The declaration is that part of the rule that
sets forth what the effect will be. In the
example above, the selector is h1 and the
declaration is "color: green."
12. Anatomy of a declaration
• A declaration has two parts separated by a
colon:
• Property - that part before the colon
• Value - that part after the colon
13. Anatomy of a declaration
• The property is a quality or characteristic
that something pos
• The value is a precise specification of the
property. In the example, it is "green," but it
could just as easily be blue, red, yellow, or
some other color.
