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.


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.


.classname(Remember the dot means class selector)


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.


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


border: solid red;

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


  • 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!!


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


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

Qus. 1 : The body of the style sheet includes?

  1. Style rules
  2. CSS rules
  3. Sheet rules
  4. Format rules
Qus. 2 : What is true about Conflicting Styles?

  1. Conflict occurs as styles can be defined by a user, an author or a user agent (e.g a web browser)
  2. Styles "cascade," or flow together
  3. Ultimate appearance of elements depends on a combination of styles defined in several ways
  4. Styles defined by the user agent take precedence over styles defined by the user
Qus. 3 : What is true about the Box model of CSS ?

  1. It defines a virtual box drawn around elements
  2. Content of each element is surrounded by padding only
  3. Content of each elemernt is surrounded by a border only
  4. Content of each element is surrounded by a margin only


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