In-line: <p style="color: red">text</p>

Embedded, or internal styles:

<html> <head> <title>CSS Example</title>
<style type="text/css">
p {  color: red;} a {  color: blue;}

External (in file.css)

<html> <head> <title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="file.css" />

Selectors, Properties, and Values

def css
body {
	font-size: 0.8em;
	color: navy;


font-size, color: properties

values: 0.8em navy

em (ex font-size: 2em) is the unit for the calculated size of a font. So "2em", for example, is two times the current font size.
px (such as font-size: 12px) is the unit for pixels.
pt (such as font-size: 12pt) is the unit for points.
% (such as font-size: 80%) is the unit for... wait for it... percentages.
Other units include pc (picas), cm (centimetres), mm (millimetres) and in (inches).


Margins et Padding

The Box Model works like this: in the middle you have the content area (let's say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. It can be visually represented like this:

Margin box
Border box
Padding box
Element box


To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset.

border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and border-left-width.

Finally, border-color sets the colour.

Ex: http://htmldog.com/examples/borders.html


Span and Div, attributes class & id

attributes class and id to associate the element with a class or id CSS selector (.class-select for x elements oo #id-select for 1 single element)


#top {	background-color: #ccc;}
.intro {color: red;}

<div id="top">
<h1>Chocolate curry</h1>
<p class="intro">This is my recipe for making curry purely with chocolate</p>


apply a selector to a specific HTML element by simply stating the HTML selector first, so p.jam { whatever } will only be applied to paragraph elements that have the class 'jam'.

All attributes must also be lowercase and their values in quotation marks.


Grouping and nesting

don't do
h2 {	color: red;}

.thisOtherClass {
	color: red;
h2, .thisOtherClass, .yetAnotherClass {
	color: red;

Nesting: spaces/espace - specify properties to selectors within other selectors

ex css ex html
#top {	background-color: #ccc;}

#top h1 {color: #ff0;}

#top p {color: red;	}
<div id="top">
	<h1>Chocolate curry</h1>
	<p>This is my recipe for css</p>
	<p>Mmm mm mmmmm</p>

Pseudo classes

  • link is for an unvisited link.
  • visited is for a link to a page that has already been visited.
  • active is for a link when it is gains focus (for example, when it is clicked on).
  • hover is for a link when the cursor is held over it.

As pseudo classes (other than hover) are not often used, this is a feature that is unfortunately not as common as it once was. Because of this, it is less important than it used to be, but if you are looking for the optimum user response, then you should use it.