What is CSS?

CSS stands for Cascading Style Sheets
CSS defines how HTML elements are to be displayed
Styles were added to HTML 4.0 to solve a problem
CSS saves a lot of work
External Style Sheets are stored in CSS files

CSS Example

body {
    background-color: #d0e4fe;
}

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

p {
    font-family: "Times New Roman";
    font-size: 20px;
}

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

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

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 elements will be center-aligned, with a red text color:

Hello World!

This paragraph is styled with CSS.

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

Hello World!

This paragraph is not affected by the style.

The class Selector

The class selector selects elements with a specific class attribute.
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:

Red and center-aligned heading

Red and center-aligned paragraph.

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:

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

/* This is
a multi-line
comment */

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

With an external style sheet, you can change the look of an entire website by changing just one file!
Each page must include a reference to the external style sheet file inside the element. The element goes inside the section:

This is a heading

This is a paragraph.

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.
Here is how the "myStyle.css" looks:

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;

Example

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

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

element:

h1 {
color: navy;
}

then, assume that an internal style sheet also has the following style for the

element:

h1 {
color: orange;
}

If the internal style is defined after the link to the external style sheet, the

elements will be "orange":

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</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:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
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 tag, or in an external style sheet, or a browser default value.

Multiple Styles Will Cascade into One

In this example, the background color is set inline, in an internal stylesheet, and in an external stylesheet.

Try experimenting by removing styles to see how the cascading stylesheets work. (try removing the inline first, then the internal, then the external)

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

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

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

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

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:

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

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.

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 is also properties for specifying each of the borders (top, right, bottom, and left):

Example

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

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

CSS Padding

The CSS padding properties define the white space between the element content and the element border.
The padding clears an area around the content (inside the border) of an element.

	Note: The padding is affected by the background color of the element!

With CSS, you have full control over the padding. There are CSS properties for setting the padding for each side of an element (top, right, bottom, and left).

Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:

padding-top
padding-right
padding-bottom
padding-left

All the padding properties can have the following values:

length - specifies a padding in px, pt, cm, etc.
% - specifies a padding in % of the width of the containing element
inherit - specifies that the padding should be inherited from the parent element

The following example sets different padding for all four sides of a element:

Example

p {
    padding-top: 50px;
    padding-right: 30px;
    padding-bottom: 50px;
    padding-left: 80px;
}

Ravi Tutorials Provide Project Training

CSS

What is CSS?

CSS Example

Why Use CSS?

CSS Syntax and Selectors

The id Selector

The class Selector

Red and center-aligned heading

CSS Comments

Three Ways to Insert CSS

External Style Sheet

This is a heading

Example

Multiple Style Sheets

Example

element:

element:

elements will be "orange":

Cascading Order

Multiple Styles Will Cascade into One

Background Color

Example

Background Image

Example

Background Image - Repeat Horizontally or Vertically

Example

Background Image - Set position and no-repeat

Example

Background Image - Fixed position

Example

Background - Shorthand property

Example

Border Color

Example

Border - Individual Sides

Example

Border - Shorthand Property

Example

CSS Padding

Padding - Individual Sides

Example