Introduction to 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 stylesheets are stored in CSS files.

Use of 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 Syntax and Selectors

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.

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

Example
p{
color: red;

1
 text-align: center;
}

CSS Selectors

CSS selectors are used to "find" (or select) HTML elements based on their element name, id,
class, attribute, and more.

The element Selector

The element selector selects elements based on the element name.

You can select all <p> elements on a page like this (in this case, all <p> elements will be center-
aligned, with a red text color):

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

The id Selector

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

The id of an element should be 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.

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

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

The class Selector

The class selector selects elements with a specific class attribute.

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

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

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

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

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

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

HTML elements can also refer to more than one class.

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

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

Grouping Selectors

If you have elements with the same style definitions, like this:

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

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

3
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.

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

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

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.

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

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

/* This is
a multi-line
comment */

4
Inserting CSS

There are different ways to specify style information for the HTML elements in a web page.
Each method has its own advantages and disadvantages over the other methods. The different
ways in which we can specify the style information are:

i. Inline CSS
ii. Embedded CSS (Document Level CSS)
iii. Imported CSS
iv. External CSS

Inline CSS

In Inline CSS, the style information is specified inline i.e., within the HTML tag. We will use
the style attribute of a HTML tag to specify the style information using Inline CSS. The syntax
for Inline CSS is as shown below:

<tagname style=“property-name:value[;]”>Content</tagname>
CSS

An example for specifying style information Inline CSS is given below:

<p style=”color:red;font-weight:bold”>Content</p>
CSS

The advantage of Inline CSS is, for a single web page with minimal content, it is easy to change
the style information. The disadvantage is, for a website containing multiple web pages, it
becomes difficult to change the style information as we have to parse through each tag and
change the style information. In the above example, the content of all the <p> tags in the web
page are affected by the above style information. The color of the paragraph’s content turns red
and displayed in bold font.

Embedded CSS

Using Embedded CSS, the style information is specified in the head section of the web page. In
this method, the style information is enclosed within the <style> and </style> tags which are
placed in the head section. The syntax for Embedded CSS is as shown below:

<head>
<style type=”text/css”>
selector
{
Property-name 1: Value;
Property-name 2: Value
}
</style>

5
</head>

An example for specifying style information Embedded CSS is given below:

<head>
<style type=”text/css”>
p
{
color : red;
font-weight : bold
}
</style>
</head>
CSS

The advantage of Embedded CSS is, the style information of the HTML elements is separated
and is placed in the head section. This will make it easy to find and change the style information
when needed. The disadvantage is, in a website with multiple web pages, it is still difficult to
change the style information using Embedded CSS as we have to open each web page and
change the style information.

Imported CSS

Imported CSS is similar to External CSS. In Imported CSS, the style information is specified in
another file apart from the web page and linked to the web page using the import statement
which will be placed inside the <style> and </style> tags in the head section. While using the
import statement, we must remember to declare the import statement as the first line inside the
<style> and </style> tags. The syntax for specifying the style information using Imported CSS is
as shown below:

<head>
<style>
@import url(“style.css”);
</style>
</head>

or

<head>
<style>
@import “style.css”;
</style>
</head>
CSS

6
We can specify multiple import statements in the head section. The style sheets (.css files) which
are specified later will have higher preference (priority) over the previous style sheets. An
example for specifying style information using Imported CSS is as shown below:

Style1.css

p
{
color : red;
font-weight : bold
}
CSS

<head>
<style>
@import url(“style1.css”);
</style>
</head>
…

The advantage of Imported CSS is, the style information is specified in another file which makes
it easy to change the style information when needed. It also makes it easy to apply different look
and feels to a single page with less effort. The disadvantage is, the import statement is not
supported in older versions of the browsers.

External CSS

In External CSS, the style information is specified in an external file. This file is linked with the
web page using a <link> tag. The syntax for the <link> tag is as shown below:

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

There are three types of external style sheets: persistent, alternate and preferred. The <link> tag
supports an attribute, title which specifies the name for a style sheet. The three types of external
style sheets are declared as shown below:

Persistent style sheet

<link rel=”stylesheet” type=”text/css” href=”style.css”/>

CSS

Alternate style sheet

<link rel=”alternate stylesheet” type=”text/css” href=”style.css” title=”large” />

7
CSS

Preferred style sheet (default style sheet when none is selected)

<link rel=”stylesheet” type=”text/css” href=”style.css” title=”normal” />

CSS

In the above examples, type specifies the MIME type, href specifies the address (URL) of the
style sheet to be linked and rel specifies the relationship of the target document with the current
document.

The advantage of External CSS is, the style information is specified in a separate file which
makes it easier to modify in future. Different look and feels can be provided by simply changing
the value of the href attribute in the <link> tag. The disadvantage is, for web pages with less
content, maintaining style information in separate files tend to be overhead.

Note: A semicolon is optional when there is only one declaration. A semicolon is used to
separate multiple declarations from one another. Also a rule can be written in a single line if
needed as shown below:

p { color:green }

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.

Example

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;
}

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

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

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

Example
<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?

Generally speaking we can say that all the styles 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 (inside a specific HTML element) has the highest priority, which means that it
will override a style defined inside the <head> tag, or in an external style sheet, or a browser
default value.

CSS Colors

Colors in CSS are most often specified by:

 a valid color name - like "red"

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

Color Names

Colors set by using color names:

Example

Color Name

Red

Green

Blue

Orange

Yellow

Cyan

Black

Note: Color names are not case-sensitive: "Red" is the same as "red" or "RED"

RGB (Red, Green, Blue)

10
RGB color values can be specified using this formula: rgb(red, green, blue).

Each parameter (red, green, 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. Experiment by mixing the RGB values below:

Red Green Blue

255 0 0

rgb(255, 0, 0)

Example

Color RGB

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,165,0)

rgb(255,255,0)

11
 rgb(0,255,255)

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

Example

Color RGB

rgb(0,0,0)

rgb(128,128,128)

rgb(255,255,255)

Hexadecimal Colors

RGB values can also be specified using hexadecimal color values 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). Note: HEX values are case-insensitive: "#ff0000" is the
same as "FF0000".

Example

Color HEX

#FF0000

12
 #00FF00

#0000FF

#FFA500

#FFFF00

#00FFFF

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

Example

Color HEX

#000000

#808080

#FFFFFF

13
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

Background Color

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

The background color of a page is set like this:

Example
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)"

In the example below, the <h1>, <p>, and <div> elements have different background colors:

Example
h1 {
background-color: green;
}

div {
background-color: lightblue;
}

14
p{
background-color: yellow;
}

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.

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

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

Below is an example of a bad combination of text and background image. The text is hardly
readable:

Example
body {
background-image: url("bgdesert.jpg");
}

Note: When using a background image, use an image that does not disturb the text.

Background Image - Repeat Horizontally or Vertically

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");
}

15
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;

Background Image - Set position and no-repeat

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

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

In the example above, the background image is shown 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.

The position of the image is specified by the background-position property:

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

Background Image - Fixed position

To specify that the background image should be fixed (will not scroll with the rest of the page),
use the background-attachment property:

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

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
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

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

background-color Sets the background color of an element

background-image Sets the background image for an element

background-position Sets the starting position of a background image

background-repeat Sets how a background image will be repeated

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.

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

18
  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
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.

19
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
theborder-style property is set!

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;
}

Border Color

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

20
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;
}

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;

21
 border-bottom-style: dotted;
border-left-style: solid;
}

The example above gives the same result as this:

Example
p{
border-style: dotted solid;
}

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.

Border - Shorthand Property

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

22
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

Rounded Borders

23
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.

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

24
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

25
 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

Nex

t❯

26