Specifying Styles
Three common mechanisms for specifying styles:
1. Via external stylesheet
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="whatever"/>
</head>
<body>
...
</body>
</html>
2. Via style element embedded in the HTML file
<html>
<head>
<title>...</title>
<style type="text/css">
p { color: blue; }
h1 { color: red; }
</style>
</head>
<body>
...
</body>
</html>
3. Via style attributes on elements
<html>
<head>
<title>...</title>
</head>
<body>
<h1 style="color: red;">Examples</h1>
<p style="color: blue;">This is a short example.</p>
</body>
</html>
Selectors
| Type | Example | Notes |
|---|---|---|
| Universal |
* {
font-family: serif;
}
|
Applies to everything. |
| Element |
h1 {
font-family: serif;
}
|
Applies to all h1 elements. |
| Multiple Element |
h1, h2, h3 {
font-family: serif;
}
|
Applies to all h1, h2 and h3 elements. |
| Descendant |
div h1 {
font-family: serif;
}
|
Applies to h1 elements that are descendants of a div element. |
| Child |
div > h1 {
font-family: serif;
}
|
Applies only h1 elements that are direct children of div elements. Not supported by IE. |
| Adjacent sibling |
h1 + p {
font-family: serif;
}
|
Applies to p elements which have an h1 element as the immediately preceding child of the same parent. |
| Arbitrary sibling |
h1 ~ p {
font-family: serif;
}
|
Applies to the p elements which have an h1 element as sibling. Currently, not well supported at all. |
| Attribute presence |
input[type] {
font-family: serif;
}
|
Applies to input elements which have a type attribute. |
| Attribute value |
input[type='text'] {
font-family: serif;
}
|
Applies to input elements which have an attribute type='text'. |
| Attribute value prefix |
a[href^='ftp'] {
font-family: serif;
}
|
Applies to a elements whose href attribute starts with 'ftp'. |
| Attribute value suffix |
a[href$='html'] {
font-family: serif;
}
|
Applies to a elements whose href attribute ends with 'html'. |
| Attribute value match |
a[href*='wawa'] {
font-family: serif;
}
|
Applies to a elements whose href attribute contains the substring 'wawa'. |
| Class |
.heading {
font-family: serif;
}
|
Applies to elements which contain an attribute class='heading'. |
| Class Union |
.heading {
font-family: serif;
}
.major {
font-weight: bold;
}
|
Each style applies inidividually to elements with class='heading' or class='major', but both styles apply to elements with class='heading major'. |
| Class Intersection |
.heading.major {
font-family: serif;
}
|
Applies only to elements having class='heading major'. |
| Element and Class |
div.major {
font-family: serif;
}
|
Applies to div elements that include class='major'. |
| Id |
#namelabel {
font-family: serif;
}
|
Applies to the one and only element which has the attribute id='namelabel'. |
| Element and Id |
p#namelabel {
font-family: serif;
}
|
Applies to the one and only p element which has id='namelabel'. |
| First letter |
p::first-letter {
font-size: 20px;
}
|
Applies to first letter of text in all p elements. |
| First line |
p::first-line {
letter-spacing: 2px;
}
|
Applies to first line of text in all p elements. |
| Selection |
::selection {
color: red;
}
|
Applies to the selected text. |
| Before |
h1::before {
content: '*** ';
}
|
Adds text before an element. |
| After |
h1::after {
content: ' ***';
}
|
Adds text after an element. |
| Unvisited Link |
a:link {
color: black;
}
|
Applies to unvisited hyperlinks. |
| Visited Link |
a:visited {
color: black;
}
|
Applies to visited hyperlinks. |
| Hover |
:hover {
color: black;
}
|
Applies to the element at which the mouse is pointing. |
| Active |
:active {
color: black;
}
|
Applies to the element on which the user is clicking. |
| Focus |
:focus {
color: black;
}
|
Applies to the element which has the focus. |
| Root |
:root {
font-size: 10px;
}
|
Applies to the root element (normally 'html'). |
| First child |
div > p:first-child {
color: black;
}
|
Applies to each p element which is the first child of a div. |
| Last child |
div > p:last-child {
color: black;
}
|
Applies to each p element which is the last child of a div. |
| Empty |
div:empty {
color: black;
}
|
Applies to every empty div element (without even whitespace). |
| Not |
h1:not(#top) {
color: black;
}
|
Applies to all h1's which don't have id='top'. |
| Target |
:target {
background-color: green;
}
|
Something to do with anchors and internal links. |
Centering Tables
To center a table, you make the left and right margins equals, like this:
<html>
<head>
<style type="text/css">
div {
width: 800px;
background-color: pink;
}
table {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</div>
</body>
</html>
Pretty &%$@#%!*% obscure, eh?
Three-column Layout
As described by Matthew Levine:
<html>
<head>
<style type='text/css'>
body {
min-width: 550px; /* 2x LC width + RC width */
}
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
#container .column {
position: relative;
float: left;
}
#header {
background-color: #faa;
}
#center {
width: 100%;
background-color: #afa;
}
#left {
width: 200px; /* LC width */
right: 200px; /* LC width */
margin-left: -100%;
background-color: #ffa;
}
#right {
width: 150px; /* RC width */
margin-right: -150px; /* RC width */
background-color: #aaf;
}
#footer {
clear: both;
background-color: #aff;
}
/*** IE6 Fix ***/
* html #left {
left: 150px; /* RC width */
}
/* the following make the columns appear equal height */
#container {
overflow: hidden;
}
#container .column {
padding-bottom: 20010px; /* X + padding-bottom */
margin-bottom: -20000px; /* X */
}
#footer {
position: relative;
}
</style>
</head>
<body>
<div id="header">HEADER<br/>HEADER</div>
<div id="container">
<div id="center" class="column">CENTER<br/>CENTER<br/>CENTER<br/>CENTER<br/>CENTER</div>
<div id="left" class="column">LEFT<br/>LEFT</div>
<div id="right" class="column">RIGHT</div>
</div>
<div id="footer">FOOTER<br/>FOOTER<br/>FOOTER</div>
</body>
</html>