CSS

Tags: #◇Computer Science #◇CCAPDEV #◇Conceptual #◇CSS

◇Overview

While HTML provides the structural foundation of a web page, CSS (Cascading Style Sheets) brings it to life through design and layout. CSS acts as a presentation language that allows developers to style documents independently of their HTML content. This separation of concerns means that the same HTML can be styled in vastly different ways, promoting cleaner code and greater design flexibility.

◇Key Definitions

• CSS (Cascading Style Sheet): A styling language that dictates how HTML elements should be displayed on the screen, in print, or in other media.
• Cascading: The process of resolving conflicts when multiple styles apply to the same element. It uses inheritance, meaning properties applied to parent elements can cascade down to their children.
• Style: The specific design attributes—such as colors, margins, layouts, and fonts—applied to HTML elements.
• Selector: The HTML tag, class, or ID that the styling rules will be applied to.
• Property: The specific visual characteristic (e.g., background-color, font-size) that you want to change.
• Value: The setting assigned to a CSS property (e.g., red, 12px).

◇Theoretical Framework / Core Concepts

Separation of Content and Presentation

The fundamental philosophy behind CSS is the separation of content (HTML) and presentation (CSS). A .css file is a simple text file that contains a set of rules. This separation allows multiple HTML pages to link to a single CSS file, avoiding repetitive styling declarations and making site-wide design updates significantly more efficient.

The CSS Rule Structure

A CSS rule consists of a selector and a declaration block. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon.

selector {
    property: value;
    property: value;
}

• Selector: Indicates which element(s) are being styled.
• Declaration block ({ ... }): Houses the style rules.
• Property: The attribute you are modifying.
• Value: The specific style assigned to the property.

◇Worked Examples / Protocol Walkthroughs / Calculations

Example: Styling Basic Elements

In this example, we style the <body> and an <img> tag to understand how multiple properties work together.

/* Styling the body to have a specific background color */
body {
    background-color: #b7d1c4; /* Hex color code for a soft green */
}

/* Styling all image elements */
img {
    height: 170px;
    width: 170px;
    /* Adding a subtle drop shadow */
    box-shadow: rgba(0, 0, 0, 0.2) 10px 10px;
}

Walkthrough:

1. The browser reads the body selector and changes the page's entire background color.
2. It then finds every <img> element on the page, constraining them to 170x170 pixels and applying a semi-transparent black shadow offset by 10 pixels on the X and Y axes.

◇Summary & Key Takeaways

• CSS is essential for designing and styling HTML content.
• It separates presentation from structure, enabling cleaner and more maintainable codebases.
• The "Cascading" nature of CSS means styles follow a hierarchy and inherit properties from parent elements.
• Every CSS rule is made of a selector, property, and value, which together instruct the browser on how to render specific elements.

◇References & Navigation

• Previous Topic: ◇HTML
• Next Topic: ◇CSS Selectors
• Related Notes: ◇Client Server Architecture