CSS Syntax

CSS Syntax

CSS Syntax is a rule-set which consists of two main parts, Selector and Declaration.

Table of Contents

CSS Ruleset

CSS Selector or CSS Selector group with it's Declaration block, together, are called a ruleset, or a CSS rule.

CSS Selector

Like in our daily life, when we want to communicate or talk with someone, we call that person by his/her name. In CSS we use Selector to target HTML Element.

Whenever we want to write some set of styling rules or CSS for a specific type of HTML element we call them using something known as Selector.

As the name suggest, the selector is used to select a particular HTML element.

Types of CSS Selectors

It's not necessary that a selector would always be the name of the particular element. There are 5 main types of Selectors in CSS. Some of them are as follow.

  • Simple Selectors
  • Combinator Selectors
  • Pseudo-class Selectors
  • Pseudo-elements Selectors
  • Attribute Selectors

Simple Selectors

A Simple selector as the name suggest is the most simple type of CSS selector. There are five main types of Simple Selector.

  • Universal Selector
  • Element Selector or Type Selector
  • Id Selector
  • Class Selector
  • Attribute Selector

Combinator Selectors

A Combinator defines the relationship between two or more Selectors. A Combinator is included between more than one simple selector. There are four types of combinators in CSS

  • Descendant Selector (space)
  • Child Selector (>)
  • Adjacent Sibling Selector (+)
  • General Sibling Selector (~)

Pseudo-class Selectors

A Pseudo-Class Selector is used to define the specific state of element. There are 31 types of Pseudo-class Selectors.

  • :active
  • :checked
  • :disabled
  • :empty
  • :enabled
  • :first-child
  • :first-of-type
  • :focus
  • :hover
  • :in-range
  • :invalid
  • :lang(language)
  • :last-child
  • :last-of-type
  • :link
  • :not(selector)
  • :nth-child(n)
  • :nth-last-child(n)
  • :nth-last-of-type(n)
  • :nth-of-type(n)
  • :only-of-type
  • :only-child
  • :optional
  • :out-of-range
  • :read-only
  • :read-write
  • :required
  • :root
  • :target
  • :valid
  • :visited

Pseudo-elements Selectors

A CSS Pseudo-element Selector is used to define style of specified parts of HTML element. There are five types of Pseudo-elements Selectors.

  • ::after
  • ::before
  • ::first-letter
  • ::first-line
  • ::selection

CSS Attribute Selectors

CSS Attribute Selectors are used to style only elements with specific attribute or elements with specific attribute value. There are seven types of CSS Attribute Selectors.

  • [attribute]
  • [attribute=value]
  • [attribute~=value]
  • [attribute|=value]
  • [attribute^=value]
  • [attribute$=value]
  • [attribute*=value]

Grouping CSS Selectors

If we want to apply same style to different types of elements then we can also group them together. So that we won't have to write the same code again and again for different elements. Look at the example below.

p
{
font-weight:bold;
text-align: center;
color: blue;
}
h1
{
font-weight:bold;
text-align: center;
color: blue;
}
h4
{
font-weight:bold;
text-align: center;
color: blue;
}

Now instead of writing same CSS code for different elements, separately, we can group them to minimize our css code.

We will use comma to separate the selectors.

p, h1, h4
{
font-weight:bold;
text-align: center;
color: blue;
}

In the above example, all three elements, p, h1 and h4 will have same styling.

CSS Declaration

A CSS property and it's value combine together is called Declaration. CSS Declarations are written inside the curly brackets. This is also known as Declaration Block.

Two main parts of CSS Declaration are

  • Property
  • Value

More than one declarations are separated by the semicolon. Consider the code below.

h1
{
font-size:20px;
text-align: center;
color: blue;
}

There are three CSS Declarations inside the curly brackets, all separated by the semicolon. Note that the property and value both are separated using colon.

Consider the code below to understand the CSS Syntax.

h1 /* CSS Selector */

{
font-size:20px;
text-align: center;   /* CSS Declaration Block */
color: blue;
}

Why CSS Syntax

The main purpose to use CSS is to apply different CSS rule-sets or styles to different elements of HTML.

Our CSS code won't work if we don't follow proper css syntax. Let's talk about this in detail with some examples. Like other languages, it's important that you follow the CSS Syntax while writing CSS. CSS Syntax is simple unlike many other languages.

Tags