CSS - Cascading Style Sheets

  • CSS stands for Cascading Style Sheets.
  • CSS saves a lot of work by controlling the layout of multiple web pages at once.
  • CSS is used to format the layout of a webpage, including colors, fonts, text size, spacing, positioning, background, and more.
  • CSS can be added to HTML documents in three ways: Inline, Internal, and External.

Inline CSS

An inline CSS is used to apply a unique style to a single HTML element. It uses the style attribute of an HTML element.

Example:

<h1 style="color: blue;">A Blue Bird</h1>

Internal CSS

An internal CSS is used to define a style for a single HTML page. It is defined within the <style> element in the <head> section of the HTML page.

Example:

            <head>
            <style>
            body {
                background-color: powderblue;
            }
            h1 {
                color: blue;
            }
            </style>
            </head>

External CSS

An external style sheet is used to define the style for many HTML pages. It is linked in the <head> section of each HTML page using the <link> element.

Example:

<head>
            <link rel="stylesheet" href="styles.css">
            </head>

CSS Colors, Fonts, and Sizes

CSS allows control over text color, font, and text size.

CSS Padding and Margin

CSS padding properties create space around an element's content inside borders. CSS margin properties create space outside defined borders.

Margin - Individual Sides

CSS allows setting margins for each side (top, right, bottom, and left) of an element. Margin values can be specified using length, percentage, or "auto".

Margin - Shorthand Property

CSS provides a shorthand property to specify all margins at once. You can set margins for the top, right, bottom, and left in a single property declaration.

The "auto" Value

Setting the margin property to "auto" can be used to horizontally center an element within its container. The element takes up the specified width, and the remaining space is split equally between the left and right margins.