CSS Cascading Style Sheets

Introduction
What is CSS?

• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at once
• External style sheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations
in display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it
started a nightmare for web developers. Development of large websites, where fonts and
color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing
just one file!
 CSS Syntax

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by
curly braces.

Example

In this example all <p> elements will be center-aligned, with a red text color:

p {
color: red;
text-align: center;
}

CSS Comments

Comments are used to explain the code, and may help when you edit the source code at a
later date.

Comments are ignored by browsers.

Example

A CSS comment starts with /* and ends with */. Comments can also span multiple lines:

p {
color: red;
/* This is a single-line comment */
text-align: center;
}

/* This is
a multi-line
comment */

CSS Selectors

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

We can divide CSS selectors into five categories:

• Simple selectors (select elements based on name, id, class)

• Combinator selectors (select elements based on a specific relationship between
them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute value)

The CSS element Selector

The element selector selects HTML elements based on the element name.

Example

Here, all <p> elements on the page will be center-aligned, with a red text color:

p {
text-align: center;
color: red;
}

The CSS id Selector

The id selector uses the id attribute of an HTML element to select a specific element.

The id of an element is unique within a page, so the id selector is used to select one unique
element!

To select an element with a specific id, write a hash (#) character, followed by the id of the
element.

Example

The CSS rule below will be applied to the HTML element with id="para1":

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot start with a number!

The CSS class Selector

The class selector selects HTML elements with a specific class attribute.

To select elements with a specific class, write a period (.) character, followed by the class
name.

Example

In this example all HTML elements with class="center" will be red and center-aligned:

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

Example

In this example only <p> elements with class="center" will be center-aligned:

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.

Example

In this example the <p> element will be styled according to class="center" and to
class="large":

<p class="center large">This paragraph refers to two classes.</p>

Note: A class name cannot start with a number!

The CSS Universal Selector

The universal selector (*) selects all HTML elements on the page.

Example

The CSS rule below will affect every HTML element on the page:

* {
text-align: center;
color: blue;
}
The CSS Grouping Selector

The grouping selector selects all the HTML elements with the same style definitions.

Look at the following CSS code (the h1, h2, and p elements have the same style
definitions):

h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p {
text-align: center;
color: red;
}

It will be better to group the selectors, to minimize the code.

To group selectors, separate each selector with a comma.

Example

In this example we have grouped the selectors from the code above:

h1, h2, p {
text-align: center;
color: red;
}

All CSS Simple Selectors

Selector Example Example description

.class .intro Selects all elements with class="intro"

#id #firstname Selects the element with id="firstname"

 * * Selects all elements

element p Selects all <p> elements

element,element,.. div, p Selects all <div> elements and all <p>

elements

How To Add CSS

When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

• External CSS
• Internal CSS
• Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just
one file!

Each HTML page must include a reference to the external style sheet file inside the <link>
element, inside the head section.

Example

External styles are defined within the <link> element, inside the <head> section of an
HTML page:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="archer.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css
extension.

The external .css file should not contain any HTML tags.

Here is how the "mystyle.css" file looks like:

"mystyle.css"
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

Note: Do not add a space between the property value and the unit (such as margin-left:
20 px;). The correct way is: margin-left: 20px;

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element, inside the head section.

Example

Internal styles are defined within the <style> element, inside the <head> section of an
HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Inline CSS

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly.

Multiple Style Sheets

If some properties have been defined for the same selector (element) in different style
sheets, the value from the last read style sheet will be used.

Assume that an external style sheet has the following style for the <h1> element:

h1 {
color: navy;
}

Then, assume that an internal style sheet also has the following style for the <h1>
element:

h1 {
color: orange;
}
Example

If the internal style is defined after the link to the external style sheet, the <h1> elements
will be "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>

Example

However, if the internal style is defined before the link to the external style sheet, the
<h1> elements will be "navy":

<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules,
where number one has the highest priority:

1. Inline style (inside an HTML element)

2. External and internal style sheets (in the head section)
3. Browser default

So, an inline style has the highest priority, and will override external and internal styles and
browser defaults.

CSS Colors

Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

CSS Color Names

In CSS, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue

Violet

CSS Background Color

You can set the background color for HTML elements:

Hello World

Color gives life and excitement to a web site. You can add color to fonts to highlight,
emphasize and focus them as you please.
The website background color will give character and tone to the site’s message or theme.

Example

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

CSS Text Color

You can set the color of text:

Hello World

The website background color will give character and tone to the site’s message or theme.

For example, if you love nature your choice background color would be green, if you love
water and the sea you would probably have more blues and if you are in love, red would be
your natural color.

Example

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

CSS Border Color

You can set the color of borders:

Hello World

Hello World

Hello World

Example

<h1 style="border:2px solid Tomato;">Hello World</h1>

<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

CSS Color Values

In CSS, colors can also be specified using RGB values, HEX values, HSL values, RGBA
values, and HSLA values:

Same as color name "Tomato":

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

Same as color name "Tomato", but 50% transparent100%, 64%, 0.5)

Example

<h1 style="background-color:rgb(255, 99, 71);">...</h1>

<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

CSS RGB Value

In CSS, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)

Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255)
and the others are set to 0.

To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

To display the color white, all color parameters must be set to 255, like this: rgb(255, 255,
255).

Experiment by mixing the RGB values below:

rgb(255, 99, 71)

RED
255

GREEN

99

BLUE

71

Example

rgb(255, 0, 0)

rgb(0, 0, 255)

rgb(60, 179, 113)

rgb(238, 130, 238)

rgb(255, 165, 0)

rgb(106, 90, 205)

Shades of gray are often defined using equal values for all the 3 light sources:
Example

rgb(0, 0, 0)

rgb(60, 60, 60)

rgb(120, 120, 120)

rgb(180, 180, 180)

rgb(240, 240, 240)

rgb(255, 255, 255)

CSS HEX Value

In CSS, a color can be specified using a hexadecimal value in the form:

#rrggbb

Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same
as decimal 0-255).

For example, #ff0000 is displayed as red, because red is set to its highest value (ff) and the
others are set to the lowest value (00).

Experiment by mixing the HEX values below:

#ff6347

RED

ff

GREEN

63

BLUE

47

Example

#ff0000

#0000ff

#3cb371

#ee82ee

#ffa500
#6a5acd

Shades of gray are often defined using equal values for all the 3 light sources:

Example

#000000

#3c3c3c

#787878

#b4b4b4

#f0f0f0

#ffffff

Inline CSS

An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.

Example

Inline styles are defined within the "style" attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>

</body>
</html>

CSS Backgrounds

The CSS background properties are used to define the background

effects for elements.

CSS background properties:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

<body style=”background-color:color”>
<body style=” background-color:color; background-image:url(image)”>
<body style=” background-color:color; background-image:url(image); background-repeat: repeat-x; “>
<body style=” background-color:color; background-image:url(image); background-repeat: repeat-x;
background-attachment:fixed”>
<body style=” background-color:color; background-image:url(image); background-repeat: repeat-x;
background-attachment:fixed; background-position: right top”>

CSS background-color

The background-color property specifies the background color of an element.

Example

The background color of a page is set like this:

body {
background-color: lightblue;
}

With CSS, a color is most often specified by:

• a valid color name - like "red"

• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"

Look at CSS Color Values for a complete list of possible color values.

Example

Here, the <h1>, <p>, and <div> elements will have different background colors:

h1 {
background-color: green;
}

div {
background-color: lightblue;
}

p {
background-color: yellow;
}

CSS background-image

The background-image property specifies an image to use as the background of an element.

By default, the image is repeated so it covers the entire element.

Example

The background image for a page can be set like this:

body {
background-image: url("paper.gif");
}
Example

This example shows a bad combination of text and background image. The text is hardly
readable:
body {
background-image: url("bgdesert.jpg");
}
Note: When using a background image, use an image that does not disturb the text.

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

Some images should be repeated only horizontally or vertically, or they will look strange,
like this:

Example
body {
background-image: url("gradient_bg.png");
}

If the image above is repeated only horizontally (background-repeat: repeat-x;), the

background will look better:

Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Tip: To repeat an image vertically, set background-repeat: repeat-y;

CSS background-repeat: no-repeat

Showing the background image only once is also specified by the background-
repeat property:

Example

Show the background image only once:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}

In the example above, the background image is placed in the same place as the text. We
want to change the position of the image, so that it does not disturb the text too much.
 CSS background-position

The background-position property is used to specify the position of the background image.

Example

Position the background image in the top-right corner:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

CSS background-attachment

The background-attachment property specifies whether the background image should scroll
or be fixed (will not scroll with the rest of the page):

Example

Specify that the background image should be fixed:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Example

Specify that the background image should scroll with the rest of the page:

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}

CSS background - Shorthand property

To shorten the code, it is also possible to specify all the background properties in one single
property. This is called a shorthand property.

The shorthand property for background is background.

Example

Use the shorthand property to set all the background properties in one declaration:

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

When using the shorthand property the order of the property values is:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position

It does not matter if one of the property values is missing, as long as the other ones are in
this order.

All CSS Background Properties

Property Description

background Sets all the background properties in one declaration

background-attachment Sets whether a background image is fixed or scrolls with the rest of
the page

background-clip Specifies the painting area of the background

background-color Sets the background color of an element

 background-image Sets the background image for an element

background-origin Specifies where the background image(s) is/are positioned

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

background-size Specifies the size of the background image(s)

CSS Borders

CSS Border Properties

The CSS border properties allow you to specify the style, width, and color of an element's
border.

I have borders on all sides.

I have a red bottom border.

I have rounded borders.

I have a blue left border.

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

• dotted - Defines a dotted border

• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color value
• inset - Defines a 3D inset border. The effect depends on the border-color value
• outset - Defines a 3D outset border. The effect depends on the border-color value
• none - Defines no border
• hidden - Defines a hidden border

The border-style property can have from one to four values (for the top border, right
border, bottom border, and the left border).

Example

Demonstration of the different border styles:

p.dotted {border-style: dotted;}

p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}

Result:

A dotted border.

A dashed border.

A solid border.

A double border.

A groove border. The effect depends on the border-color value.

A ridge border. The effect depends on the border-color value.

An inset border. The effect depends on the border-color value.

An outset border. The effect depends on the border-color value.

No border.

A hidden border.

A mixed border.

Note: None of the OTHER CSS border properties described below will have ANY effect
unless the border-style property is set!

CSS Border Width

The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three
pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right
border, bottom border, and the left border).

5px border-width
Example
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: solid;
border-width: 2px 10px 4px 20px;
}

CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:

• name - specify a color name, like "red"

• Hex - specify a hex value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• transparent
The border-color property can have from one to four values (for the top border, right
border, bottom border, and the left border).

If border-color is not set, it inherits the color of the element.

Red border
Example
p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: solid;
border-color: red green blue yellow;
}

CSS Border - Individual Sides

From the examples above you have seen that it is possible to specify a different border for
each side.

In CSS, there are also properties for specifying each of the borders (top, right, bottom, and
left):

Different Border Styles

Example
p {
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}

The example above gives the same result as this:

Example
p {
border-style: dotted solid;
}

So, here is how it works:

If the border-style property has four values:

• border-style: dotted solid double dashed;

o top border is dotted
o right border is solid
o bottom border is double
o left border is dashed

If the border-style property has three values:

• border-style: dotted solid double;

o top border is dotted
o right and left borders are solid
o bottom border is double

If the border-style property has two values:

• border-style: dotted solid;

o top and bottom borders are dotted
o right and left borders are solid

If the border-style property has one value:

• border-style: dotted;
o all four borders are dotted

The border-style property is used in the example above. However, it also works
with border-width and border-color.

CSS Border - Shorthand Property

As you can see from the examples above, there are many properties to consider when
dealing with borders.

To shorten the code, it is also possible to specify all the individual border properties in one
property.

The border property is a shorthand property for the following individual border properties:

• border-width
• border-style (required)
• border-color

Example
p {
border: 5px solid red;
}
Result:

Some text

You can also specify all the individual border properties for just one side:

Left Border
p {
border-left: 6px solid red;
background-color: lightgrey;
}

Result:

Some text

Bottom Border
p {
border-bottom: 6px solid red;
background-color: lightgrey;
}

Result:

Some text

CSS Rounded Borders

The border-radius property is used to add rounded borders to an element:

Normal border

Round border

Rounder border

Roundest border

Example
p {
border: 2px solid red;
border-radius: 5px;
}

Note: The border-radius property is not supported in IE8 and earlier versions.
All CSS Border Properties

Property Description

border Sets all the border properties in one declaration

border-bottom Sets all the bottom border properties in one declaration

border-bottom-color Sets the color of the bottom border

border-bottom-style Sets the style of the bottom border

border-bottom-width Sets the width of the bottom border

border-color Sets the color of the four borders

border-left Sets all the left border properties in one declaration

border-left-color Sets the color of the left border

border-left-style Sets the style of the left border

border-left-width Sets the width of the left border

border-radius Sets all the four border-*-radius properties for rounded
corners

border-right Sets all the right border properties in one declaration

border-right-color Sets the color of the right border

border-right-style Sets the style of the right border

border-right-width Sets the width of the right border

border-style Sets the style of the four borders

border-top Sets all the top border properties in one declaration

border-top-color Sets the color of the top border

border-top-style Sets the style of the top border

border-top-width Sets the width of the top border

border-width Sets the width of the four borders