Tutorials


What is CSS


CSS, or Cascading Style Sheets, is a style sheet language used to describe the presentation of a document written in HTML or XML. CSS controls the layout, colors, fonts, and overall visual appearance of web pages. It allows developers to separate the content of a webpage (HTML) from its design, making it easier to maintain and update the site.

Key Features of CSS

  1. Separation of Content and Design

    • CSS allows the design and layout of a webpage to be handled separately from the content. This makes it easier to maintain large websites since you can change the style of multiple pages by editing a single CSS file.

  2. Cascading and Specificity

    • The term "cascading" refers to the way CSS rules are applied. When multiple rules could apply to the same element, the most specific rule is used. CSS rules "cascade" down from the most general to the most specific.

  3. Selectors

    • CSS uses selectors to target HTML elements. Selectors can be simple, like targeting all <p> elements, or complex, like targeting a specific <div> with a certain class.

    Example:

    p {
    color: blue;
}

.special {
    color: red;
    font-weight: bold;
}

  4. Box Model

    • CSS uses a box model to define the space an element occupies on a webpage. The box model consists of four areas: content, padding, border, and margin.

    Example:

    div {
    width: 100px;
    padding: 10px;
    border: 2px solid black;
    margin: 20px;
}

  5. Responsive Design

    • CSS allows for responsive design, meaning web pages can adjust their layout and style based on the device or screen size. This is done using media queries and flexible grids.

    Example:

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

  6. Animations and Transitions

    • CSS can be used to create animations and transitions, enhancing the interactivity and visual appeal of a website without the need for JavaScript.

    Example:

    .box {
    width: 100px;
    height: 100px;
    background-color: blue;
    transition: background-color 0.5s;
}

.box:hover {
    background-color: green;
}

Ways to Apply CSS

  1. Inline CSS

    • Applied directly to an HTML element using the style attribute.
    <p style="color: red;">This is a red paragraph.</p>

  2. Internal CSS

    • Placed within a <style> tag in the HTML document's <head> section.
    <style>
    p {
        color: blue;
    }
</style>

  3. External CSS

    • Written in a separate .css file and linked to the HTML document using the <link> tag.
    <link rel="stylesheet" href="styles.css">

Example of CSS in Use

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph with <span class="highlight">highlighted text</span>.</p>
</body>
</html>

styles.css:

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

p {
    color: #666;
    font-size: 16px;
}

.highlight {
    color: red;
    font-weight: bold;
}



Next Previous




@aCodeTutorials All Rights Reserved
privacy policy | about