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



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

Programs

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