CSS part-1

Cascading Style Sheets(CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML .

CSS describes how elements should be rendered on screen.

linking css file to html file is by add this line in html head

<link rel="stylesheet" href="style.css">

CSS selectors

defines the elements to which CSS rules apply.

Class selector — Selects all elements that have the given class attribute.

Syntax — .classname

ID selector — Selects an element based on the value of its id attribute.

Syntax — #idname

Universal selector — Selects all element.

Syntax — *

Attribute selector — Selects elements based on the value of the given attribute.

Syntax — [attr] [attr=value] [attr-=value] [attr|=value]

example: [autoplay] will match all elements that have the autoplay attribute set.

CSS combinators for siblings

Adjacent sibling combinator:

The + combinator selects adjacent siblings. This means that the second element directly follows the first and both share the same parent

Syntax: A + B

eg: h2 + p will match all <p> elements that directly follow an <h2>

h2+p{
      font-weight: bold;
    }

General sibling combinator:

The ~ combinator selects siblings. This means that the second element follows the first(through not necessarily immediatly), and both share the same parent.

Syntax: A ~ B

eg: p ~ span will match all <span> elements that follow a <p> immediately or not

h2~p{
      font-weight: bold;
    }

CSS combinators for children

Child combinator:

The > combinator selects nodes that are direct children of the first element.

Syntax: A > B

eg: ul > li will match all <li> elements that are nested directly inside a <ul>

Descendent combinator:

The (space) combinator selects nodes that are descendants of the first element.

Syntax: A B

eg: div span will match all <span> that are inside a <div> element.

Column combinator:

The || combinator selects nodes which belong to a column.

Syntax A || B

eg: col || td will match all <td> elements that belong to the scope of the <col>.

CSS Pseudo Selectors

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

unvisited link

a:link {
    color: #FF0000;
}

visited link

a:visited {
    color: #00FF00;
}

mouse over link

a:hover {
    color: #FF00FF;
}

selected link

a:active {
    color: #0000FF;
}