DokuWiki

CSS Cheat Sheet

This is a summarized form of the CSS Tutorial.

For reference this is the CSS2 Specification .

What is CSS

CSS stands for Cascading Style Sheets.
Styles define how to display HTML elements. Style sheets are collections of styles.
Multiple style sheets will cascade into a single style definition.

There are 3 ways to specify styles (decreasing priority):

inline as an element style attribute
```
 <p style="color: sienna>text</p>
```

in an internal style sheet in the head

 <head> <style type="text/css">
<!--
hr {color: sienna}
-->
</style> </head>

in an external style sheet in a css file

<link rel="stylesheet" type="text/css"
href="style.css" />

CSS Syntax

CSS syntax is made up of three parts - selector {property: value}.

Multiple property-value pairs may be separated by semi-colons.
Multiple selectors must be separated by commas
Values must be quoted if they are multiple words

A simple example

h1,h2,h3 {
text-align: center;
color: black;
font-family: "sans serif" }

Classes allow groups of elements to share formatting e.g.

p.right {text-align: right}
.blue {color: blue}
<p class="right blue">right-aligned blue text</p>

Styles can also match on attribute values or id e.g.

input[type="text"] {background-color: blue}
#id {background-color: blue}
p#id {background-color: blue}

CSS uses C-style comments - /* comment */ .

CSS Properties

Background properties examples

background-color: black;
background-image:  url('bg.jpg');
background-repeat: repeat-[x|y]/no-repeat/repeat;
background-attachment: fixed
background-position: center/30% 20%/50px 100px;
background: blue url('bg.gif') no-repeat fixed center;

Text properties examples <code html>

DokuWiki

Sidebar

Table of Contents

CSS Cheat Sheet

What is CSS

CSS Syntax

CSS Properties

DokuWiki

Site Tools

Sidebar

Table of Contents

CSS Cheat Sheet

What is CSS

CSS Syntax

CSS Properties

Page Tools