Breaking News

The CSS Selectors.

The CSS Selectors.

CSS selectors allow us to select and use HTML element(s). The CSS selectors are used to “find” (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.

CSS Selectors

The selector points to the HTML element you want to style. The declaration block comprises one or more declarations. Which are separated by the semicolons? Each of the declarations includes a property name and a value, separated by a colon.

Before going further in detail of CSS selectors now time to understand CSS Syntax.

Mostly the hardest part of learning any new scripting or markup language that is mastering is the syntax.

In the case of CSS, however, the syntax is remarkably simple, CSS is style sheet language. Which is used to describe the presentation of structured documents, like HTML, XML, SVG and other markup languages?

This presentation is defined by using rules that target a specific element within a document.  The collections of those rules consider style sheets.

Let’s take a look at simple formatting rule.

CSS style made up of two parts.

  1. Selector.
  2. Declaration.

So, based on this selector. Remember, selectors, allow us to tell the browser which elements on the page we want to style.

A CSS rule set consists of a selector and a declaration block:

 css selectors syntax

White Space.

White space does not matter.

The browser would view these two rules exactly the same.

P {color: blue;




P {color: blue; font-size:12px; }

Both the CSS rules see in the above example give you exact same formatting.

In some cases, it does matter within the selector, it often results in determining which element is targeted. So, you need to be familiar with when white space is important and when is not.

White space Does matter here.

div #content{ color: red; font-size:16px;}

div#content{ color: red; font-size:16px;}

CSS Comments.

Comments are useful for organizing styles, annotating code, or communicating with team members.

Remembering why certain selectors are used.

CSS allows only a single type of comments.

/* Define selector */

P {color: blue; font-size:12px; }

Comments can be used for single lines or multiple lines and you can put it everywhere in the CSS. The practices are limit them.

/* Page layout Styles

These styles control sectional layout.


Before-after rule /* Define selector */

or directly after individual properties.

/* Page layout Styles

These styles control sectional layout.


Spread the love

About imran

My Name Mohammad Ramzan Bhutto. Live in District Jacobabad, Sindh, Pakistan. I have started blogging on Information Technology, my selected areas are Online Business, Digital Marketing, Make Money Online.

Check Also

External Style Sheet

How to Use External Style Sheet. 

How to Use External Style Sheet. An external style sheet is simply texting files with …