Css Syntax | Beginner | Html Css Tutorial

Understanding CSS syntax and rules

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS syntax consists of rules that define how elements on a web page should be styled. This tutorial provides an understanding of CSS syntax and rules.

Key Points:

CSS syntax consists of selectors and declaration blocks.
Selectors are used to target HTML elements.
Declaration blocks contain one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.

Basic CSS Syntax

The basic syntax of CSS consists of selectors and declaration blocks. A selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a property name and a value, separated by a colon.


selector {
    property: value;
    property: value;
}

Here is an example of CSS applied to a paragraph element:


p {
    color: blue;
    font-size: 16px;
}

Selectors

CSS selectors are used to select the HTML elements you want to style. Common types of selectors include:

Element Selector: Selects elements based on the element name.


p {
    color: blue;
}

Class Selector: Selects elements with a specific class attribute. Class selectors start with a period (.).
```
.intro {
    font-size: 18px;
}
                    
```
ID Selector: Selects elements with a specific id attribute. ID selectors start with a hash (#).
```
#header {
    background-color: lightgray;
}
                    
```

Universal Selector: Selects all elements.


* {
    margin: 0;
    padding: 0;
}

Attribute Selector: Selects elements based on an attribute or attribute value.


a[target="_blank"] {
    color: red;
}

Declaration Blocks

A declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. Here is an example:


p {
    color: blue;
    font-size: 16px;
    font-weight: bold;
}

In this example, the paragraph text will be blue, 16 pixels in size, and bold.

Comments in CSS

Comments are used to explain the code and are ignored by browsers. Comments in CSS are enclosed within /* ... */:


/* This is a comment */
p {
    color: blue;
}

Combining Selectors

You can combine multiple selectors to apply the same styles to different elements:


h1, h2, h3 {
    color: navy;
}

In this example, the text of all <h1>, <h2>, and <h3> elements will be navy.

Grouping Declarations

You can group multiple declarations for the same selector to apply multiple styles:


p {
    color: blue;
    font-size: 16px;
    line-height: 1.5;
}

In this example, the paragraph text will be blue, 16 pixels in size, and have a line height of 1.5.

Specificity and Inheritance

CSS rules can be overridden by more specific selectors or later declarations. Specificity is calculated based on the type and number of selectors used:


/* Less specific */
p {
    color: blue;
}

/* More specific */
#special {
    color: red;
}

In this example, an element with the id "special" will have red text, even if it is a paragraph.

Inline, Internal, and External CSS

There are three ways to apply CSS to HTML: inline, internal, and external.

Inline CSS: Uses the style attribute inside an HTML element.


<p style="color: blue;">This is a blue paragraph.</p>

Internal CSS: Uses a <style> element in the HTML <head> section.


<head>
<style>
    p {
        color: blue;
    }
</style>
</head>

External CSS: Uses an external CSS file linked to the HTML document.


<head>
<link rel="stylesheet" href="styles.css">
</head>

External CSS file (styles.css):


p {
    color: blue;
}

Summary

In this tutorial, you learned about CSS syntax and rules. CSS syntax consists of selectors and declaration blocks, with each declaration containing a property name and a value. You explored different types of selectors, combining selectors, grouping declarations, comments in CSS, specificity, and inheritance. Understanding CSS syntax is essential for applying styles to web pages effectively.

HTML CSS - CSS Syntax