Curriculum

CSS

CSS HOME

0/1

CSS INTRODUCTION

0/1

CSS Syntax

0/1

CSS Selectors

0/1

CSS Selectors

10 minutes

CSS How To

0/1

CSS Comments

0/1

CSS Colors

0/4

CSS Backgrounds

0/5

CSS Borders

0/6

CSS Margins

0/2

CSS Padding

0/1

CSS Height/Width

0/1

CSS Box Model

0/1

CSS Outline

0/5

CSS Text

0/6

CSS Fonts

0/8

CSS Icons

0/1

CSS Links

0/1

CSS Lists

0/1

CSS Tables

0/5

CSS Display

0/1

CSS Max-width

0/1

CSS Position

0/1

CSS Z-index

0/1

CSS Overflow

0/1

CSS Float

0/3

CSS inline-block

0/1

CSS Align

0/1

CSS Combinators

0/1

CSS Pseudo-classes

0/1

CSS Pseudo-elements

0/1

CSS Opacity

0/1

CSS Navigation Bar

0/3

CSS Dropdowns

0/1

CSS Image Gallery

0/1

CSS Image Sprites

0/1

CSS Attr Selectors

0/1

CSS Forms

0/1

CSS Counters

0/1

CSS Website Layout

0/1

CSS Units

0/1

CSS Specificity

0/1

CSS !important

0/1

CSS Math Functions

0/1

Text lesson

CSS Selectors

CSS selectors are employed to “locate” or designate the HTML elements targeted for styling.

CSS selectors can be classified into five groups:

Simple selectors (which identify elements based on their name, ID, or class)
Combinator selectors (which target elements based on specific relationships between them)
Pseudo-class selectors (which select elements based on particular states)
Pseudo-element selectors (which pinpoint and style specific parts of an element)
Attribute selectors (which choose elements based on their attribute or attribute value)

CSS element Selector

The element selector chooses HTML elements according to their element name.

Example

In this context, every element throughout the page will exhibit center alignment and possess a red text color.

#para1 {
text-align: center;
color: red;
}

The CSS id Selector

The id selector targets a specific HTML element using its id attribute.

Since an element’s id is unique within a page, the id selector is ideal for selecting a single, unique element.

To select an element with a specific id, precede the id with a hash (#) character.

Example

The following CSS rule will be applied to the HTML element with the id=”para1″:

#para1 {
text-align: center;
color: red;
}

Note: An id name cannot begin with a number!

CSS class Selector

The class selector targets HTML elements that possess a particular class attribute.

To select elements with a specific class, prepend the class name with a period (.) character.

Example

In this example, all HTML elements with the class=”center” will be styled to appear in red and aligned to the center.

.center {
text-align: center;
color: red

You can also indicate that only particular HTML elements should be influenced by a class.

Example

In this instance, solely elements having the class= “center” will display as red and centered-aligned.

p.center {
text-align: center;
color: red;
}

HTML elements can also be associated with multiple classes.

Example

In this instance, the element will be styled based on both class=”center” and class=”large”.

This paragraph refers to two classes.

Please be aware: Class names cannot commence with a number!

The CSS Universal Selector

The universal selector (*) targets all HTML elements present on the page.

Example

The following CSS rule will impact every HTML element on the page:

* {
text-align: center;
color: blue;
}

CSS Grouping Selector

The grouping selector selects all HTML elements sharing the same style definitions.

Consider the following CSS code (where the h1, h2, and p elements have identical style definitions):

h1 {
  text-align: center;
  color: red;
}

h2 {
text-align: center;
color: red;
}

p {
  text-align: center;
  color: red;
}

It would be more efficient to consolidate the selectors to minimize the code.

To group selectors, simply separate each selector with a comma.

Example

In this instance, we’ve organized the selectors from the preceding code into groups.

h1, h2, p {
text-align: center;
color: red;
}

All CSS Simple Selectors

Selector	Example	Example description
#id	#firstname	Select the element that has the id “firstname”
.class	.intro	Selects all elements that have the class “intro”
Element.class	p.intro	Select only ‘<p>’ element that have the class “intro”
*	*	Selects every element
Element	p	Select every ‘<p>’ element
Element,element,..	Div,p	Selects all <div>elements and all <p>elements