CSS Selectors

CSS Selectors


Select elements to apply a declared style.

Selector types:

  • Element Selectors: selects all elements of a specific type (<body>, <h1>, <p>, etc.)
  • Class Selectors: selects all elements that belong to a given class.
  • ID Selectors: selects a single element that’s been given a unique id.
  • Pseudo Selectors: combines a selector with a user activated state(:hover, :link, :visited)
Element Selectors

Finds all HTML elements that have the specified element type.

Example:

h1{
color: blue;
}

Finds all elements of type <h1> and makes the text color blue.

Class Selectors

Finds all elements of a given class –based on the attribute’s class value.

Syntax: 

.classname(Remember the dot means class selector)

Example:

.legs{
font-weight: bold;
background: pink;
}

Finds all elements whose class = “legs” and makes their font bold and their backgrounds pink.

ID Selectors

Finds a single element that’s been given a unique id–based on the attribute’s id value.

Syntax:

#idname(Remember the pound-sign means id selector)

Example:

#snout{
border: solid red;
}

Finds a single element whose id = “snout” and gives it a solid red border.


Pseudo-Selectors

  • Apply styles to a user activated state of an element.
  • If used, must be declared in a specific order in the style sheet.
  • General Purpose Pseudo-Selector:
  • hover Element with mouse over
  • Specific to hyperlinks (and/or buttons)
  • a:active A link or button that is currently being clicked on.
  • a:link A link that has NOT been visited yet.
  • a:visited A link that HAS been visited.


Grouping Selectors

Lets say you want to apply the same style to several different selectors.
Don’t repeat the style –use a comma!!

Syntax:

sel1, sel2, sel3 (Remember the comma to group several different selectors)

Example:

h1, .legs, #snout{
font-size: 20pt;
}

Finds all elements of type <h1>, all elements with class=“legs” and the single element whose id = “snout” then makes their font-size 20pt



Programs

Write a HTML code using CSS to create a job application form having following details

View Solution


CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad Sarkari Exam Quiz