❮ Previous Next ❯

CSS Syntax & Types of CSS

  • Understand CSS syntax and the three main types of CSS: inline, internal, and external.

  • What is CSS Syntax ?

    CSS Syntax is the rulebook that tells the browser how to read and apply CSS styles.

    Just like:

    • English needs grammar to make sense

    • CSS needs syntax to apply styles correctly 

    👉 CSS gives styling instructions to HTML elements such as:

    • Colors

    • Fonts

    • Layout

    • Spacing

    Important Rule:

    • Correct syntax → Styles are applied

    • Wrong syntax → Browser ignores the style

    The browser is very strict. Even a small mistake can break styling.

    How CSS Works

    CSS works using rules.
    Each rule tells the browser three things

    Which element to target
    What property to change
    How to change it

    Basic CSS Rule Format:

    Selector {

        Property: Value;

    }

    Think of CSS as giving instructions:

    “Hey browser, find this element and style it like this.”

    CSS Rule Structure 

    Every CSS rule has 3 main parts

    Selector (WHO to style)

    The selector chooses the HTML element you want to style.

Basic CSS Rule to Style

This CSS code sets the text color of all p tag elements on a webpage to red. 

p {
    color: red;
}

  • This selects all <p> elements.

    Property (WHAT to change)

    The property defines what aspect of the element you want to change.

    Common CSS Properties:

    • color → text color

    • font-size → text size

    • background-color → background

    • width / height → size

CSS Rule to Set Paragraph Font Size

This CSS code sets the font size of all p tag elements to 20 pixels, making the text larger on the webpage. 

p {
    font-size: 20px;
}

  • Value (HOW to change)

    The value tells how much or in what way the property should change.

CSS Property Value

In CSS, the value specifies how a property should be applied. In the example above, color is the property and blue is the value, which changes the text color of all p tag elements to blue. 

p {
    color: blue;
}

  • Property → color
    Value → blue

    Property = Question
    Value = Answer

    Important CSS Syntax Rules

    Curly Braces { }

    Curly braces group all properties of a selector.

CSS Rule with Multiple Properties for Heading

This CSS code styles all h1 tag elements by setting the text color to blue and the font size to 30 pixels, making the heading larger and blue in color. 

h1 {
    color: blue;
    font-size: 30px;
}

  • Think of { } as a box of instructions

    Semicolon ;

    Each CSS statement must end with a semicolon.

CSS Rule to Style Paragraph Color and Weight

This CSS code sets the text color of all p tag elements to green and makes the text bold using the font-weight property. 

p {
    color: green;
    font-weight: bold;
}

  • Missing semicolon = browser may stop reading CSS.

    Case Sensitivity

    • CSS properties & selectors → case-insensitive

    • Some values → case-sensitive (URLs, file names)

    Safe practice: always write CSS in lowercase

    Why CSS Syntax is Important ?

Incorrect CSS Syntax

This CSS code is incorrect because it is missing a colon (:) after the property name color and a semicolon (;) at the end. 

p {
    color red
}
  • Browser ignores it.

Correct Syntax

This CSS code correctly uses proper structure and symbols to change the paragraph text color to red. 

p {
    color: red;
}

  • Style works perfectly.

    Browser Rule:

    “If I don’t understand a rule, I skip it.”

    Types of CSS

    CSS can be applied to HTML in three different ways:

      Inline CSS
     Internal CSS
     External CSS

    Each type has a different purpose and priority.

    Inline CSS

    What is Inline CSS ? 

    Inline CSS is written directly inside an HTML tag using the style attribute.

Inline CSS Syntax

Inline CSS is written directly inside an HTML element using the style attribute to apply styles to that specific element only. 

<tag style="property:value;">

Inline CSS Example

This example shows Inline CSS applied directly to a

tag, setting its text color to red and font size to 18px. Only this paragraph will have these styles. 

<p style="color:red; font-size:18px;">
    This is Inline CSS
</p>

  • ✔ Style applies to only this element 

    Advantages:

    Quick styling
    Useful for testing
    Highest priority

    Disadvantages:

    Not reusable
    Messy HTML
    Hard to maintain

    Internal CSS

    What is Internal CSS ?

    Internal CSS is written inside a <style> tag in the <head> section of an HTML file.

Internal CSS Syntax

Internal CSS is written inside a style tag within the head section of an HTML file to style elements on that page only. 

<style>
    selector {
        property: value;
    }
</style>

Internal CSS Example

This example shows Internal CSS, where styles for the p tag are written inside a style tag in the head. The paragraph text appears blue and 20px in size. 

<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>This is Internal CSS</p>
</body>
</html>

  • Styles apply to entire page

    Advantages:

     Cleaner than inline
     Page-level control
     Good for small projects

     Disadvantages:

     Works for only one page
     Not scalable

    External CSS

    What is External CSS ?

    External CSS is written in a separate .css file and linked to HTML.

External CSS

External CSS is written in a separate .css file and linked to an HTML file, allowing styles to be applied across multiple pages for better scalability and organization. 

p {
    color: green;
    font-size: 22px;
}

  • HTML File:

    <link rel="stylesheet" href="style.css">

    Styles apply to multiple pages

    Advantages:

    Reusable
    Clean HTML
    Easy maintenance
    Best for large websites

    Disadvantages:

     Extra file needed
     Slight delay on first load

  • CSS Priority Order 

    When multiple CSS types apply to the same element:

    Inline CSS (Highest Priority)
    Internal CSS
    External CSS (Lowest Priority)

    Comparison Table

    TypeScopeBest Use
    InlineSingle elementQuick fixes
    InternalSingle pageSmall projects
    ExternalMultiple pagesProfessional websites

    CSS syntax must be correct and clean
    Every CSS rule has:

    • Selector

    • Property

    • Value

    { } groups rules
     ;  ends statements
        Three types of CSS exist   

     External CSS is industry standard

❮ Previous Next ❯