L2 - CSS PDF

Web Prog & Dev 1
Claudine Narciso
CSS (Cascading Style Sheet)

• CSS stands for Cascading Style Sheet
• Defines how HTML elements are displayed by the browser
• Allows the web designer to control the layout and appearance of multiple web pages all at once
Note: CSS comments begins with “/*”, and ends with “*/”
selector{ property: value;}
where:
selector = HTML element/tag to be defined
property = element’s attribute to be midified
value = new value assigned to the element’s attribute
Method 1: In-line (attribute style)

<html>
<head>
<title>Example</title>
</head>
<body style=”background-color:#FF0000;”>
<p>This is a red page</p>
</body>
</style>
</html>
Method 2: Internal (tag style)

<html>
<head>
<style type=”text/css”>
body{background-color:red;}
</style>
</head>
<body>
</body>
</html>
Method 3: External (link to a style sheet)

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style/main.css”>
</head>
<body>
</body>
</html>
Web Prog & Dev 2
Claudine Narciso
Lesson 1: Color and Backgrounds
Foreground color: the ‘color’ property

h1 {
color:#ff0000;
}
The ‘background-color’ property
body {
background-color:#ffcc66;
}
‘background-images’ [background-images]
body {
background-image:url(“sunset.gif”);
}
Repeat ‘background-images’ [background-repeat]

In the example above, by default the sunset 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
background-repeat:repeat-repeat The image is repeated both horizontally and vertically
background-repeat:no-repeat The image is not repeated
To avoid repetition of background image the code could look like this:
body {
background-repeat:no-repeat;
}
Lock background image [background-attachment]

The property background-attachment specifies whether a background picture is fixed or scrolls along with the
containing element.
Value Description
background-attachment:scroll The image scrolls the page – unlocked
background-attachment:fixed The image is locked
body {
background-repeat:no-repeat;
background-attachment:fixed;
}
Place background image [background-position]

Web Prog & Dev 3
Claudine Narciso
By default, the background image will be positioned in the top left corner of the screen. The property
background-position allows you to change this default and position the background image anywhere you like
on screen.
The table below gives some examples.

Value Description
background-position: 2cm 2cm The image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25% The image is centrally positioned and one fourth down the page
background-position: top right The image is positioned in the top-right corner of the page
The code example below positions the background image in the bottom right corner:
body {
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
}
Lesson 2: Fonts
Font family [font-family]
The property font-family is used to set a prioritized list of fonts to be used to display a given element or web
page.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}
Font style [font-style]

The property font-style defines the chosen font either in normal, italic or oblique.
h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}
Web Prog & Dev 4
Claudine Narciso
Font variant [font-variant]
The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font
is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters.
h1 {font-variant: small-caps;}
h2 {font-variant: normal;}
Font weight [font-weight]

The property font-weight describes how bold or "heavy" a font should be presented. A font can either be
normal or bold.
p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}
Font size [font-size]

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}
Lesson 3: Text
Text indention [text-indent]
p{
text-indent: 30px;
}
Text alignment [text-align]

th {
text-align: right;
}
td {
text-align: center;
}
p{
text-align: justify;
}
Text decoration [text-decoration]

The property text-decoration makes it is possible to add different "decorations" or "effects" to text.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
Web Prog & Dev 5
Claudine Narciso
text-decoration: line-through;
}
Letter space [letter-spacing]
The spacing between text characters can be specified using the property letter-spacing. The value of the
property is simply the desired width.
h1 {
letter-spacing: 6px;
}
p{
}
Text transformation [text-transform]

The text-transform property controls the capitalization of a text. You can choose to capitalize,
use uppercase or lowercase regardless of how the original text is looks in the HTML code.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Lesson 4: Links
a:visited {
color: red;
}
This example gives active links a yellow background color:
a:active {
background-color: #FFFF00;
}
Pseudo-class: hover
a:hover {
color: orange;
font-style: italic;
}
Example 1: Effect when the cursor is over a link

a:hover {
font-weight:bold;
color:red;
}
Example 2: UPPERCASE and lowercase

a:hover {
text-transform: uppercase;
Web Prog & Dev 6
Claudine Narciso
font-weight:bold;
color:blue;
background-color:yellow;
}
Example 3: Remove underline of links

a{
text-decoration:none;
}
Lesson 5: Identification and grouping of elements (class and id)
Grouping elements with class
Let's say that we have two lists of links of different grapes used for white wine and red wine. Then we want the
white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to
stay blue.
<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>
<p>Grapes for red wine:</p>

<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
We can hereafter define special properties for links belonging to whitewine and redwine, respectively.
a{
color: blue;
}
a.whitewine {
color: #FFBB00;
}
a.redwine {
color: #800000;
}
Identification of element using id

What is special about the attribute id is that there can not be two elements in the same document with the
same id. Each id has to be unique.
Web Prog & Dev 7
Claudine Narciso
<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
...
<h1 id="c2">Chapter 2</h1>
...
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...
Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS:
#c1-2 {
color: red;
}
Lesson 6: Grouping of elements (span and div)

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.
<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>
The CSS belonging to it:
span.benefit {
color:red;
}
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 block-level elements.
<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
Web Prog & Dev 8
Claudine Narciso
<div id="republicans">
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
And in our style sheet, we can utilize the grouping in the exact same way as above:
#democrats {
background:blue;
}
#republicans {
background:red;
}
Lesson 7: The box model

The CSS box properties are used to define the spacing in and around HTML elements, their borders, and other
position aspects. Border, margin and Padding all have four properties each: top, right, bottom, and left.
<h1>Article 1:</h1>
<p>All human beings are born free
and equal in dignity and rights.
They are endowed with reason and conscience
and should act towards one another in a
spirit of brotherhood</p>
Web Prog & Dev 9
Claudine Narciso
Lesson 8: Margin and padding
Set the margin in an element

An element has four sides: right, left, top and bottom. The marginis the distance from each side to the
neighboring element (or the borders of the document).
The CSS code for this would look as follow:

body {
margin-top: 100px;
margin-right: 40px;
margin-bottom: 10px;
margin-left: 70px;
}
Web Prog & Dev 10
Claudine Narciso
Or you could choose a more elegant compilation:
body {
margin: 100px 40px 10px 70px;
}
Set padding in an element

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.
The usage of padding can be illustrated by looking at a simple example where all headlines have background
colors:
h1 {
background: yellow;
}
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;
}
Lesson 9: Borders
Borders can be used for many things, for example as a decorative element or to underline a separation of two
things.
The width of borders [border-width]

The 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:
Web Prog & Dev 11
Claudine Narciso
Types of borders [border-style]
h1 {
border-width: thick;
border-style: dotted;
border-color: gold;
}
h2 {
border-width: 20px;
border-style: outset;
border-color: red;
}
It is also possible to state special properties for top-, bottom-, right- or left borders. The following example
shows you how:
h1 {
border-top-width: thick;
border-top-style: solid;
border-top-color: red;
border-bottom-width: thick;
border-bottom-style: solid;
border-bottom-color: blue;
border-right-width: thick;
border-right-style: solid;
border-right-color: green;
Web Prog & Dev 12
Claudine Narciso
border-left-width: thick;
border-left-style: solid;
border-left-color: orange;
}
Lesson 10: floating Elements (floats)

If we for example would like to have a text wrapping around a picture, the result would be like this:
The HTML code for the example above, look as follows:
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<p>causas naturales et antecedentes,

idciro etiam nostrarum voluntatum...</p>
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:
#picture {
float:left;
width: 100px;
}
Another example: columns
Floats can also be used for columns in a document. To create the columns, you simply have to structure the
desired columns in the HTML-code with <div> as follows:
<div id="column1">
<p>Haec disserens qua de re agatur
et in quo causa consistat non videt...</p>
</div>
<div id="column2">
<p>causas naturales et antecedentes,
Web Prog & Dev 13
Claudine Narciso
</div>
<div id="column3">
<p>nam nihil esset in nostra
potestate si res ita se haberet...</p>
</div>
Now the desired width of the columns is set to e.g. 33%, and then you simply float each column to the left by
defining the property float:
#column1 {
float:left;
width: 33%;
}
#column2 {
float:left;
width: 33%;
}
#column3 {
float:left;
width: 33%;
}
float can be set as either left, right or none
The property clear

The clear property is used to control how the subsequent elements of floated elements in a document shall
behave.
<div id="picture">
<img src="bill.jpg" alt="Bill Gates">
</div>
<h1>Bill Gates</h1>
<p class="floatstop">causas naturales et antecedentes,

To avoid the text from floating up next to the picture, we can add the following to our CSS:
#picture {
float:left;
width: 100px;
}
.floatstop {
clear:both;
}
Web Prog & Dev 14
Claudine Narciso
Lesson 11: Positioning of elements
With CSS positioning, you can place an element exactly where you want it on your page.
The principle behind CSS positioning

Static positioning is the default position of HTML elements. Imagine a browser window as a system of
coordinates: The principle behind CSS positioning is that you can position any box anywhere in the system of
coordinates.
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:
As you can see, positioning with CSS is a very precise technique to place elements. It is much easier than
trying to use tables, transparent images or anything else.
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.
As an example of absolute positioning, we choose to place 4 boxes in each corner of the document:
Web Prog & Dev 15
Claudine Narciso
#box1 {
position:absolute;
top: 50px;
left: 50px;
}
#box2 {
position:absolute;
top: 50px;
right: 50px;
}
#box3 {
position:absolute;
bottom: 50px;
right: 50px;
}
#box4 {
position:absolute;
bottom: 50px;
left: 50px;
}
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. This way, the element
still obtains a space in the document after it is positioned.
As an example of relative positioning, we can try to position three pictures relatively to their original position on
the page. Notice how the pictures leave empty spaces at their original positions in the document:
#dog1 {
position:relative;
left: 350px;
bottom: 150px;
}
#dog2 {
position:relative;
left: 150px;
bottom: 500px;
}
#dog3 {
position:relative;
left: 50px;
bottom: 700px;
Web Prog & Dev 16
Claudine Narciso
}
Lesson 12: Layer on layer with z-index (Layers)
For that purpose, you can assign each element a number (z-index). The system is that an element with a
higher number overlaps an element with a lower number.
Let us say we are playing poker and have a royal flush. Our hand can be presented in a way where each card
has got a z-index:
In this case, the numbers follow on another (1-5) but the same result can be obtained by using 5 different
numbers. The important thing is the chronological sequence of the numbers (the order).
The code in the card example could look like this:
#ten_of_diamonds {
position: absolute;
left: 100px;
top: 100px;
z-index: 1;
}
#jack_of_diamonds {
position: absolute;
left: 115px;
top: 115px;
z-index: 2;
}
#queen_of_diamonds {
position: absolute;
left: 130px;
top: 130px;
z-index: 3;
}
#king_of_diamonds {
position: absolute;
left: 145px;
top: 145px;
z-index: 4;
}
Web Prog & Dev 17
Claudine Narciso
#ace_of_diamonds {
position: absolute;
left: 160px;
top: 160px;
z-index: 5;
}

L2 - CSS PDF

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

L2 - CSS PDF

Uploaded by

Copyright:

Available Formats

Web Prog & Dev 1

CSS (Cascading Style Sheet)

selector{ property: value;}

Method 1: In-line (attribute style)

Method 2: Internal (tag style)

Method 3: External (link to a style sheet)

Lesson 1: Color and Backgrounds

Foreground color: the ‘color’ property

Repeat ‘background-images’ [background-repeat]

Lock background image [background-attachment]

Place background image [background-position]

The table below gives some examples.

Font style [font-style]

Font weight [font-weight]

Font size [font-size]

Text alignment [text-align]

Text decoration [text-decoration]

Text transformation [text-transform]

Example 1: Effect when the cursor is over a link

Example 2: UPPERCASE and lowercase

Example 3: Remove underline of links

Lesson 5: Identification and grouping of elements (class and id)

Grouping elements with class

<p>Grapes for red wine:</p>

Identification of element using id

Lesson 6: Grouping of elements (span and div)

The CSS belonging to it:

Grouping with <div>

Lesson 7: The box model

Lesson 8: Margin and padding

Set the margin in an element

The CSS code for this would look as follow:

Set padding in an element

The width of borders [border-width]

Lesson 10: floating Elements (floats)

The HTML code for the example above, look as follows:

<p>causas naturales et antecedentes,

The property clear

<p class="floatstop">causas naturales et antecedentes,

The principle behind CSS positioning

The result will be as follows:

You might also like