CSS Fundamentals - Knowledge Base

CSS Fundamentals: Styling the Web

Cascading Style Sheets (CSS) is the cornerstone of modern web design. It allows you to control the presentation, layout, and visual appearance of your web pages, separating style from content (HTML). This article covers the fundamental concepts you need to get started with CSS.

What is CSS?

CSS works by selecting HTML elements and applying styles to them. These styles can include colors, fonts, spacing, positioning, and even animations. The 'cascading' aspect refers to how styles are applied when multiple rules conflict; a set of rules will be applied in a certain order, and the last rule in that order will win if it applies to the same property.

Selectors

Selectors are patterns used to select the HTML element(s) you want to style. Common selectors include:

Type Selectors: Select elements by their tag name (e.g., p, h1, div).
Class Selectors: Select elements with a specific class attribute (e.g., .my-class). Classes can be applied to multiple elements.
ID Selectors: Select elements with a specific ID attribute (e.g., #unique-id). IDs must be unique on a page.
Attribute Selectors: Select elements based on their attributes and values (e.g., [type="text"]).
Pseudo-classes: Select elements based on their state (e.g., :hover, :focus, :nth-child()).
Pseudo-elements: Select and style specific parts of an element (e.g., ::before, ::after, ::first-line).

Properties and Values

Once you've selected an element, you apply styles using properties and their corresponding values. A CSS rule consists of a selector followed by a declaration block enclosed in curly braces. Each declaration is a property-value pair, separated by a colon, and ends with a semicolon.

Example:

p {
  color: navy;
  font-size: 16px;
  margin-bottom: 1em;
}
            

In this example:

p is the selector.
color, font-size, and margin-bottom are properties.
navy, 16px, and 1em are their respective values.

The Box Model

Every HTML element can be thought of as a box. The CSS Box Model describes how these boxes are rendered on screen. It consists of:

Content: The actual content of the element (text, images, etc.).
Padding: The space between the content and the border.
Border: A line around the padding, content, and margin.
Margin: The space outside the border, separating the element from other elements.

You can control these dimensions using properties like width, height, padding, border, and margin.

Display Property

The display property determines how an element is rendered and how it interacts with other elements. Key values include:

block: Takes up the full width available, starts on a new line (e.g., div, p, h1).
inline: Flows with text, only takes up as much width as necessary, does not start on a new line (e.g., span, a, strong).
inline-block: Similar to inline but allows setting width and height.
none: Hides the element completely; it does not take up any space.
flex: Enables a flexbox layout for direct children.
grid: Enables a grid layout for direct children.

How to Include CSS

There are three primary ways to include CSS in your HTML:

Inline Styles: Using the style attribute directly on an HTML element. (Generally discouraged for maintainability).
<p style="color: blue;">This text is blue.</p>
Internal Stylesheets: Placing CSS rules within a <style> tag in the <head> section of your HTML document.
<head> <style> h1 { color: green; } </style> </head>
External Stylesheets: Linking to a separate .css file using the <link> tag in the <head>. This is the most recommended approach.
<head> <link rel="stylesheet" href="styles.css"> </head>

Next Steps

Understanding selectors, the box model, and the display property are foundational. As you progress, explore concepts like positioning, floats, flexbox, CSS Grid, responsive design, transitions, and animations to create dynamic and visually appealing web experiences.

For more detailed information, check out the MDN Web Docs on CSS.