Note : A CSS selector selects the HTML elements you want to style.

As a beginner in styling you can give a class to the specific element to design that element or you can target that element direct. I always recommend, use class. Sometimes we all use html tag to design. It depends.

Definition :

CSS selectors are used to define the elements you want to style with CSS. There are many different types of CSS selectors, each with their own unique syntax. These tell the browser which elements to apply CSS property values to.

Style Declaration :

How to Use Selectors in CSS :

There are two major ways you can use selectors in CSS. If you have your HTML and CSS in one doc, then you simply have to add CSS selectors into the section of your webpage. You’ll see this method in the examples below.

However, you can also keep your HTML and CSS in separate documents. In that case, you might have an HTML document labelled index.html and a CSS file labelled style.css. The index.html file must include a line of code referencing the CSS file so that these styles are rendered on your webpage.

Types of CSS Selectors

Below we’ll cover the four major types of CSS selectors. Each can help you select different groups of elements on a webpage. We’ll start with the type that will help you target the largest groups of elements and then move onto the types that get more precise. That means you can click any of the Source links to see the full code snippet behind the example and try your own.

Universal Selector The asterisk (*) is the universal selector in CSS. By default, it selects all elements in a document.

It can, however, be used in combination with namespaces. @namespace is a useful rule in documents with multiple namespaces, such as HTML5, inline SVG, MathML, and/or XML. You can use a defined namespace to restrict the universal selector to elements only within that namespace.

Universal Selector Syntax

A universal selector can have the following syntax:

• star or | { style properties } - matches all elements
• ns|* { style properties } - matches all elements in the namespace ns
• |* { style properties } - matches all elements without any defined namespace

Universal Selector Example :

HTML Tag Slector Example :

h1 and p are html element.

Class Selector Example :

.newdiv .menulines and .number these are classes.