1. Web Design & Development
CSS Styling Your Web
Web Design & Development

2. What?
“Describes the presentation semantics (the look and formatting) of a document written in a markup language” ~ Wikipedia
Most commonly for
HTML/XHTML
Others: XML, SVG, XUL

3. CSS Standards CSS 1 (Dec 1996) CSS 2 (May 1998) CSS 3
W3C’s first official CSS recommendation
W3C no longer maintains it
CSS 2 (May 1998)
CSS 2.1 (or CSS 2 Revision 1)
Jumps between Working Draft & Candidate Recommendation
Published as Recommendation on 7 June 2011
CSS 3
Divided into separate documents (“modules”)
Color Module was published as W3C Recommendation on 7 June 2011

4. Why? Separation of Concerns Reusability Themes Efficiency
Printer Friendly …

5. Without CSS <h1 align="center"> </h1>
<font face=“verdana, arial, serif" color="#000080">
<a href=“link.html”>Some Link</a>
</font>
</h1>

6. With CSS h1 { font-family: verdana, arial, serif; text-align: center;
color: #000080; }
& HTML is reduced to
<h1>
<a href=“link.html> Some Link </a>
</h1>

7. How? Inline Internal External Most powerful but makes HTML untidy
Using ‘style’ attribute
Internal
Handy yet keeps styling away from HTML
Using <style> tag (in head)
External
Preferred Way
<link href=“syle.css" rel="stylesheet" type="text/css">

8. Building Blocks of CSS
Rules,
Selectors,
Properties and values

9. CSS Rules Style Sheet Style Rules A style rule consists of two parts
Selector – Tag name
Declaration – Property:Value
Example:
h1 { color : red; }
Property
Value
Selector
Declaration

10. Common Properties color background-color background font-family
font-weight
font-size

11. a:link { color: red; } a:visited { color: red; } a:hover { color: blue; } ul { list-style-image: url(“imageUL.gif"); } ol { list-style-image: url(“imageOL.gif"); }

12. Class Selector
Allows you to set a particular style for many HTML elements with the same class.
Uses the HTML class attribute, and is defined with a "."
Example
.center {text-align:center;}

13. ID Selector Specifies a style for a single, unique element
Uses the id attribute of the HTML element, and is defined with a "#".
Cannot start with a number!
Example
#para1 { text-align:center; color:red; }

14. Advance Compositions Concatenation, separated . "Or", separated by ,
Example: p.highlight.small { color: red; }
Applies to al l paragraph elements whose class contains highlight and small
"Or", separated by ,
Example: h1, h2, h3 {...}
Appl ies to <h1>, <h2> or <h3> elements

15. Advance Compositions Descendants, separated by space
Example: form p {...}
Applies to al l paragraph tags inside form elements
Child of, separated by >
Example: form > p {...}
Applies to all paragraph elements that are direct children of form elements

16. Pseudo Classes :hover - Hover over a l ink :focus - Link is focused
:active - Click on l ink
:link - Unvisited l inks
:visited - Visited l inks

17. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

18. References Web Programming – Tufts University
See Course wiki for complete handout.