CSS selectors

by · Published · Updated

What you will learn here about CSS

  • CSS Stylesheet types
  • CSS Selectors

CSS Stylesheet types:
CSS helps to design the content to be displayed on the browser. Using CSS we can style the color of the text, change the size of font, apply background color, change in the appearing of image or text and many more.
There are three ways of applying CSS property to the element in HTML.

1. Inline CSS
In this way styling property is applied to an element within the element itself by using style attribute.
Example:

2. Internal CSS
In this way styling property is defined within the head element between

3. External CSS
In this way of styling all the styling property has to be defined in an external file and file has to be saved with filename.css extension. And a reference is added in the html document to access the properties using Example:

Finding the element for applying the property
There are different ways to find the element within the document to apply the property.

CSS selectors

1. Element Name
We can use the element name itself to define the property for the element.
Here the defined property will be applied to all the elements in the document for which we are defining properties.
Example :

Element Name

2. Universal selector (*)
The property defined with universal selector will be applied to all the elements defined in the document
Example:

Universal selector

3. id selector (#)
The property defined with the id selector will be applied to the elements that contains the id attribute in the elements. id selector is used to select the elements uniquely within the document.
Example:

id selector

4. class selector (.)
The property defined with the class selector will be applied to the elements that contains the class attribute in the elements. class selector is used to select the multiple elements within the document. We can apply property to the multiple elements using class selector.
Example:

class selector

5. Group selector
If we want to apply same property to the multiple elements within the document we use group selector and each element name has to be separated by comma.
Example:

Group selector

6. Combinators
When we have nested elements in html document and we want to apply styling property to only a few or particular elements then we can use Combinators. There are different combinators to identify particular element in the html document.

Let’s consider the following example to understand in better way :

Combinators

You may also like...