HTML CSS

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, design, and visual aspects of web pages, allowing developers to separate content from design for easier maintenance and more flexible presentation.

Key Features of CSS

1. Selectors: CSS uses selectors to target HTML elements that you want to style.


p {
    color: blue;
}

This rule applies to all <p> elements, setting their text color to blue.

2. Properties and Values: CSS rules consist of properties and values.


p {
    color: blue;     /* property: value */
    font-size: 20px; /* property: value */
}

3. Cascading: The term “cascading” refers to the way CSS rules are applied based on their order and specificity. Rules can be applied from:

  1. Browser default styles
  2. External stylesheets
  3. Internal stylesheets (within a <style> tag)
  4. Inline styles (within an element’s style attribute)

4. Specificity: Determines which CSS rule is applied when multiple rules match the same element. Specificity is calculated based on the types of selectors used.


/* ID selector - higher specificity */
#header {
    color: red;
}

/* Class selector - lower specificity than ID */
.header {
    color: blue;
}

/* Element selector - lowest specificity */
h1 {
    color: green;
}

Ways to Use CSS

1. Inline CSS: Applied directly within an HTML element using the style attribute.


<p style="color: blue; font-size: 20px;">This is a blue paragraph with a font size of 20px.</p>

2. Internal CSS: Defined within a <style> tag in the <head> section of the HTML document.


<!DOCTYPE html>
<html>
<head>
    <style>
        p {
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p>This is a blue paragraph with a font size of 20px.</p>
</body>
</html>

3. External CSS: Defined in an external stylesheet file (e.g., styles.css) and linked to the HTML document using the <link> tag.

in index.html file


<!-- HTML File -->
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <p>This is a styled paragraph.</p>
</body>
</html>

in styles.css file


/* styles.css */
p {
    color: blue;
    font-size: 20px;
}

CSS Syntax

A CSS rule set consists of a selector and a declaration block.


selector {
    property: value;
}

Example:


h1 {
    color: blue;
    font-size: 24px;
}
Common CSS Properties

Color: Sets the color of text.


p {
    color: red;
}

Font: Controls font properties like font-size, font-family, font-weight, etc.


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

Background: Sets background properties like background-color, background-image, etc.


body {
    background-color: #f0f0f0;
}

Margin: Sets the space outside an element.


p {
    margin: 10px;
}

Padding: Sets the space inside an element, between the content and the border.


p {
    padding: 10px;
}

Border: Sets the border around an element.


p {
    border: 1px solid black;
}

Benefits of Using CSS

Separation of Content and Presentation: Keeps HTML clean and focused on content, while CSS handles design.

Reusability: Apply the same styles across multiple pages.

Consistency: Ensures a uniform look and feel across a website.

Maintainability: Easier to update and manage styles from a single location.