Labs ICT

CSS Introduction

CSS short for Cascading Style Sheets, is a web technology used to define the visual style and layout of HTML elements on a webpage. It provides a set of rules, selectors, and properties that determine how HTML elements should be presented.

CSS separates the content and structure of a webpage from its visual design, allowing developers to create visually appealing and consistent websites.

Selectors and Styles

CSS uses selectors to target specific HTML elements and apply styles to them. Selectors can be based on element names, class names , IDs, attributes, and more.

Styles are defined using properties and values, which determine characteristics such as colors, fonts, sizes, margins, and positions. With CSS, you have fine-grained control over the appearance of individual elements or groups of elements on a webpage.

Box Model and Layout

The CSS box model is a fundamental concept that defines how elements are rendered on a webpage. It consists of properties such as width, height, padding, border, and margin.

Understanding the box model allows you to control the size, spacing, and positioning of elements. CSS provides various layout techniques, including float, flexbox, and grid, which enable you to create responsive and flexible page layouts.

Example

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>My First Page</title>
  <style>
    body {
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #333333;
    }
    p {
      color: #666666;
    }
  </style>
</head>
<body>
  <h1>The most important heading.</h1>
  <p>The first paragraph.</p>
  <h2>Subheading</h2>
</body>
</html>

So excited? just click next to give it a short! happy Learning

๐Ÿงช Quick Quiz

What is the primary purpose of CSS?