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

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?

Qus. 2 : What is true about Conflicting Styles?

Conflict occurs as styles can be defined by a user, an author or a user agent (e.g a web browser)
Styles "cascade," or flow together
Ultimate appearance of elements depends on a combination of styles defined in several ways
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 ?

Create a basic webpage showcasing "Responsive Web Design"