div { margin: 3px; text-align: center }
.header a { color: green }
#menu>li { padding-top: 8px }
// tag
h1 { font-family: verdana,sans-serif; }
// id
#element_id { color: #ff0000; }
// class
.myClass {border: 1px solid red}
// combined
h1, .link, #top-link {font-weight: bold}
p a {text-decoration: underline}
p * {color: black}
p.post-text.special {font-weight: bold}
img + .link {float:right}
p > .error {font-size: 8px}
<!DOCTYPE html>
<html>
<head>
<title>Style Sheets</title>
<style type="text/css">
em {background-color:#8000FF; color:white}
h1 {font-family:Arial, sans-serif}
p {font-size:18pt}
.blue {color:blue}
</style>
<head>
<body>
<header>
<h1 class="blue">A Heading</h1>
</header>
<article>
<p>Here is some text. Here is some text.
Here is some text. Here is some text. Here
is some text.
</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.
</p>
</article>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Style Sheets</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<head>
<body>
<header>
<h1 class="blue">A Heading</h1>
</header>
<article>
<p>Here is some text. Here is some text.
Here is some text. Here is some text. Here
is some text.
</p>
<h1>Another Heading</h1>
<p class="blue">Here is some more text.
Here is some more text.</p>
<p class="blue">Here is some <em>more</em>
text. Here is some more text.
</p>
</article>
</body>
</html>
Embeded
External style
a[title] {color:black}
input[type=text] { font-family:Consolas}
a[title*=logo] {border: none}
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }
:root
:only-child
:empty
:nth-child(n)
:nth-last-child(n)
:first-of-type
:last-of-type
:only-of-type
:nth-of-type(n)
:nth-last-of-type(n)
:first-child
:last-child
!important can be highly abused and make for messy and hard to maintain CSS.
p {
color: red !important;
}
#thing {
color: green;
}
<p id="thing">Will be RED.</p>
background-image
URL of image to be used as background, e.g.:
background-image: url("back.gif");
background-color
Using color and image and the same time
background-repeat
repeat-x, repeat-y, repeat, no-repeat
background-attachment
fixed / scroll
background-position: specifies vertical and horizontal position of the background image
Vertical position: top, center, bottom
Horizontal position: left, center, right
Both can be specified in percentage or other numerical values
.container {
margin: 5px;
}
.container {
margin: 10px 20px;
}