Sign in Subscribe
6 min read CSS

CSS Explained | The Syntax

Inspired from explained Netflix web series

In this article, we are going to talk about the CSS syntax in a detailed way to be more familiar with it and cover most of its rules in an easy and straightway.

Basic Syntax

Let’s recap together the basic syntax

<Selector> {   
    <property> : <value>;
}

The selector is the rule that CSS selects a specific HTML element or a group of elements based on it.

The property represents the CSS property of the selected elements that we are going to apply a value for it

The value represents the new value of the CSS property related to the selected elements.

Example 2.1 — Basic Syntax

div {  
    background-color: red;
}

So the result is that all the elements of the type div will have background-color CSS property of value red.

Note 💬
In the same curly braces surrounded block , It’s mandatory to add ; semicolon after each declaration line except the last one it is optional.

@rule Syntax

@rule is another syntax for special stuff like importing an external file or any other uses, we will talk about them in detail later.

Syntax

@<rule_identifier> <rule_value>;

There are many rules in CSS, so Let’s discover them together

Charset Rule

The @charset rule specifies the character encoding used in the style sheet.

Example 2.2 — charset rule Syntax

@charset 'utf-8';
Note 💬
The @charset rule must be the first element in the style sheet.
CSS will apply only the first @charset rule if there are many of them.

Further Information 📚
The character encoding is a process of mapping different characters, alphapets, emojis and so on to a unified binary code that is unique for every character.
for example there are utf-8, 16, 32 that includes more characters respectively.

Font face Rule

The @font-face rule is used to define custom font to be used later in the application. It extends the @charset used rule to be able to encode custom characters that do not exist in the predefined charset.

Example 2.3 — Font face rule Syntax

@font-face {  
    font-family: customFont;  
    src: url(custom_font.woff);
}

so we declare the custom font by font-family property. and load the font from the URL in src property.

Usage:

body {  
    font-family: customFont;
}

Import Rule

The @import rule allows you to import a style sheet into another style sheet.

Syntax

@import url|string list-of-mediaqueries;

Example 2.4 —Import rule Syntax

@import 'another-stylesheet.css' print;

so here we imported another stylesheet into our stylesheet that it will be available only for print media view.

Note 💬
The @import rule must be at the top of the document (but after any @charset rule declaration)

We will discuss in another article about@keyframes rule and @media rule.

Comments Syntax

like any language you can comment in CSS

Syntax

/* comment */

CSS Selectors

CSS selectors are like matchers we used to find an HTML element in order to apply specific styles on it.

Example 2.5 — Simple CSS selector

div { color: red; }

this selector will match any div element on the page and apply the property color with the value red to it.

Example 2.6 — More Specific CSS selector

div.is-empty { 
    color: green; 
}

this selector will match any div element on the page that has a class called is-empty applied to it.

So firstly, let’s explore the main selector types:

Type (Element) Selector

Type selector matches all the HTML elements in the document that have the same type

Example 2.7 — Type CSS selector

div { color: red; }

a { color: green; }

So this will match all div and a elements in the document and apply the included styles on all of them.

Class Selector

Class selector matches all the HTML elements that have a specific class.

Example 2.8— Class CSS selector

.cls { 
    color: green; 
}

and the HTML like the following:

<body>  
    <div class='cls'> I am a DIV </div>  
    <p class='cls'>I am a paragraph </div>
</body>

So the above class selector will match the div and p because all of them have the class cls.

Id Selector

Class selector matches the HTML element that has a specific id.

Example 2.9 — Id CSS selector

#my-id {  
    color: green;
}

and the HTML like the following:

<body>
    <div id='my-id'> I am a DIV </div>
    <p class='cls'>I am a paragraph </div>
</body>

So the above id selector will match the div because its id value matches the selector my_id.

Attribute Selector

The attribute selector matches all the HTML elements that have a specific HTML attribute.

Example 2.10 — Attribute CSS selector

[href='http://www.example.com'] {
    color: green;
}

HTML:

<body>
    <div id='my-id'> I am a DIV </div>
    <a href='https://www.example.com'>I am an anchor </a>
</body>

So the above attribute selector will match the a because it’s href value matches the href attribute selector value https://www.example.com

Attribute Selector Wildcards

we can use wildcards to select attributes like containing wildcard (*) or start with a wildcard (^) and so on.

let’s try them

Example 2.11 — Attribute CSS selector using wildcards

HTML Sample:

<body>
    <input type='radio' />
    <div class='class-name'> I am a DIV </div>  
    <a href='http://www.example.com'>I am an anchor </a>
</body>
  • [type='radio'] will match only the input element because its type attribute value is equal to radio.
  • [class*='lass'] will match the div element because its class attribute value contains lass in class-name class value.
  • [href^='http'] will match the a element because its href attribute value starts with http in http://www.example.com.
  • [href$='com'] will match the a element because the href attribute value ends with com in http://www.example.com.
Further Information 📚
Wildcard is a type of standard pattern matching, the wildcard character is a symbol used to replace or represent one or more characters.

Pseudo Class Selector

Pseudo classes are predefined classes that describe a specific state for the element.

Pseudo-classes Examples

:focus describe the focus state of the input for example
:active describe that the element is active now (user is clicking on it)
:hover describe the mouse enter and leave states for the elements
:checked describe the checked state for checkbox input for example

And so on, So if any element's current state matches the selector state, so the styles inside it will be applied or considered to be applied.

Example 2.12 —Pseudo-classes CSS 

p::after {  
    border: 1px solid blue;
}

selector:focus {
border: 1px solid blue;
}

So the above pseudo-class selector will match any element that has a focus state or gets focused by the user.

Pseudo Element Selector

Pseudo-elements are predefined existed elements attached to any HTML elements and have a special job.

Pseudo-elements Examples

::before represent a pseudo-element that comes directly before the attached HTML element.
::after represent a pseudo-element that comes directly after the attached HTML element.
::first-letter is used to add a special style to the first letter of a text.

Example 2.13 — Pseudo-elements CSS selector

p::after {  
    border: 1px solid blue;
}

So the above pseudo-element selector will match any pseudo-element that is from the after type and attached to any p element in the document.

Combinators

Combinators are the units that connect the selectors to construct a more complex and specific selector and it describes the relationship between the elements

Example 2.14 — Combinators Examples

Let's assume we have the following HTML structure:

<body>  
    <div>    
        <p>paragraph 1</p>          <!-- p1 -->    
        <p>paragraph 2</p>          <!-- p2 -->    
        <h4>      
            <p>paragraph 3</p>      <!-- p3 -->    
        </h4>  
    </div>
</body>

Backspace combinator

div p { 
    color: blue; 
}

backspace combinator div p selects any p element that has ancestors of the type div, so p1, p2 & p3 will have the color blue.

Ancestors Combinator

div > p { 
    color: green; 
}

ancestor combinator div > p selects any p element that has a direct parent of the type div, so only p1 & p2 will have the color green.

Siblings Combinators

h4 ~ p { 
    color: red; 
}

~ sibling combinator div ~ p selects any p element that has a direct or indirect sibling of the type h4. so p1 & p2 will have the color red.

h4 + p { 
    color: orange; 
}

+ sibling combinator div + p selects any p element that has only a direct sibling of the type h4, so only p2 will have the color orange.


Universal Selector

universal selector matches all the HTML elements in the document or inside a parent selector

Example 2.12 — Universal CSS selector

* {  
    color: green;
}

div * {  
    background: red;
}
  • The first selector * will match all the elements in the document.
  • The second selector div * will match all the elements inside any div.

And here we have covered the most important CSS syntax rules that help us understand how to right the styles that satisfy our needs.

Published by:

Ahmed Moawad

You might also like...

Aug
25

CSS Explained | The Layout

7 min read
Aug
24

CSS Explained | The Concepts

5 min read