Header Logo

CODE WITH FAHIM

CSS Syntax

🎨 Basic CSS Syntax:


A CSS rule set consists of two main parts: a selector and a declaration block.




The structure:

selector {
property: value;
property: value;
}



Example:

body{
color: blue;
background- color: red;
}



Here-

body=> Selector
color,background-color=>property
blue,red=>value




📝 Key Components and Terminology:

Components Description Example
Selector Targets the HTML element to be styled. p(for all paragraph)
Declaration A single style instruction (a property and a value). color: blue;
Property The specific feature you want to change. color,margin,padding
Value The setting for the property. blue,15px,30px
Colon Separates the property from its value. font-size: 16px
Semicolon Separates different declarations. color: blue;
font-size: 16px;
Curly braces{} Enclose the declaration block. p{
color: blue;
}



🌟 The Three Types of CSS:

  1. External CSS (The Standard Practice):

    • This is the most professional and common method. It keeps your HTML (content/structure) completely separate from your CSS (presentation/style).


    HTML Syntax:

    <head>
    <link rel="stylesheet" href="styles.css">
    <h1>Welcome to my website</h1>
    </head>


    CSS Syntax:(in a separate file, [styles.css])

    body {
    font-family: Arial, sans-serif;
    }

    h1 {
    color: darkblue;
    }



    Output:

    Welcome to my website



    Pros: Highly reusable, clean code, faster load times after the initial page load (due to browser caching).


    How to link html files with external css:

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

    📝 Key Attributes of the <link> Tag:
    The <link> tag requires three essential attributes to function correctly for CSS:

    Attribute Value Purpose
    rel "stylesheet" Relationship: Tells the browser that the linked document is a stylesheet. This is required for CSS.
    href "styles.css" Hypertext Reference: Specifies the path to the external file.
    type(optional) "text/css" MIME Type: Historically used, but is generally considered optional today as CSS is the default stylesheet type.



  2. Internal CSS (For Single HTML Pages):
    3. The styles are embedded directly in the HTML file using the <style> tag.

    <html>
    <head>
    <style>
    p {
    color: green;
    font-size: 18px;
    }
    </style>
    </head>
    <body>
    <p>The color of the paragraph is green & font-size is 18px</p>
    </body>
    <html>


    Output:

    The color of the paragraph is green & font-size is 18px



    Pros: No extra HTTP request for a separate file, all styles for the page are in one place.
    Cons: Not reusable on other pages.


  3. Inline CSS(For Specific Overrides):

    The style is applied directly to an element using the style HTML attribute.

    HTML Syntax (in index.html):

    <p style="color: red; border: 1px solid black;"> This text is styled inline & red colored. </p>


    Output:

    This text is styled inline & red colored

    Pros: Highest specificity (overrides External and Internal CSS), useful for testing or critical, one-off overrides.
    Cons: Messy HTML, cannot be reused, difficult to manage, and defeats the purpose of separating content and style.






💥 The "Cascading" Order (Specificity):

CSS stands for Cascading Style Sheets. The "cascading" means that when conflicting styles are applied to the same element, a specific order of priority determines which style wins:

1.Inline CSS (Highest Priority)
2.Internal/Embedded CSS
3.External CSS (Lowest Priority)

External CSS is the preferred method because it scales better, but inline CSS will almost always override it for a single element.


Remember:

1.Start with External CSS: While there are three ways to add CSS to HTML, the best practice is to put your styles in a separate file (e.g., styles.css) and link it to your HTML.
br 2.Semicolons are Crucial: Forgetting the semicolon (;) at the end of a declaration is the single most common syntax error.

3.Readability: Keep each declaration on its own line and indent the properties/values within the curly braces for better readability.