CSS

In-depth Overview of CSS

What is CSS?

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls how elements appear on a web page, including layout, colors, fonts, spacing, and more.

CSS provides developers with the ability to:

• Maintain consistency across multiple pages.
• Simplify updates by separating style from content.
• Create responsive designs tailored to different devices and screen sizes.

---

Core Concepts of CSS

1. Selectors

Selectors are used to target HTML elements for styling.
Examples:

• Element Selector:

  p {
      color: blue;
  }

The element selector here is P so all paragraph content will be in the colour BLUE. Also color can be spelt in both the English or American English form. With in the P element we can also define text size such as 12px or 2em. Text style and much more.

• Class Selector:

  .highlight {
      background-color: yellow;
  }

  <p class="highlight">Highlighted text.</p>

The CLASS selector is a CSS Class, we can also use ID where ID can also be used as the target for a some JavaScript function or animation.

• ID Selector:

  #main-heading {
      font-size: 24px;
  }

  <h1 id="main-heading">Main Heading</h1>

2. The Cascade

CSS rules follow a specific priority:

1. Inline styles (e.g., <p style="color: red;">).
2. Internal styles (e.g., <style> in the HTML document).
3. External stylesheets (e.g., .css files).

The last defined rule for an element takes precedence, unless overridden by specificity or the !important flag.

3. Box Model

The CSS Box Model describes how the size of an element is determined:

• Content: The actual text or image.
• Padding: Space between content and border.
• Border: Surrounds the padding (or content if padding is absent).
• Margin: Space between elements.

Example:

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

The box model can be defined in other ways such as em or %. I often use the Border definition to add a box line to aid design through visibility.

4. Layout Techniques

• Flexbox: Provides alignment and spacing for a one-dimensional layout (row or column).

  .container {
      display: flex;
      justify-content: center;
      align-items: center;
  }

• Grid: For two-dimensional layouts.

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

A grid design is essential for web design, and Grid CSS definitions are available with Bootstrap where Bootstrap is CSS definitions.

---

Sass in Web Design

Sass (Syntactically Awesome Stylesheets) is a CSS pre-processor that extends CSS by adding powerful features like variables, nesting, mixins, inheritance, and more. It compiles into standard CSS.

Why Use Sass?

1. Variables:

• Store reusable values like colors, fonts, or sizes.
• Example: $primary-color: #3498db; body { background-color: $primary-color; }

1. Nesting:

• Organize styles in a hierarchical way, mimicking HTML structure.
• Example: .menu { ul { margin: 0; padding: 0; } li { list-style: none; } }

1. Partials and Imports:

• Split styles into smaller files (partials) and combine them with @import.
• Example: // _variables.scss $font-stack: Helvetica, sans-serif; // main.scss @import 'variables'; body { font-family: $font-stack; }

1. Mixins:

• Define reusable blocks of CSS.
• Example: @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); }

1. Inheritance:

• Share properties between selectors using @extend.
• Example: .button { padding: 10px 20px; color: white; background: blue; } .primary-button { @extend .button; background: green; }

---

How Sass Compiles

Sass files use the .scss or .sass extension. These files are compiled into .css using tools like the Sass CLI, Webpack, or tools integrated into text editors.

SCSS to CSS Example:

$color: #ff6347;

h1 {
    color: $color;
    font-size: 2rem;
}

Compiles to:

h1 {
    color: #ff6347;
    font-size: 2rem;
}

---

Using Sass in Modern Web Design

Sass is invaluable in complex projects, especially for:

1. Design Systems: Centralizing styles with variables and mixins.
2. Scalability: Modular organization with partials.
3. Consistency: Avoiding duplication with inheritance and reusable patterns.

---

How to Get Started with Sass

1. Install Sass:

   npm install -g sass

2. Compile Sass to CSS:

   sass input.scss output.css

I will add more to this post over time.