Cascading Style Sheets (CSS) reference
Web Design & Development
What is CSS
CSS is the language for describing the presentation of Web pages. This includes colors, layout, and font information, as well as how to change the presentation on different types of devices, such as those with large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup language.
- W3C definition
History
- W3C established CSS standards
- CSS 1 around 1996
- CSS 2 around 1998
- CSS 3 under development
Importance of CSS
- separation of content from presentation
- reduce complexity of code – increase download speed
- multi-page formatting
- flexibility and control of presentation
- accessibility
Structure / Syntax
Selectors
selector {property: value}
h1 {font-size: 1em;}
Best practice: Be consistant with spacing and tabing your styles.
Selectors: (#)id and (.)class
#larger {font-size: 2em;}
.smaller {font-size: .5em;}
Best practice: Be consistant with naming conventions and use representational names.
Pseudo-classes
a:hover {text-decoration: none;}
Universal Selector
* { margin: 0;}
Advanced Selectors
Child Selector
#nav > li {font-weight: bold;}
Adjacent Selector
h1 + p {font-weight: bold;}
Attribute Selector
abbr[title] {border-bottom: 1px dotted #9999;}
abbr[title]:hover {cursor: help;}
Divs and spans
<div id="singleUse"></div>
<div class="multiUse"></div>
<p>The quick tan fox <span class="important">jumped</span></p>
Cascade and Specificity
Cascade
- User styles flagged !important
- Author styles flagged !important
- Author styles
- User styles
- Browser/user agent styles
Specificity
Inline styles → #id → .class → div → tag
ul.navigation {width: 3em;};
Use
In-Line Styles
<p style="color: #333333;">The quick tan fox.</p>
Internal Styles
<head>
<style type="text/css">
p {color: #333333}
</style>
</head>
External Styles
<head>
<link rel="stylesheet" type="text/css" href="screen.css" />
</head>
Note: within external style sheets you can link to additional external styles. ex:
@import url(reset.css);
Going Forward
Web Developer (Firefox add-on)
References / Additional Resources
World Wide Web Consortium (W3C)
W3C Cascading Style Sheets – Learning CSS