CSS

INTRODUCTION
What is CSS?
CSS stands for “Cascading Style
sheets”.
CSS is a language that works with
HTML documents to define the
way web pages are presented.
CSS is used to control the
appearance of web pages,
including the positioning of content
and images, the different colours
used, and more.
CSS rules
CSS rules are written with five
different parts: selector,
declaration block, declaration,
property and value
The selector “selects” the
elements on an HTML page that
are affected by the rule.
In the following example, the “p”
selector will select every
paragraph (<p>) on the web page.
 /* CSS rule */!
p { }!
!
!
selector
!
!
<!-- HTML markup -->!
<p>This is a paragraph of text</p>!
<p>This is another paragraph of text</p>
The declaration block is a
container that consists of anything
between (and including) the start
brace “{” and end brace “}”.
 /* CSS rule */!
p { }!
!
!
declaration block
!
!
<!-- HTML markup -->!
<p>This is a paragraph of text</p>!
<p>This is another paragraph of text</p>
The declaration tells browsers
how to render any element on a
page that is selected.

/* CSS rule */!

p { color: red; }!
!
!
declaration
!
!
<!-- HTML markup -->!
<p>This is a paragraph of text</p>!
<p>This is another paragraph of text</p>
The property defines what aspect
of the element will be styled. In the
following example, the color
property that will be styled.
/* CSS rule */!
p { color: red; }!
!
!
property
!
!
<!-- HTML markup -->!
<p>This is a paragraph of text</p>!
<p>This is another paragraph of text</p>
There are a wide range of pre-
defined properties that can be
used in CSS documents, including:
/* CSS properties */!
p { background: green; }!
p { border: 1px solid lime; }!
p { color: red; }!
p { display: block; }!
p { font-size: 80%; }!
p { height: 300px; }!
p { color: red; }!
p { margin: 1em; }!
p { padding-top: 2em; }!
p { text-align: right; }!
p { width: 50%; }
The value is the exact style you
wish to set for the property. In the
following example, all paragraph
elements will be styled with a color
value of red.
/* CSS rule */!
p { color: red; }!
!
!
value
!
!
<!-- HTML markup -->!
<p>This is a paragraph of text</p>!
<p>This is another paragraph of text</p>
Multiple selectors
When several selectors share the
same declarations, they can be
grouped together.
/* Individual rules */!
h1 { color: red; }!
h2 { color: red; }! individual selectors
h3 { color: red; }!
!
/* Multiple selector rule */!
h1, h2, h3 { color: red; }! one selector
Each selector must be separated
by a comma. There must be no
comma after the last selector.
/* Multiple selector rule */!
h1, h2, h3 { color: red; }!

no comma after last selector

Multiple selectors are designed to
make it easier for authors - to
save writing the same rule more
than once.
Multiple
declarations
Multiple declarations can be
included inside a single
declaration block.
/* CSS rules */!
h1 { color: red; }!
h1 { margin: 0; }! two rules
!
h1!
{ !
! color: red;!
one rule
! margin: 0; !
}!
!
Each declaration must be
separated by a semi-colon.

/* CSS rules */!

h1 { color: red; }!
h1 { margin: 0; }!
!
h1!
{ !
! color: red;!
semi-colon
! margin: 0; !
}!
!
The last declaration does not need
a semi-colon, but it is a good
practice to include one after every
declaration, in case you add more
declarations to the rule set later on.

White space
White space is ignored inside CSS
rules, so declarations can be
written in single or multiple lines.
/* CSS rules */!
h1!
{ !
! color: red;!
multiple lines
! margin: 0;!
}!
!
h1 { color: red; margin: 0; }! single line
CSS comments
You can insert comments in CSS.
CSS comments must begin with a
forward slash and an asterisk “/*”
and end with an asterisk and a
forward slash “*/”.

Any characters between the start

and end of the comment will be
ignored by browsers.

/* a CSS comment used in CSS files */

CSS comments can be written on
single or multiple lines.

/* a single line CSS comment */!

!
!
/* !
a CSS comment!
over multiple line !
*/
Russ Weakley
Max Design

!
Site: maxdesign.com.au

Twitter: twitter.com/russmaxdesign

Slideshare: slideshare.net/maxdesign

Linkedin: linkedin.com/in/russweakley