About CSS and Selector

By | April 6th 2018 04:45:05 PM | viewed 113 times

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;*/
}
bONEandALL