The simplest selector is the element tag name. The rule will apply to a elements of that type unless overridden by succeeding rules.
<style type="text/css">
p {
font-size: 0.9em;
}
</style>
...
<p>
Paragraph one ...
</p>
<p>
Paragraph two ...
</p>
Class selectors are used to define style rules which apply to more than one element in a page. the class selector in the style sheet is a string preceded by a period. It is applied using an element’s class attribute. The period does not appear in the value of class.
<style type="text/css">
.example {
color: brown;
}
</style>
...
<p class="example">
This is an example.
</p>
ID selectors are used to define style rules which apply to only one element in the page. The ID selector in the style sheet is a string preceded by a hash mark (#) | and is applied to the element with the matching ID attribute. The hash mark does not appear in the value of ID.
<style type="text/css">
#i5 {
color: brown;
}
</style>
...
<p id="i5">
This is text with an ID of ‘i5’.
</p>
In order to restrict the scope of a rule, the type and class selectors can be combined.
<style type="text/css">
p.special {
font-size: 0.9em;
}
</style>
...
<p>
Paragraph one ...
</p>
<p class="special">
Paragraph two ...
</p>
Only the second paragraph is targeted. Incidentally, this construction is valid for id attribute selectors but would rarely make sense—there can only be one id of that name on the page.
Contextual selectors are used when styles should be applied to a given element only under specific circumstances. One example is descendant (parent-child): the style is applied only when the child element is in the specified parent.
<style type="text/css">
h1 em {
color: red;
}
</style>
...
<h1>
This is <em>red</em>.
</h1>
<p>
This is <em>not</em>.
</p>
Grouping allows the author to assign a single style declaration to multiple elements.
h1, h2, h3, h5 {
color: purple;
}
CSS allows an author to leave comments in the style sheet. The format is identical to that used in most variants of C/C++.
/* This is a comment. */
A child element inherits properties from its parent element.
Place the style sheet in head section
<head>
<style type="text/css">
/* ... style rules ... */
</style>
</head>
Place a link element in the head element.
<head>
<link rel="stylesheet" type="text/css" href="path/to/styles.css" />
</head>
<font-name> | serif | sans-serif | monospace | cursive | fantasy
Used to declare a specific font to be used | a generic font family | or both.
body { font-family: Verdana, sans-serif; }
normal | italic | oblique
Selects between normal and italics (oblique).
.answer { font-style: italic; }
normal | bold | bolder | lighter | <100 – 900>
Sets the weight of a font.
.question { font-weight: bold; }
<length> | <absolute size> | <relative size> | <percentage>
Sets the size of the font.
Length units: mm | cm | in | pt | pc | em | ex | px
Absolute size names: xx-small | x-small | small | medium | large | x-large | xx-large
Relative size names: smaller | larger
h2 { font-size: 200%; }
h3 { font-size: 36pt; }
Shorthand property combining the other font properties. The order of values is important | and is as follows: font-style font-variant font-weight font-size/line-height font-family. Any of these values may be omitted.
body { font: bold 12px/14px Georgia, sans-serif; }
none | underline | overline | line-through | blink
Sets text effects like underlining. Combinations of the values are legal.
a { text-decoration: none; }
a:hover { text-decoration: underline; }
none | capitalize | uppercase | lowercase
Changes the case of the letters in the element | regardless of the original text.
h1 { text-transform: uppercase; }
.title { text-transform: capitalize; }
left | right | center | justify
Sets the horizontal alignment of the text in an element. May only be applied to block-level elements.
p { text-align: justify; }
h4 { text-align: center; }
<length> | <percentage>
Sets the indentation of the first line in an element. Most often used to create a tab effect for paragraphs. Only applies to block-level elements; negative values are permitted.
p { text-indent: 5em; }
h2 { text-indent: -25px; }
<length> | <percentage>
Sets the vertical distance between baselines in an element. Negative values are not permitted.
p { line-height: 18pt; }
h2 { line-height: 200%; }
Sets the color of a given element. For text | this sets the text color; for other elements | such as hr | it sets the foreground color.
strong { color: #6C6; }
<color> | transparent
Sets the background color of an element. This background extends out to the edge of the element’s border.
h4 { background-color: white; }
url(<url>)
Sets an image to be the background pattern. In conjunction with the other background properties | may tile or repeat in one direction only.
body { background-image: url(imgs/bg41.gif); }
repeat | repeat-x | repeat-y | no-repeat
Sets the repeat style for a background image.
body { background-repeat: no-repeat; }
<percentage> | <length> | top | center | bottom | left | right
Sets the position of a background image | both single and repeated.
body { background-position: top right; }
Shorthand property for the other background properties. The values can be written in any order.
body { background: white url(bg41.gif) bottom repeat-x; }
<length> | <percentage> | auto
Sets the size of the top | right | bottom | and left margins of an element. Negative values are permitted.
ul { margin-top: 0.5in; }
img { margin-right: 30px; }
Sets the size of all the margins of an element. Negative values are permitted. The sequence of values is
h1 { margin: 12px 0;}
p { margin: 2em 2em 3em 2em; }
<length> | <percentage>
Sets the size of the padding for each side of an element. Negative values are not permitted.
ul { padding-top: 0.5em; }
Sets the size of the overall padding of an element. Negative values are not permitted. See margin for sequence of values.
h1 { padding: 2em 3em 4em; }
thin | medium | thick | <length>
Sets the width of the top border of an element | which will inherit the element’s background | and may have a foreground of its own (see border-style). Negative values are not permitted.
img { border-top-width: 0.5in; }
thin | medium | thick | <length>
Sets the width of the overall border of an element | which will inherit the element's background | and may have a foreground of its own (see border-style). Negative values are not permitted.
H1 { border-width: 2ex; }
Sets the color of the foreground of the border. The background is inherited from the element.
#sidebar { border-color: #5E5E5E; }
none | solid | double | groove | ridge | inset | outset
Sets the style of the overall border of an element | using the color set by border-color.
#sidebar { border-style: solid; }
Shorthand property which defines the width | color | and style of the overall border of an element.
#sidebar { border: 1px dashed #5E5E5E;}
<length> | <percentage>
Used to set the width and height of block or replaced (images | objects) elements. Negative values are not permitted.
.popup { width: 25%; height: 100px; }
left | right | none
Sets the float for an element | which allows other elements to flow around them.
img.content { float: left; }
none | left | right | both
Used with float to specify whether other elements may not float beside it.
div.clear { clear: both; }
inline | block | list-item | none
Specifies the type of box the element will generate.
.hide { display: none; }
disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none
Used to declare the type of bullet or numbering system to be used in an unordered or ordered list. Applies to elements with a display value of list-item.
ul { list-style-type: square; }
ol { list-style-type: lower-roman; }
<url> | none
Replaces the bullet with a user-defined image.
ul { list-style-image: url(../imgs/smbull.gif); }
inside | outside
Replaces the bullet with a user-defined image.
ul { list-style-position: inside; }
Shorthand property for setting all list-styles at once. Applies to all elements with a display value of list-item.
ul { list-style: square inside; }
The following units are used by various properties to define size in absolute terms; i.e. | distances which will be consistent regardless of their context:
| in | inches |
| cm | centimeters |
| mm | millimeters |
| pt | points (1/72 inch) |
| pc | picas (12 points) |
These units define lengths relative to the font-height:
| em | ems (height of font) |
| ex | x-height (height of lower-case letter x) |
| % | percent |
The pixel unit is special; its size is determined by the display media.
| px | pixels |
.sidebar {
width: 50px;
margin-left: 2em;
}
#000 | #000000 | rgb(000, 000, 000) | rgb(0%, 0%, 0%) | <color names>
Used by various properties to define colors.
color: #F0F;
color: #FF00FF;
color: rgb(100%, 0%, 100%);
color: rgb(255, 0, 255);
maroon (#800000) | red (#FF0000) | orange (#FFA500) | yellow (#FFFF00) | olive (#808000), purple (#800080) | fuchsia (#FF00FF) | white (#FFFFFF) | lime (#00FF00) | green (#008000), navy (#000080) | blue (#0000FF) | aqua (#00FFFF) | teal (#008080) | black (#000000) | gray (#808080) | silver (#C0C0C0)
Used by various properties to define the location of images. Partial URLs are interpreted relative to the style sheet, not the document.
body { background-image: url(../imgs/picture.gif) }
table { background-image: url(http://www.pix.org/lib1/pic278.gif)}
There are three positioning schemes in CSS: normal flow (including relative positioning), float, and absolute positioning.
static | relative | absolute | fixed
Sets the way the element is positioned. static means normal flow is used.
<length> | <percentage> | auto
These are the box offsets. They set the position of the element’s edges. For absolutely positioned elements, this is relative to the document edge. (e.g. The page’s upper left corner is coordinate [0, 0]). For relatively positioned elements, this is a positive or negative offset from the default position.
The position can be specified either by a length unit (such as 200px) or as a percentage of the containing element’s width (such as 50% for half the parent element’s width).
auto specifies placement at the element’s default location.
<shape> | auto
Applies to absolutely positioned elements. The clipping area defines the part of the element which is visible. auto (the default value) makes the whole element visible.
The only clipping shape allowed is a rectangle, specified by the notation rect (<top> <right> <bottom> <left>). Each of <top> <right> <bottom> <left> is either a length unit (with coordinates relative to the element’s origin) or the value auto, which makes the element fully visible in that direction.
p { clip: rect(5px, 40px, 45px, 5px); }
visible | hidden | scroll | auto
overflow specifies what happens when an element’s contents exceed the element’s height or width.
.scroller {
position: absolute;
width : 100px;
height: 10em;
overflow: scroll;
}
visible | hidden
visibility determines whether an element’s content can be seen. This setting does not affect HTML layout; an element uses the same amount of space regardless of whether it is visible or hidden.
#container2 { visibility: hidden; }
auto | <integer>
z-index specifies the element’s stacking level. It is set to an integer. The higher the value the higher up the stack the element is (i.e. closer to the user than lower values). auto lets the browser choose a default stacking order. A stacking context is generated by positioned element.
#first {
position: absolute;
top: 100px;
left: 100px;
z-index: 1;
color: yellow;
}
#second {
position: absolute;
top: 103px;
left: 103px;
z-index: 2;
color: lime;
}
<style type="text/css">
@import url(includes/screen.css) screen;
@media print {
/* style rules for print go here */
}
</style>
The following keywords are the recognized types of media.
all | braille | embossed | handheld | print | projection | screen | speech | tty | ty
@page rule
Page boxes consist of a page area and a margin area. The :first, :left, and :right psuedo classes control which pages rules apply to; only margin properties may be used the margin area. Only absolute lengths are meaningful (e.g. in or pt).
@page {
margin: 3cm;
}
@page:first {
margin-top: 10cm;
}
@page:left {
margin-left: 4cm;
}
@page:right {
margin-right: 4cm;
}
auto | always | avoid | left | right
These rules control how pages break around generated boxes. The breaks ends layout in the current page box and starts a new one.
auto | avoid
<integer>
Specify the minimum number of lines to leave at the bottom (orphans) or top (widows) of the page. The default is 2.