Cascading Style Sheets (CSS)
Lecture Notes for CS 142
Winter 2015
John Ousterhout
- In the early versions of HTML, no CSS:
- Use special tags to indicate *what* is being displayed,
such as <h1> or <author>, browser chooses
formatting.
- Some elements allow you to specify formatting using attributes:
<table border="2" bordercolor="black">
- CSS was introduced to solve the problems with the above approaches,
and provide more flexible formatting:
- Formatting information is separated from document content:
- Content (what to display) is in HTML files.
- Formatting information (how to display it) is in separate
style sheets (.css files).
- class attributes tie these together
- Result: define style information once, use in many places
- DRY principle: Don't Repeat Yourself.
- Stylesheet basics:
- A stylesheet consists of one or more rules, each with
a selector and a declaration block:
body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
- Each declaration in the declaration block contains an attribute name
and value.
- Possible forms for selectors:
- Tag name: applies to all elements with that tag.
HTML: |
<h1>Today's Specials</h1>
|
CSS: |
|
- Class attribute:
HTML: |
|
CSS: |
.large {
font-size: 16pt;
}
|
- Tag name and class:
- The id attribute for an element:
HTML: |
|
CSS: |
#p20 {
font-weight: bold;
}
|
- Hierarchical combinations:
CSS: |
table.items tr.header {...}
|
- There are several others forms besides these, such as
a:hover, which applies to <a> elements when
the mouse is over them and a:visited, which applies to
<a> elements that have previously been visited).
For details, check out Web sites such as
w3schools or
Mozilla Developer
Network, or the book
Dynamic HTML: The
Definitive Reference, Third Edition, by Danny Goodman.
- Some common style attributes:
- background, color: background and foreground colors
- Color specs: must ultimately turn into red, green, and blue
intensities between 0 and 255:
- Predefined values such as red and blue.
- #rrggbb: rr, gg, and bb are 2-digit hexadecimal numbers.
- rgb(0, 255, 0): red green and blue intensities
as decimal numbers.
- rgb(0%, 100%, 0%): red green and blue intensities
as percentages.
- background-image: image for element's background
- background-repeat: should background image be displayed
in a repeating pattern (versus once only)
- font, font-family, font-size,
font-weight, font-style: font information for text
- text-align, vertical-align: horizontal
and vertical alignment
- Box layers for block-level elements (from out to in):
- margin (transparent: no background): used for separating this
element from its neighbors.
- border, border-bottom, etc.
- padding (unoccupied space, but with the element's background):
used for creating space between the edge of text and the edge
of the background or the border.
- The element's contents.
- Can combine these attributes to achieve effects such as underline.
- Distances can be specified in a variety of units:
- px: pixels
- mm, cm, in: display-resolution-independent
distances
- pt: printers' points
- em, ex: other printers' units
- cursor
- display: determine whether or not element is displayed;
none means not visible (shrink to zero size), blank means
visible
- width, height: override default geometry
- position (relative vs. absolute), top,
bottom, left, right
- Inheritance: some attributes (e.g. font-size) are
inherited, others are not (border, background).
- What if several rules apply to a particular element and they specify
conflicting values for an attribute?
- General idea: the most specific rule wins.
- Three ways to specify CSS for a Web page:
- Most common approach: put the CSS in a separate file and
reference that file in the <head> for the page:
<link rel="stylesheet" type="text/css" href="myStyles.css" />
- Include the style information directly into the page's <head>
(use only for page-specific styles):
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
...
}
</style>
- Specify styles for an individual element:
<div style="padding:2px;">...</div>
- Simple example: cssExample.html.
- You should use CSS in this class and in all Web design. For example,
don't specify colors, fonts, alignments, or pixel distances
in HTML elements.