Day 33: Introduction to CSS

Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS defines how HTML elements should be displayed and styled on the web page.

CSS Basics: Syntax, Selectors, Properties, and Values

CSS syntax consists of a selector and a declaration block. The selector identifies the HTML element to be styled, and the declaration block contains one or more property-value pairs.

For example:

h1 {
  color: red;
  font-size: 24px;
}

In this example, h1 is the selector, and the declaration block contains two properties (color and font-size) and their corresponding values (red and 24px).

CSS selectors are used to select and apply styles to specific HTML elements. There are several types of CSS selectors, including:

  • Element selectors
  • ID selectors
  • Class selectors
  • Attribute selectors
  • Pseudo-classes

CSS properties specify the styles to be applied to the selected elements. Examples of CSS properties include color, font-size, background-color, padding, and margin.

Adding Styles to HTML Elements

There are three ways to add CSS styles to HTML elements:

  1. Inline styles: Inline styles are added directly to an HTML element using the style attribute. For example:
<h1 style="color: red; font-size: 24px;">Hello, world!</h1>
  1. Internal styles: Internal styles are added to the head section of an HTML document using the style tag. For example:
<head>
  <style>
    h1 {
      color: red;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <h1>Hello, world!</h1>
</body>
  1. External stylesheets: External stylesheets are stored in separate CSS files and linked to the HTML document using the link tag. For example:
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>

Cascading and Inheritance in CSS

CSS styles can be applied to an HTML element from multiple sources, including inline styles, internal styles, and external stylesheets. The process of determining which styles to apply is known as cascading.

CSS also supports inheritance, which means that styles applied to a parent element can be inherited by its child elements. This can help reduce the amount of CSS code needed to style a web page.

Box Model in CSS

The CSS box model describes the layout of HTML elements on a web page. Each HTML element is considered to be a rectangular box, consisting of content, padding, borders, and margins.

The content area contains the actual content of the element, such as text or images. The padding area is a transparent area around the content, used to create space between the content and the border. The border area surrounds the padding area and is used to create a visible border around the content. The margin area is a transparent area outside the border, used to create space between the element and other elements on the page.

CSS provides several properties for controlling the size and layout of the box model, including width, height, padding, border, and margin.