Cascading Style Sheets
What is CSS?
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Why use CSS
CSSs provide the means to control and change presentation of HTML documents
CSS is not technically HTML, but can be embedded in HTML documents
Style sheets allow you to impose a standard style on a whole document, or even a whole
collection of documents
Style is specified for a tag by the values of its properties
All browsers support CSS today.
CSS Syntax
A CSS rule has two main parts :a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS Selectors
Three types of CSS Selectors
• Element
• Class
• ID
1
CSS Element Selector Example
A CSS declaration always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p
{
color: red;
text-align : center;
}
CSS Comments
A CSS comment begins with"/*", and ends with"*/", like this:
/*Thisis a comment*/
The id and class Selectors
In addition to setting a style for a HTML element, CSS allows you to specify your own
selectors called "id" and "class".
The id Selector
The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a"#".
Example
<p id=”welcome”>Welcome to the wonderful world of HTML</p>
We can then create a CSS rule with the id selector:
#welcome
{
text-align : center;
color : red;
}
The class Selector
The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
Example
<h2 class=”center”>Summary</h2>
.center{
text-align :center;
}
2
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
External style sheet
Internal style sheet
Inline style
External Style Sheet
o An external style sheet is ideal when the style is applied to many pages.
o With an external style sheet, you can change the look of an entire Website by changing
one file.
o Each page must link to the style sheet using the<link>tag.
o The<link>tag goes inside the head section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
o An external style sheet can be written in any text editor.
o The 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");}
Internal Style Sheet
o An internal style sheet should be used when a single document has a unique style.
o You define internal styles in the head section of an HTML page, by using the <style>tag,
like this:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body{background-image:url("images/back40.gif");}
3
</style>
</head>
Inline Styles
o To use inline styles you use the style attribute in the relevant tag. The style attribute
can contain any CSS property.
o 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>
CSS Background Properties
o CSS background properties are used to define the background effects of an element.
o CSS properties used for background effects:
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
o The background-color property specifies the background color of an element.
o The background color of a page is defined in the body selector:
Example
Body {background-color:#b0c4de;}
With CSS, a color is most often specified by:
a HEX value- like"#ff0000"
an RGB value- like"rgb(255,0,0)"
a colorname-like "red"
Background Image
o The background-image property specifies an image to use as the background of an
element.
o By default, the image is repeated so it covers the entire element.
4
o The background image for a page can be set like this:
Example
body{background-image:url('paper.gif');}
o Background Image-Repeat Horizontally or Vertically
background-repeat:repeat-x;
CSS Border Properties
o The CSS border properties allow you to specify the style and color of an element's
border.
Border Style
o The border-style property specifies what kind of border to display.
o border-style values:
none: Defines no border
dotted:Defines adotted border
dashed:Defines a dashed border
solid: Defines a solid border
double: Defines two borders. The width of the two borders are the same as the border-width
value
Border Width
o The border-width property is used to set the width of the border.
o The width is set in pixels, or by using one of the three pre-defined values :thin,
medium, or thick.
Example
p.one
{
border-style:solid;
border-width:5px;
}
5
p.two
{
border- style:solid;
border-width:medium;
}
Border Color
o The border-color property is used to set the color of the border.
Example
p.one
{
border-style : solid;
border-color:red;
}
CSS Text Properties
Text Color
o The color property is used to set the color of the text.
Example
body {color : blue;}
h1 {color :#00ff00;}
Text Alignment
o The text-align property is used to set the horizontal alignment of a text.
o Text can be centered, or aligned to the left or right, or justified.
Example
h1{text-align:center;}
Text Decoration
o The text-decoration property is used to set or remove decorations from text.
o The text-decoration property is mostly used to remove under lines from links for design
purposes:
6
Example
a {text-decoration:none;}
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
Text Transformation
o The text-transform property is used to specify upper case and lower case letters in a
text.
Example
p.uppercase{text-transform:uppercase;}
p.lowercase{text-transform:lowercase;}
p.capitalize{text-transform: capitalize;}
Text Indentation
The text-indentation property is used to specify the indentation of the first line of a text.
Example
p {text-indent:50px;}
CSS Fonts
Font Family
o The font family of a text is set with the font-family property.
Example
p {
font-family: "Times New Roman", Times, serif;
}
Font Style
o This property has three values:
7
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
Example
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
Font Size
o The font-size property sets the size of the text.
Example
h1 {
font-size: 40px;
}
Font Weight
o The font-weight property specifies the weight of a font:
Example
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
CSS Links
o Links can be styled with any CSS property (e.g. color, font-family, background, etc.).
a {
color: pink;
}
o In addition, links can be styled differently depending on what state they are in.
o The four links states are:
a:link - a normal, unvisited link
8
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Example
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
CSS Lists
o The list-style-type property specifies the type of list item marker.
Example
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
9
}
10
