Basic CSS Syntax

3.1 Rules

The main components of CSS include rules, properties, and values. Understanding the basic syntax of CSS is key to creating attractive and functional web pages.

Main CSS components:

• Rules
• Selectors
• Properties
• Values

Rules

CSS rules consist of a selector and a declaration block. The selector specifies which HTML elements the styles will apply to, and the declaration block contains one or more properties and their values. It usually consists of one or more properties and values enclosed in curly braces {}.

Example:

    
      selector {
        property: value;
        property: value;
      }
    
  

Example for a heading:

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

In this example, h1 is the selector, color and font-size are properties, and blue and 24px are the values of these properties.

3.2 Properties and Values

CSS provides a wide range of properties that can be used to control the appearance of elements. Each property has one or more values that determine how the property will be applied.

Main properties and their values:

Color and Background:

• color: sets the text color
• background-color: sets the background color of the element

Example:

    
      div {
        color: red;
        background-color: yellow;
      }
    
  

Font:

• font-family: defines the font family
• font-size: sets the font size
• font-weight: defines the font weight

Example:

    
      h1 {
        font-family: 'Georgia', serif;
        font-size: 36px;
        font-weight: bold;
      }
    
  

Text:

• text-align: aligns text within the element
• text-decoration: adds effects to text, like underlining

Example:

    
      a {
        text-align: left;
        text-decoration: none;
      }
    
  

Spacing and Borders:

• margin: sets the outer spacing around an element
• padding: sets the inner spacing within an element
• border: defines the border of the element

Example:

    
      .container {
        margin: 0 auto;
        padding: 20px;
        border: 2px solid #000000;
      }
    
  

Dimensions and Position:

• width and height: set the width and height of the element
• position: determines how the element is positioned

Example:

    
      .box {
        width: 200px;
        height: 100px;
        position: absolute;
        top: 50px;
        left: 100px;
      }
    
  

You need to:

• remember standard properties of elements
• remember standard values of these properties
• remember unique properties of different elements
• remember how these properties work in practice
• remember how these properties affect each other.

The best way to do this is through practice – write a lot of CSS and see how it works.

1

Task

Frontend SELF EN, level 12, lesson 3

Locked

Color and Background

Color and Background

Open

1

Task

Frontend SELF EN, level 12, lesson 3

Locked

Margins and Borders

Margins and Borders

Open