2

CSS (Cascading Style Sheets) – Notes

1. Introduction

  • CSS stands for Cascading Style Sheets.

  • It is used to style HTML elements (like color, font, layout).

  • Separates content (HTML) from presentation (CSS).

  • Maintains consistency across multiple web pages.

2. Benefits of CSS

  1. Separation of content and style – HTML handles content, CSS handles design.

  2. Reusability – One CSS file can style multiple pages.

  3. Faster page load – Less HTML clutter.

  4. Better design control – Colors, fonts, spacing, positioning.

  5. Cascading & inheritance – Styles can cascade, inherited by child elements.

3. Types of CSS

  1. Inline CSS

     
    <p style="color:red;">Hello World</p>

    • Written inside the HTML tag using style attribute.

    • Used for single element styling.

  2. Internal CSS

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

    • Written in <style> tag inside <head>.

    • Used for single HTML page.

  3. External CSS

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

    • Stored in separate .css file.

    • Can be linked to multiple HTML pages.

    • Best for large websites.

4. CSS Syntax

 
selector {
property: value;
}

  • Selector – HTML element to style (e.g., p, h1, .class, #id)

  • Property – Style property (e.g., color, font-size)

  • Value – Property value (e.g., red, 16px)

Example:

 
h1 {
color: green;
font-size: 24px;
}

5. CSS Selectors

  1. Element Selector – Styles all elements of that type

     
    p { color: red; }

  2. ID Selector – Styles element with specific id (#id)

     
    #header { font-size: 20px; }

  3. Class Selector – Styles elements with class (.class)

     
    .menu { color: blue; }

  4. Group Selector – Apply same style to multiple elements

     
    h1, h2, h3 { color: orange; }

  5. Universal Selector

     
    * { margin: 0; padding: 0; }

  6. Attribute Selector

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

6. CSS Colors

  • Can be written in:

    1. Name: red, blue, green

    2. Hex: #FF0000

    3. RGB: rgb(255,0,0)

    4. RGBA: rgba(255,0,0,0.5) (with transparency)

    5. HSL/HSLA: hsl(0, 100%, 50%)

7. CSS Fonts

  • Font Family:

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

  • Font Size:

     
    h1 { font-size: 24px; }

  • Font Weight:

     
    p { font-weight: bold; }

  • Font Style:

     
    p { font-style: italic; }

8. CSS Box Model

Every element is a box, consisting of:

  1. Content – Text or image

  2. Padding – Space inside border

  3. Border – Around padding

  4. Margin – Space outside border

Example:

 
div {
width: 200px;
padding: 10px;
border: 5px solid black;
margin: 20px;
}

9. CSS Positioning

  1. Static – Default position

  2. Relative – Relative to its normal position

  3. Absolute – Relative to nearest positioned ancestor

  4. Fixed – Stays fixed in viewport

  5. Sticky – Scrolls until a certain point

Example:

 
div {
position: absolute;
top: 50px;
left: 100px;
}

10. CSS Display & Visibility

  • display:

    • block – Takes full width

    • inline – Takes only necessary width

    • inline-block – Inline + block

    • none – Hides element

  • visibility:

    • visible – Shown

    • hidden – Hidden, but space reserved

11. CSS Flexbox

  • Flexible layout for elements.

  • Key properties:

     
    .container {
    display: flex;
    justify-content: center; /* horizontal alignment */
    align-items: center; /* vertical alignment */
    }

12. CSS Grid

  • Advanced layout system.

 
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 10px;
}

13. CSS Pseudo-classes & Pseudo-elements

  • Pseudo-class – Styles elements in a special state

     
    a:hover { color: red; }
    p:first-child { font-weight: bold; }

  • Pseudo-element – Styles part of an element

     
    p::first-letter { font-size: 24px; }

14. CSS Transitions & Animations

  • Transition – Smooth property change

 
button {
background-color: blue;
transition: background-color 0.5s;
}
button:hover {
background-color: red;
}

  • Animation – Complex motion

 
@keyframes move {
from { left: 0; }
to { left: 100px; }
}
div {
position: relative;
animation: move 2s infinite;
}

15. Media Queries (Responsive CSS)

  • Make website responsive for different screen sizes

 
@media (max-width: 600px) {
body { background-color: lightblue; }
}

16. Important Notes

  • Cascading order: Inline > Internal > External

  • Inheritance: Some properties (color, font) inherited; some not (margin, padding)

  • Comments: /* This is a comment */