Introduction of CSS and CSS Selector

let's learn about CSS selector

What is CSS

Cascading Style Sheets (CSS) is a stylesheet language used to style and layout web pages. With CSS, you can control the color, font, the size of text, the spacing between elements, how elements are positioned and laid out, what background images or background colors are to be used, different displays for different devices and screen sizes, and much more!

css.jpg

Structure of css : -

img_selector.gif

Example:-

How to add CSS in web page

There are three ways to add CSS in web page.

  • Internal
  • Inline
  • External

Internal css

Internal css are defined within the < style > element, inside the < head > section of an HTML page.

Example :-

Inline css

Inline css are defined within the "style" attribute of the relevant element.

Example : -

External CSS

External css are defined within the < link > tag , inside the < head > section of an HTML page.

For external style sheet you can write it in any text editor and saved it with .css extension

<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

rel :- It is relationship between external file and current file. For exapmle rel="stylesheet"

type :- It is type of document which you are linking to the HTML page. For example type="text/css".

href :- It is use to specify the location of CSS file. For example href="style.css"

Example:-

Selectors in CSS

First step in CSS is targeting the HTML elements and this targeting feature you can achieve with selector.

CSS selectors are used to "find" (or select) the HTML elements you want to style.

Types of selector

Universal selector(*)

It can be used to select any and all types of elements in an HTML page. The universal selector becomes helpful when you want to put a specific style in all the HTML elements within your web page.

Syntax: -

* {
     property : value;
  }

Example :-

* {
     margin : 0px;
     padding : 0px;
  }

The universal ( * ) selector can also select all elements inside another element.

Syntax : -

parent * {
           property : value;
 }

Example :-

Individual selector(Element selector)

The individual or element selector selects the HTML element by name.

Syntax: -

html_tag {
     property : value;
  }

Example :-

class( . ) and id( # )selector

class selector select the class attribute of HTML element. it is written by the dot(.) character followed by class name of element.

structure :-

. class_name {
     property : value;
  }

Id selector select the id attribute of HTML element. it is written by the hash(#) character followed by id of element.

Note:- id of HTML element is always unique within the page.

structure :-

# id {
     property : value;
  }

Example of class and id selector:-

Grouping(combined) selector

It select the multiple selector at the same time. for this you have to separate the selector's names with a comma(,)

syntax :-

selector1,selector2, selector3{
 property : value;
}

Example : -

Inside element or descendant selector (space)

This selector is implemented to select every child element within the particular tag mentioned in the CSS selector section. The tags may be of the direct child of any specific tag or extremely deep within the particular tag.

syntax :-

selector1 selector2 selector3{
 property : value;
}

Example :-

In above example all paragraph are selected except last one, because last paragraph is not the part of div tag.

Direct child(>) selector

It is implemented for selecting that particular element that lies within the immediate child of that specific tag or direct child of that tag.

syntax :-

selector > selector{ 
property : value;
}

Example :-

In above example only two paragraph are selected, because those two paragraph are direct child of < div > tag. Others element(article, list) are not direct child of that div. That's why the are not selected.

Sibling selector ( + , ~)

1. Adjacent Sibling Selector (+)

The adjacent sibling selector is used to select an element that is directly after another specific element.

Syntax :-

selector + selector{ 
property : value;
}

example :-

In above example only last paragraph is selected , because after the < div > tag there is only one < P > tag.

2. General Sibling Selector (~)

The general sibling selector selects all elements that are next siblings of a specified element.

Syntax :-

selector  ~ selector{ 
property : value;
}

Example :-

In above example last two paragraph are selected , because that two paragraph are sibling of < div > tag

Pseudo class selector

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

  • When a user moves the mouse over a specific HTML element, then apply the style to that particular element.
  • To apply a different style for user-visited and user-unvisited HTML anchors.

A pseudo-class selector consists of a colon (:) followed by the pseudo-class name.

Syntax :-

selector : pseudo-class {
  property: value;
}

Popular pseudo classes

- : hover

- : focus

- : visited

:hover

It is use to implement particular effect to any HTML element when you move the mouse pointer over it.

Syntax :-


selector : hover {
  property: value;
}

Example :-

:focus

It is implemented for selecting an element that is currently focused on by its user.

Syntax :-


selector : focus{
  property: value;
}

Example : -

In above example when mouse focus inside input box then its color get changed.

:visited

It selects the visited links and adds special styles to them.

Syntax :-


selector :visited{
  property: value;
}

Example :-

Pseudo Element selector

A pseudo-element selector is used to style specified parts of an element. Pseudo-element selector consists of double colon (::) followed by the pseudo-element name.

Syntax :-

selector : pseudo-element{
  property: value;
}

Popular pseudo element selector

  • ::before

  • ::after

content property is mandatory property for pseudo element selector

::before

The before pseudo-element can be used to insert some content before the content of an element.

Syntax :-

selector ::before{
content: "  ";
 Other property ;
}

Example :-

::after

The after pseudo-element can be used to insert some content after the content of an element.

Syntax :-

selector ::after{
content: "  ";
Other property ;
}

Example : -

nth-child selector

The nth-child selector allows you to select one or more elements based on their source order, according to a formula.

Syntax :-

:nth-child(n) {  
    //CSS Property  
}

The n can either be a keyword, formula, or a number.

  • keyword values is odd or even

  • number(1,2,3....)

  • formula(Functional notation) is (an + b),where

         -  a  is  an integer step size.
    
         -  n  is all nonnegative integers, starting from 0.
    
         - b  is is an integer offset.
    

Formula example :-

2n+ 2 represent below elements

2 * 0 + 2 = 2, 
2 * 1 + 2 = 4 and may more

Example of nth child :-

Did you find this article valuable?

Support Krishnanand Roy's blog by becoming a sponsor. Any amount is appreciated!