CSS

Colors and
backgrounds
learn how to apply colors and
background colors to your websites.
advanced methods to position and
control background images.
Colors and backgrounds

The
following CSS properties will be

explained:
color
background-color
background-image
background-repeat
background-attachment
the 'color' property

describes
the foreground color of an element.

For example, imagine that we want all
headlines in a document to be dark red.
The headlines are all marked with the HTML
element <h1>.
The code below sets the color of <h1>
elements to red.
h1 {color: #ff0000;}
'background-color' property
describes the background color of elements
The element <body> contains all the content of
an HTML document. Thus, to change the
background color of an entire page, the
background-color property should be applied to
the <body> element.
body {
background-color: #FFCC66;
}
background-image property
used to insert a background image

To insert the image of the butterfly as a background
image for a web page, simply apply the backgroundimage property to <body> and specify the location of
the image.
body {
background-image: url("butterfly.gif");
}
background-repeat
property
notice that by default

the butterfly was
repeated both
horizontally and
vertically to cover the
entire screen?
The property
background-repeat
controls this behavior.
Value
Description
background-repeat:
repeat-x
The image is
repeated
horizontally
background-repeat:
repeat-y
The image is
repeated
vertically
The image is
background-repeat:
repeated both
repeat
horizontally
and vertically
background-repeat: The image is not
no-repeat
repeated
background-repeat
to
avoid repetition of a background image the

code should look like this:
body {
background-repeat: no-repeat;
}
property
attachment specifies
whether a background
picture is fixed or scrolls
along with the containing
element.
A fixed background image
will not move with the text
when a reader is scrolling
the page, whereas an
unlocked background
image will scroll along with
the text of the web page.
Value
Description
Backgroundattachment:
scroll
The image
scrolls
with the
page unlocked
Backgroundattachment:
fixed
The image is
locked
For
example, the code below will fix the

background image.
body {
background-repeat: no-repeat;
background-attachment: fixed;
}
Summary
You
have already learned new techniques

that would not be possible using HTML.
Fonts
learn
about fonts and how they are

applied using CSS.
work around the issue that specific
fonts chosen for a website can only be
seen if the font is installed on the PC
used to access the website
Fonts
The
following CSS properties will be

described:
font-family
font-style
font-variant
font-weight
font-size
font
font-family
is used to set a prioritized list of fonts to be used to

display a given element or web page.
If the first font on the list is not installed on the
computer used to access the site, the next font on
the list will be tried until a suitable font is found.
An example of a prioritized list of fonts could look
like this:
h1 {font-family: arial, verdana, sansserif;}
h2 {font-family: "Times New Roman",
serif;}
font-style
defines
the chosen font either in normal,

italic or oblique.
In the example below, all headlines marked
with <h2> will be shown in italics.
h1 {font-family: arial, verdana, sansserif;}
h2 {font-family: "Times New Roman", serif;
font-style: italic;}
font-variant
is
used to choose between normal or smallcaps variants of a font.

A small-caps font is a font that uses smaller
sized capitalized letters (upper case) instead
of lower case letters. Confused? Take a look
at these examples:
font-variant
If
font-variant is set to small-caps and no

small-caps font is available the browser will
most likely show the text in uppercase
instead.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
font-weight
describes
how bold or "heavy" a font should

be presented. A font can either be normal or
bold.
Some browsers even support the use of
numbers between 100-900 (in hundreds) to
describe the weight of a font.
p {font-family: arial, verdana, sansserif; font-weight: bold;}
td {font-family: arial, verdana, sansserif; font-weight: bold;}
font-size
There
are many different units (e.g. pixels

and percentages) to choose from to describe
font sizes.
Examples include:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Summary
Remember
that one of the major advantages

of using CSS to specify fonts is that at any
given time, you can change font on an entire
website in just a few minutes.
Text
Formatting
and adding style to text

is a key issue for any web designer.
introduced to the amazing
opportunities CSS gives you to add
layout to text.
Text
The
following properties will be described:
text-indent
text-align
text-decoration
letter-spacing
text-transform
text-indent
allows
you to add an elegant touch to text

paragraphs by applying an indent to the first
line of the paragraph.
In the example below a 30px is applied to all
text paragraphs marked with <p>:
p {text-indent: 30px;}
text-align
corresponds
to the attribute align used in old

versions of HTML.
Text can either be aligned to the left, to the
right or centered.
In addition to this, the value justify will
stretch each line so that both the right and left
margins are straight.
text-align
In
the example below the text in table

headings <th> is aligned to the right while the
table data <td> are centred. In addition,
normal text paragraphs are justified:
th {text-align: right;}
td {text-align: center;}
p {text-align: justify;}
text-decoration
makes
it is possible to add different

"decorations" or "effects" to text.
For example, you can underline the text,
have a line through or above the text, etc.
h1 {text-decoration: underline;}
h2 {text-decoration: overline;}
h3 {text-decoration: line-through;}
letter-spacing
spacing between text characters can be specified

using the property letter-spacing.
The value of the property is simply the desired
width.
For example, if you want a spacing of 3px between
the letters in a text paragraph <p> and 6px between
letters in headlines <h1> the code below could be
used.
h1 {letter-spacing: 6px;}
p {letter-spacing: 3px;}
text-transform
controls
the capitalization of a text.

There are four possible values for texttransform:
Capitalize - Capitalizes the first letter of each

word.
Uppercase - Converts all letters to uppercase.
Lowercase - Converts all letters to lowercase.
None - the text is presented as it appears in the
HTML code.
text-transform
Try
to take a look at the HTML code for this

example and you will see that the text
actually is in lowercase.
h1 {text-transform: uppercase;}
li {text-transform: capitalize;}
Links
You
can apply what you already learned in the

previous lessons to links (i.e. change colors, fonts,
underline, etc).
CSS allows you to define these properties differently
depending on whether the link is unvisited, visited,
active, or whether the cursor is on the link.
To control these effects you use so-called pseudoclasses.
What is a pseudo-class?
A
pseudo-class allows you to take into

account different conditions or events when
defining a property for an HTML tag
Let's look at an example. As you know, links
are specified in HTML with <a> tags. We can
therefore use a as a selector in CSS:
a { color: blue;}
pseudo-class
A link can have different states. For example, it can

be visited or not visited. You can use pseudoclasses to assign different styles to visited and
unvisited links.
a:link {
a:visited {
color: blue;}
color: red;}
Use a:link and a:visited for unvisited and visited

links respectively.
Links that are active have the pseudo-class a:active
and a:hover is when the cursor is on the link.
Pseudo-class: link
used
for links leading to pages that the user

has not visited.
In the code example below, unvisited links
will be light blue.
a:link {color: #6699CC;}
Pseudo-class: visited
is
used for links leading to pages that the

user has visited.
For example, the code below would make all
visited links dark purple:
a:visited {color: #660099;}
Pseudo-class: active
used
for links that are active.

This example gives active links a yellow
background color:
a:active { background-color:
#FFFF00;}
Pseudo-class: hover
used when the mouse pointer hovers over a link.

This can be used to create interesting effects. For
example, if we want our links to be orange and be
italicized when the cursor is pointed at them, our
CSS should look like this:
a:hover {
color: orange;
font-style: italic;
}
Identification and
grouping of elements
(class and id)
apply a special style to a particular

element or a particular group of
elements
use class and id to specify
properties for selected elements
Grouping elements with class

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 rightaligned paragraph, and one center-aligned
paragraph.
The class selector

Here
is how you can do it with styles:
The class selector
hereafter define special properties for links

belonging to whitewine and redwine:
As shown in the example you can define the

properties for elements which belong to a certain
class by using .classname in the style sheet of
the document.
Identification of element using

id
identify
one unique element? - This is done

by using the attribute id.
there can not be two elements in the same
document with the same id.
Each id has to be unique.
Example:
...<h2 id="c1-2">Chapter 1.2</h2>...
The id selector
This
can be done accordingly with CSS:

#c1-2 { color: red;}
Grouping of elements
(span and div)
use
of <span> and <div> as exactly

these two HTML elements are of central
importance with regards to CSS
<span> and <div> are used to group and
structure a document and will often be used
together with the attributes class and id
Grouping with <span>
The element <span> is what you could call a neutral

element which does not add anything to the
document itself.
But with CSS, <span> can be used to add visual
features to specific parts of text in your documents.
An example of this could be this Benjamin Franklin
quotation:
<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>
Grouping with <span>

Each
span is then added a class, which we

can define in our style sheet:
The CSS belonging to it:
Grouping with <div>

Whereas
<span> is used within a block-level

element as seen in the previous example,
<div> is used to group one or more blocklevel elements.
the grouping with <div> works in more or less
the same way
Grouping with <div>

HTML File:
CSS File:
The box model

Margin, Padding, Borders,
Height & Width
CSS describes the boxes
which are being generated for
HTML-elements
The box model in CSS
Application
Margin
An
element has four sides: right, left, top and

bottom
The margin is the distance from each side to
the neighboring element (or the borders of
the document)
Margin
Padding
Padding
can also be understood as "filling".

This makes sense as padding does not affect
the distance of the element to other elements
but only defines the inner distance between
the border and the content of the element.
Padding
By defining padding for the headlines, you change

how much filling there will be around the text in each
headline:
h1 {
background: yellow;
padding: 20px 20px 20px 80px;
}
h2 {
background: orange;
padding-left:120px;
}
Borders
can
be used for many things, for example as

a decorative element or to underline a
separation of two things. CSS gives you
endless options when using borders in your
pages.
border-width
border-color
border-style
border
border-width
width
of borders is defined by the property

border-width, which can obtain the values
thin, medium, and thick, or a numeric value,
indicated in pixels.
The figure below illustrates the system:
border-color
color
defines which color the border has.

The values are the normal color-values for
example "#123456", "rgb(123,123,123)" or
"yellow"
border-style
There
are different types of

borders to choose from.
Shown are 8 different types
of borders as Internet
Explorer 5.5 interprets
them.
The values none or hidden
can be used if you do not
want any border
Example
Height and width

With
the width-property, you can define a

certain width of an element.
Height on the other hand defines the height
on an element.
Summary
the
box model gives you many new options.

You might have been using tables in HTML to
create your layouts until now, but with CSS
and the box model you should now be able to
achieve elegant layouts more precisely.
Floating elements
An element can be floated to the
right or to left by using the property
float.
That is to say that the box with its
contents either floats to the right or to
the left in a document
The principle:
The result:
How is it done? - float

To
get the picture floating to the left and the

text to surround it, you only have to define the
width of the box which surrounds the picture
and thereafter set the property float to left.
float can be set as either left, right or none.
How is it done?
The HTML file:
The CSS file:
The property clear
used to control how the subsequent elements of

floated elements in a document shall behave.
By default, the subsequent elements are moved up
to fill the available space which will be freed when a
box is floated to a side. Look at the example above
wherein the text is automatically moved up beside
the picture of Bill Gates.
The property clear can assume the values left, right,
both or none. The principle is, if clear, for example,
is set to both for a box, the top margin border of this
box will always be under the lower margin border for
possible floating boxes coming from above.
The property clear

To
avoid the text from floating up next to the

picture, we can add the following to our CSS:
The HTML file:
The CSS file:
Positioning of
elements
With CSS positioning, you can
place an element exactly where you
want it on your page.
Together with floats positioning
gives you many possibilities to create
an advanced and precise layout.
The principle behind CSS

positioning
The
principle
behind CSS
positioning is
that you can
position any
box anywhere
in the system of
coordinates.
Example
Let's say we want to position a headline. By

using the box model the headline will appear as
follows:
If we want this headline positioned 100px from

the top of the document and 200px from the left
of the document, we could type the following in
our CSS:
h1 {
position:absolute;
top: 100px;
left: 200px;
}
The result will be as follows:
Absolute positioning
An
element which is positioned absolute

does not obtain any space in the document.
This means that it does not leave an empty
space after being positioned.
To position an element absolutely, the
position property is set as absolute.
You can subsequently use the properties left,
right, top, and bottom to place the box.
Example
As
an example of absolute positioning, we

choose to place 4 boxes in each corner of the
document:
Relative positioning
To
position an element relatively, the property

position is set as relative.
The difference between absolute and relative
positioning is how the position is being
calculated.
The position for an element which is relatively
positioned is calculated from the original
position in the document.
That means that you move the element to the
right, to the left, up or down.
Example
Layer on layer with

z-index (Layers)
this means the order of which the
elements overlap one another.
learn how to let different elements
become layers.
CSS operates in three dimensions height, width and depth.
Z-index
,you
can assign each element a number (zindex). The system is that an element with a
higher number overlaps an element with a
lower number.
Example
Summary
Layers
can be used in many situations.

For example, try to use z-index to create
effects in headlines instead of creating these
as graphics.
For one thing, it is faster to load text and for
another, it provides a potentially better
ranking in search engines.
Web-standards and
validation
Web-standards
W3C
is the World Wide Web Consortium,

which is an independent organization that
manages code standards on the web (e.g.
HTML, CSS, XML and others).
Microsoft, The Mozilla Foundation and many
others are a part of W3C and agree upon the
future developments of the standards.
Web-standards
If
you have been working just a bit with web

design, you probably know that there can be
a big differences in how a webpage is
presented across different browsers.
It can be very frustrating and time-consuming
to create a webpage which can be viewed in
Mozilla, Internet Explorer, Opera and all the
rest of the existing browsers.
Web-standards
The idea of having standards is to agree upon a

common denominator on how to use web
technologies.
by observing the standards, a web developer has a
certainty that what he or she does will work in a
more appropriate manner across different platforms.
We therefore recommend that you back up the
work carried out by the W3C and validate your
CSS in order to observe the standard.
CSS validator
To
make it easier to observe the CSS

standard, W3C has made a so-called
validator which reads your stylesheet and
returns a status listing errors and warnings, if
your CSS does not validate.
To make it easier for you to validate your
stylesheet, you can do it directly from this
webpage.
The validator can also be found at this link:
http://jigsaw.w3.org/css-validator/

CSS

Uploaded by

Document Information

Original Description:

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

CSS

Uploaded by

Copyright:

Available Formats

Colors and

Colors and backgrounds

following CSS properties will be

the 'color' property

the foreground color of an element.

used to insert a background image

notice that by default

avoid repetition of a background image the

example, the code below will fix the

have already learned new techniques

about fonts and how they are

following CSS properties will be

is used to set a prioritized list of fonts to be used to

the chosen font either in normal,

used to choose between normal or smallcaps variants of a font.

font-variant is set to small-caps and no

how bold or "heavy" a font should

are many different units (e.g. pixels

that one of the major advantages

and adding style to text

following properties will be described:

you to add an elegant touch to text

to the attribute align used in old

the example below the text in table

it is possible to add different

spacing between text characters can be specified

the capitalization of a text.

Capitalize - Capitalizes the first letter of each

to take a look at the HTML code for this

can apply what you already learned in the

pseudo-class allows you to take into

A link can have different states. For example, it can

Use a:link and a:visited for unvisited and visited

for links leading to pages that the user

used for links leading to pages that the

for links that are active.

used when the mouse pointer hovers over a link.

apply a special style to a particular

Grouping elements with class

the class selector you can define

The class selector

is how you can do it with styles:

The class selector

hereafter define special properties for links

As shown in the example you can define the

Identification of element using

one unique element? - This is done

can be done accordingly with CSS:

of <span> and <div> as exactly

Grouping with <span>

The element <span> is what you could call a neutral

Grouping with <span>

span is then added a class, which we

The CSS belonging to it:

Grouping with <div>

<span> is used within a block-level

Grouping with <div>

The box model

The box model in CSS

element has four sides: right, left, top and

can also be understood as "filling".

By defining padding for the headlines, you change