Transcript Cascading Style Sheets (CSS)

CSS
Hadas Kahsay
Overview







What is CSS
Basic syntax of CSS Rules
How to link CSS style to html documents
Browsers and CSS
Advantages of CSS
Disadvantages of CSS
Conclusion
What is CSS







Stands for cascading Style Sheets (CSS)
It was developed by W3C in 1996
New feature being added to html that allows
web designers more control over how pages are
displayed.
It is a simple styling language which allows
attaching style to html elements
Allows designers create style sheets that define
how different elements in html appear.
It is used to specify styles such as fonts,
background colors, margins, etc.
The purpose of CSS is to separate style
information from contents.
Basic syntax Rules of CSS
 H1
{color: green}
 CSS rules consists two parts
-Selector
- Declaration
Basic syntax Rules of CSS (cont)

Declaration also
consists two parts
-Property
-Values
Basic syntax Rules of CSS (cont)
 Setting
Rule for Multiple html elements
H1 {color: green}
H2 {color: green}
H3 {color: green}
 Group elements together
H1, H2, H3 {color: green}
Basic syntax Rules of CSS (cont)
 Setting
Rules for one element w/multiple
rules
H1 {color: blue}
H1 {text-align: center}
H1 {background: yellow}
Basic syntax Rules of CSS (cont)

Use the element once
H1 { color: blue; text-align: center; background:
yellow }
Or
H1
{ color: blue;
text-align: center;
background: yellow }
Basic syntax Rules of CSS (cont)
 Setting
CSS rules using body element
body { background: yellow; font-style: italic}
P {font-family: Verdana; font-size: 12pt}
H1,H2,H3{color:blue; background: white;
text-align: center}
Basic syntax Rules of CSS (cont)

Background colors
body {background: yellow; color: green}
H1, p {background: white; color: blue}
P B,UL {color: red}
Basic syntax Rules of CSS (cont)
 Setting
colors for links
a: link {color: blue; text-decoration: none}
a: visited {color: red}
a: active {color: green}
a: hover {color: yellow}
Linking CSS to html documents
 There
are several ways to link CSS to html
documents
-Inline linking
-Internal linking
-Linking to an external style sheets
Example of Inline linking
Inline linking result
Internal Linking

Apply using style
elements
Result
Class attribute

Example of CSS Class attribute
rules
Result
More example of class attribute

Example of
border/List rules
Class attribute (cont)
Result
Linking to an external

Example of Linking to
an external files
TestStyle.css
Result
Browsers and CSS

Most browsers support CSS
for instance, Microsoft internet
Explorer 4(IE4), Netscape
navigator4(NS4) and Opera
3.5(O3.5) support CSS
 Some browsers don’t support CSS
for instance, Netscape’s
Navigator 1 and Microsoft Internet
Explorer 2 don’t support CSS
style. The browsers that don’t
support CSS just ignore the style
but display the contents of the
style on the screen which is not
necessary.
Browser and CSS (cont)
Advantages of CSS







Web pages will load faster because of the
reduced redundant coding from each page
Allows designers to change colors, fonts, etc.
Easier to update web site designs.
More control over your page
Structured contents in your web document and
well organized
Allows shared style sheets across multiple
documents
Reduced design/development time
Disadvantages of CSS

It is not understood by some of the browsers
 It can mess up your pages if you don’t be careful
Conclusion
 CSS
improves the look and feel of your
web page designs
 Reduce coding time
 I recommend it
Questions