What Is CSS? CSS Stands For Cascading Style Sheets

What is CSS?
• CSS stands for Cascading Style Sheets

• Styles define how to display HTML elements
• Styles are normally stored in Style Sheets
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save you a lot of work
• External Style Sheets are stored in CSS files
• Multiple style definitions will cascade into one
Styles Solve a Common Problem
HTML tags were originally designed to define the content of a document. They
were supposed to say "This is a header", "This is a paragraph", "This is a table",
by using tags like <h1>, <p>, <table>, and so on. The layout of the document
was supposed to be taken care of by the browser, without using any formatting
tags.
As the two major browsers - Netscape and Internet Explorer - continued to add
new HTML tags and attributes (like the <font> tag and the color attribute) to the
original HTML specification, it became more and more difficult to create Web
sites where the content of HTML documents was clearly separated from the
document's presentation layout.
To solve this problem, the World Wide Web Consortium (W3C) - the non profit,
standard setting consortium, responsible for standardizing HTML - created
STYLES in addition to HTML 4.0.
All major browsers support Cascading Style Sheets.
Style Sheets Can Save a Lot of Work
Styles sheets define HOW HTML elements are to be displayed, just like the font
tag and the color attribute in HTML 3.2. Styles are normally saved in external
.css files. External style sheets enable you to change the appearance and layout
of all the pages in your Web, just by editing one single CSS document!
CSS is a breakthrough in Web design because it allows developers to control the

style and layout of multiple Web pages all at once. As a Web developer you can
define a style for each HTML element and apply it to as many Web pages as you
want. To make a global change, simply change the style, and all elements in the
Web are updated automatically.
Multiple Styles Will Cascade Into One

Style sheets allow style information to be specified in many ways. Styles can be
specified inside a single HTML element, inside the <head> element of an HTML
page, or in an external CSS file. Even multiple external style sheets can be
referenced inside a single HTML document.
Cascading Order
What style will be used when there is more than one style specified for an
HTML element?
Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number four has the highest
priority:
1. Browser default
2. External style sheet
3. Internal style sheet (inside the <head> tag)
4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which
means that it will override a style declared inside the <head> tag, in an external
style sheet, or in a browser (a default value).
Syntax
The CSS syntax is made up of three parts: a selector, a property and a value:
selector {property: value}
The selector is normally the HTML element/tag you wish to define, the property is
the attribute you wish to change, and each property can take a value. The
property and value are separated by a colon, and surrounded by curly braces:
body {color: black}
Note: If the value is multiple words, put quotes around the value:
p {font-family: "sans serif"}
Note: If you wish to specify more than one property, you must separate each
property with a semicolon. The example below shows how to define a center
aligned paragraph, with a red text color:
p {text-align:center;color:red}
To make the style definitions more readable, you can describe one property on
each line, like this:
p
{
text-align: center;
color: black;
font-family: arial
}
Grouping
You can group selectors. Separate each selector with a comma. In the example
below we have grouped all the header elements. All header elements will be
displayed in green text color:
h1,h2,h3,h4,h5,h6
{
color: green
}
The class Selector
With the class selector you can define different styles for the same type of HTML
element.
Say that you would like to have two types of paragraphs in your document: one
right-aligned paragraph, and one center-aligned paragraph. Here is how you can
do it with styles:
p.right {text-align: right}

p.center {text-align: center}
You have to use the class attribute in your HTML document:
<p class="right">
This paragraph will be right-aligned.
</p>
<p class="center">
This paragraph will be center-aligned.
</p>
Note: Only one class attribute can be specified per HTML element! The example
below is wrong:
<p class="right" class="center">
This is a paragraph.
</p>
You can also omit the tag name in the selector to define a style that will be used
by all HTML elements that have a certain class. In the example below, all HTML
elements with class="center" will be center-aligned:
.center {text-align: center}
In the code below both the h1 element and the p element have class="center".
This means that both elements will follow the rules in the ".center" selector:
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
Do NOT start a class name with a number! It will not work in Mozilla/Firefox.
The id Selector
You can also define styles for HTML elements with the id selector. The id
selector is defined as a #.
The style rule below will match the element that has an id attribute with a value of
"green":
#green {color: green}
The style rule below will match the p element that has an id with a value of
"para1":
p#para1
{
text-align: center;
color: red
}
Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
CSS Comments
Comments are used to explain your code, and may help you when you edit the
source code at a later date. A comment will be ignored by browsers. A CSS
comment begins with "/*", and ends with "*/", like this:
/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}
How to Insert a Style Sheet
When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an
external style sheet, you can change the look of an entire Web site by changing
one file. Each page must link to the style sheet using the <link> tag. The <link>
tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>
The browser will read the style definitions from the file mystyle.css, and format
the document according to it.
An external style sheet can be written in any text editor. The file should not
contain any html tags. Your style sheet should be saved with a .css extension.
An example of a style sheet file is shown below:
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
Do NOT leave spaces between the property value and the units! If you use
"margin-left: 20 px" instead of "margin-left: 20px" it will only work properly in IE6
but it will not work in Mozilla/Firefox or Netscape.
Internal Style Sheet
An internal style sheet should be used when a single document has a unique
style. You define internal styles in the head section by using the <style> tag, like
this:
<head>
<style type="text/css">
hr {color: sienna}
</style>
</head>
The browser will now read the style definitions, and format the document
according to it.
Note: A browser normally ignores unknown tags. This means that an old browser
that does not support styles, will ignore the <style> tag, but the content of the
<style> tag will be displayed on the page. It is possible to prevent an old browser
from displaying the content by hiding it in the HTML comment element:
<head>
<style type="text/css">

</style>
</head>
Inline Styles
An inline style loses many of the advantages of style sheets by mixing content
with presentation. Use this method sparingly, such as when a style is to be
applied to a single occurrence of an element.
To use inline styles you use the style attribute in the relevant tag. The style
attribute can contain any CSS property. The example shows how to change the
color and the left margin of a paragraph:
<p style="color: sienna; margin-left: 20px">

This is a paragraph
</p>
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets,
the values will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color: red;
text-align: left;
font-size: 8pt
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align: right;
font-size: 20pt
}
If the page with the internal style sheet also links to the external style sheet the
properties for h3 will be:
color: red;
text-align: right;
font-size: 20pt
The color is inherited from the external style sheet and the text-alignment and the
font-size is replaced by the internal style sheet.
The CSS background properties define the background effects of an

element.
CSS Background Properties
The CSS background properties allow you to control the background color of an
element, set an image as the background, repeat a background image vertically
or horizontally, and position an image on a page.
Browser support: Internet Explorer, Firefox, Netscape.
Property Description Values

background A shorthand property background-color
for setting all background-
background properties image
in one declaration background-
repeat
background-
attachment
background-
position
background- Sets whether a scroll
attachment background image is fixed
fixed or scrolls with the
rest of the page
background-color Sets the background color-rgb
color of an element color-hex
color-name
transparent
background-image Sets an image as the url
background none
background- Sets the starting top left
position position of a top center
background image top right
center left
center center
center right
bottom left
bottom center
bottom right
x-% y-%
x-pos y-pos
background- Sets if/how a repeat
repeat background image will repeat-x
be repeated repeat-y
no-repeat
CSS Text Properties
The CSS text properties allow you to control the appearance of text. It is possible
to change the color of a text, increase or decrease the space between characters
in a text, align a text, decorate a text, indent the first line in a text, and more.

color Sets the color of a text color
direction Sets the text direction ltr
rtl
letter-spacing Increase or decrease normal
the space between length
characters
text-align Aligns the text in an left
element right
center
justify
text-decoration Adds decoration to none
text underline
overline
line-through
blink
text-indent Indents the first line of length
text in an element %
text-transform Controls the letters in none
an element capitalize
uppercase
lowercase
white-space Sets how white space normal
inside an element is pre
handled nowrap
word-spacing Increase or decrease normal
the space between length
words
CSS Font Properties
The CSS font properties allow you to change the font family, boldness, size, and
the style of a text.
Note: In CSS1 fonts are identified by a font name. If a browser does not support
the specified font, it will use a default font.

font A shorthand property font-style
for setting all of the font-variant
properties for a font in font-weight
one declaration font-size/line-
height
font-family
caption
icon
menu
message-box
small-caption
status-bar
font-family A prioritized list of font family-name
family names and/or generic-family
generic family names
for an element
font-size Sets the size of a font xx-small
x-small
small
medium
large
x-large
xx-large
smaller
larger
length
%
font-size-adjust Specifies an aspect none
value for an element number
that will preserve the
x-height of the first-
choice font
font-stretch Condenses or normal
expands the current wider
font-family narrower
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
font-style Sets the style of the normal
font italic
oblique
font-variant Displays text in a normal
small-caps font or a small-caps
normal font
font-weight Sets the weight of a normal
font bold
bolder
lighter
100
200
300
400
500
600
700
800
900
CSS Border Properties
The CSS border properties allow you to specify the style and color of an
element's border. In HTML we use tables to create borders around a text, but
with the CSS border properties we can create borders with nice effects, and it
can be applied to any element.

border A shorthand property border-width
for setting all of the border-style
properties for the four border-color
borders in one
declaration
border-bottom A shorthand property border-bottom-
for setting all of the width
properties for the border-style
bottom border in one border-color
declaration
border-bottom- Sets the color of the border-color
color bottom border
border-color Sets the color of the color
four borders, can have
from one to four colors
border-left A shorthand property border-left-width
properties for the left border-color
border in one
declaration
border-left-color Sets the color of the border-color
left border
border-right A shorthand property border-right-width
properties for the right border-color
border in one
declaration
border-right-color Sets the color of the border-color
right border
border-style Sets the style of the none
four borders, can have hidden
from one to four styles dotted
dashed
solid
double
groove
ridge
inset
outset
border-top A shorthand property border-top-width
properties for the top border-color
border in one
declaration
border-top-color Sets the color of the border-color
top border
border-width A shorthand property thin
for setting the width of medium
the four borders in one thick
declaration, can have length
from one to four
values
CSS Margin Properties
The CSS margin properties define the space around elements. It is possible to
use negative values to overlap content. The top, right, bottom, and left margin
can be changed independently using separate properties. A shorthand margin
property can also be used to change all of the margins at once.
Note: Netscape and IE give the body tag a default margin of 8px. Opera does
not! Instead, Opera applies a default padding of 8px, so if one wants to adjust the
margin for an entire page and have it display correctly in Opera, the body
padding must be set as well!

margin A shorthand property margin-top
for setting the margin margin-right
properties in one margin-bottom
declaration margin-left
margin-bottom Sets the bottom auto
margin of an element length
%
margin-left Sets the left margin of auto
an element length
%
margin-right Sets the right margin auto
of an element length
%
margin-top Sets the top margin of auto
an element length
%
CSS Padding Properties
The CSS padding properties define the space between the element border and
the element content. Negative values are not allowed. The top, right, bottom, and
left padding can be changed independently using separate properties. A
shorthand padding property is also created to control multiple sides at once.

padding A shorthand property padding-top
for setting all of the padding-right
padding properties in padding-bottom
one declaration padding-left
padding-bottom Sets the bottom length
padding of an element %
padding-left Sets the left padding length
of an element %
padding-right Sets the right padding length
of an element %
padding-top Sets the top padding length
of an element %
CSS Positioning Properties
The CSS positioning properties allow you to specify the left, right, top, and
bottom position of an element. It also allows you to set the shape of an element,
place an element behind another, and to specify what should happen when an
element's content is too big to fit in a specified area.

bottom Sets how far the auto
bottom edge of an %
element is length
above/below the
bottom edge of the
parent element
clip Sets the shape of an shape
element. The element auto
is clipped into this
shape, and displayed
left Sets how far the left auto
edge of an element is %
to the right/left of the length
left edge of the parent
element
overflow Sets what happens if visible
the content of an hidden
element overflow its scroll
area auto
position Places an element in a static
static, relative, relative
absolute or fixed absolute
position fixed
right Sets how far the right auto
to the left/right of the length
right edge of the
parent element
top Sets how far the top auto
above/below the top length
edge of the parent
element
vertical-align Sets the vertical baseline
alignment of an sub
element super
top
text-top
middle
bottom
text-bottom
length
%
z-index Sets the stack order of auto
an element number
CSS Pseudo-classes
CSS pseudo-classes are used to add special effects to some selectors.

Syntax
The syntax of pseudo-classes:
selector:pseudo-class {property: value}
CSS classes can also be used with pseudo-classes:
selector.class:pseudo-class {property: value}
Anchor Pseudo-classes
A link that is active, visited, unvisited, or when you mouse over a link can all be
displayed in different ways in a CSS-supporting browser:
a:link {color: #FF0000} /* unvisited link */

a:visited {color: #00FF00} /* visited link */
a:hover {color: #FF00FF} /* mouse over link */
a:active {color: #0000FF} /* selected link */
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order
to be effective!!
Note: a:active MUST come after a:hover in the CSS definition in order to be
effective!!
Note: Pseudo-class names are not case-sensitive.
Pseudo-classes and CSS Classes
Pseudo-classes can be combined with CSS classes:
a.red:visited {color: #FF0000}

<a class="red" href="css_syntax.asp">CSS Syntax</a>
If the link in the example above has been visited, it will be displayed in red.
Pseudo-classes
Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.
W3C: The number in the "W3C" column indicates in which CSS recommendation
the property is defined (CSS1 or CSS2).
Pseudo-class Purpose
:active Adds special style to an activated element
:focus Adds special style to an element while the
element has focus
:hover Adds special style to an element when you
mouse over it
:link Adds special style to an unvisited link
:visited Adds special style to a visited link
CSS Pseudo-elements
CSS pseudo-elements are used to add special effects to some selectors.

Syntax
The syntax of pseudo-elements:
selector:pseudo-element {property: value}
The :first-line Pseudo-element
The "first-line" pseudo-element is used to add special styles to the first line of the
text in a selector:
p {font-size: 12pt}
p:first-line {color: #0000FF; font-variant: small-caps}
<p>Some text that ends up on two or more lines</p>
The output could be something like this:
SOME TEXT THAT ENDS

up on two or more lines
In the example above the browser displays the first line formatted according to
the "first-line" pseudo element. Where the browser breaks the line depends on
the size of the browser window.
Note: The "first-line" pseudo-element can only be used with block-level

elements.
Note: The following properties apply to the "first-line" pseudo-element:
• font properties
• color properties
• background properties
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear
The :first-letter Pseudo-element
The "first-letter" pseudo-element is used to add special style to the first letter of
the text in a selector:
p {font-size: 12pt}
p:first-letter {font-size: 200%; float: left}
<p>The first words of an article.</p>
The output could be something like this:
___
| he first
| words of an
article.
Note: The "first-letter" pseudo-element can only be used with block-level

elements.
Note: The following properties apply to the "first-letter" pseudo- element:
• font properties
• color properties
• background properties
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if 'float' is 'none')
• text-transform
• line-height
• float
• clear
CSS Summary
This tutorial has taught you how to create style sheets to control the style and
layout of multiple web sites at once.
You have learned how to use CSS to add backgrounds, format text, add and
format borders, and specify padding and margins of elements.
You have also learned how to position an element, control the visibility and size
of an element, set the shape of an element, place an element behind another,
and to add special effects to some selectors, like links.

What Is CSS? CSS Stands For Cascading Style Sheets

Uploaded by

Copyright:

Available Formats

What Is CSS? CSS Stands For Cascading Style Sheets

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

What Is CSS? CSS Stands For Cascading Style Sheets

Uploaded by

Copyright:

Available Formats

What is CSS?

• CSS stands for Cascading Style Sheets

Styles Solve a Common Problem

All major browsers support Cascading Style Sheets.

Style Sheets Can Save a Lot of Work

CSS is a breakthrough in Web design because it allows developers to control the

Multiple Styles Will Cascade Into One

selector {property: value}

body {color: black}

p {font-family: "sans serif"}

The class Selector

p.right {text-align: right}

You have to use the class attribute in your HTML document:

.center {text-align: center}

#green {color: green}

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

How to Insert a Style Sheet

External Style Sheet

<p style="color: sienna; margin-left: 20px">

The CSS background properties define the background effects of an

CSS Background Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS Text Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS Font Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS Border Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS Margin Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS Padding Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS Positioning Properties

Browser support: Internet Explorer, Firefox, Netscape.

Property Description Values

CSS pseudo-classes are used to add special effects to some selectors.

The syntax of pseudo-classes:

selector:pseudo-class {property: value}

CSS classes can also be used with pseudo-classes:

selector.class:pseudo-class {property: value}

a:link {color: #FF0000} /* unvisited link */

Note: Pseudo-class names are not case-sensitive.

Pseudo-classes and CSS Classes

Pseudo-classes can be combined with CSS classes:

a.red:visited {color: #FF0000}

Browser support: IE: Internet Explorer, F: Firefox, N: Netscape.

CSS pseudo-elements are used to add special effects to some selectors.

The syntax of pseudo-elements:

selector:pseudo-element {property: value}

The :first-line Pseudo-element

The output could be something like this:

SOME TEXT THAT ENDS

Note: The "first-line" pseudo-element can only be used with block-level