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

CSS Syntax

    selector {
      propertyNameOne:value;
	  propertyNameTwo:value;
    }
 

CSS Selector Type

• Element Selector
• Id Selector
• Class Selector
• Grouping Selectors
• Descendant Selector
• Child Selector
• Adjacent Sibling Selector
• General Sibling Selector
• * Selector
• Attribute Selectors

Element Selector Example

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

Id Selector Example

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

Class Selector Example

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

Grouping Selectors Example

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

Descendant Selector Example

The following example selects all p elements inside div elements:

div p {
    background-color: yellow;
}

Child Selector Example

The following example selects all p elements that are immediate children of a div element

div > p {
    background-color: yellow;
}

Adjacent Sibling Selector Example

The following example selects all p elements that are placed immediately after div elements:

div + p {
    background-color: yellow;
}

General Sibling Selector Example

The following example selects all p elements that are siblings of div elements

div ~ p {
    background-color: yellow;
}

* Selector Example

Select all elements, and set their background color to yellow:

* {
    background-color: yellow;
}

Attribute Selectors Example

It is possible to style HTML elements that have specific attributes or attribute value

input[type="text"] {
    width: 150px;
    display: block;
    margin-bottom: 10px;
    background-color: yellow;
}

input[type="button"] {
    width: 120px;
    margin-left: 35px;
    display: block;
}

What are Pseudo-classes?

A pseudo-class is used to define a special state of an element.

Style an element when a user mouses over it

Style visited and unvisited links differently

Style an element when it gets focus

Pseudo-classes Example

a:link {
    color: #FF0000;
}

/* visited link */
a:visited {
    color: #00FF00;
}

/* mouse over link */
a:hover {
    color: #FF00FF;
}

/* selected link */
a:active {
    color: #0000F

What are Pseudo-Elements?

A CSS pseudo-element is used to style specified parts of an element.

Style the first letter, or line, of an element

Insert content before, or after, the content of an element

Pseudo-Elements Example

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

Css Comment

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