CSS Syntax

In this chapter, we will explore the basic syntax of CSS. Understanding CSS syntax is essential for writing and reading CSS rules, which are used to style HTML elements.

Basic Structure of CSS

A CSS rule consists of a selector and a declaration block. The selector targets the HTML element(s) to be styled, and the declaration block contains one or more declarations that define the styles to be applied.

Syntax

selector {
  property: value;
  property: value;
}

Example

p {
  color: blue;
  font-size: 16px;
}

In the example above, the selector p targets all <p> elements, and the declaration block specifies that the text color should be blue and the font size should be 16 pixels.

CSS Selectors

CSS selectors are used to select the HTML elements that you want to style. There are several types of selectors in CSS.

Type Selector

Selects all elements of a given type.

h1 {
  color: red;
}

Class Selector

Selects elements with a specific class attribute. Class selectors are prefixed with a dot (.).

.intro {
  font-style: italic;
}

ID Selector

Selects an element with a specific ID attribute. ID selectors are prefixed with a hash (#).

#header {
  background-color: yellow;
}

Attribute Selector

Selects elements with a specific attribute or attribute value.

a[target="_blank"] {
  color: green;
}

Descendant Selector

Selects elements that are descendants of another element.

div p {
  color: purple;
}

Grouping Selector

Applies the same style to multiple selectors.

h1, h2, h3 {
  font-family: Arial, sans-serif;
}

CSS Properties and Values

CSS properties define the style to be applied, and values specify the settings for those properties. Properties and values are separated by a colon (:) and declarations are separated by a semicolon (;).

Example

p {
  color: blue;       /* Property: color, Value: blue */
  font-size: 16px;   /* Property: font-size, Value: 16px */
  margin: 10px;      /* Property: margin, Value: 10px */
}

CSS Comments

Comments are used to explain and organize CSS code. Comments are ignored by the browser and do not affect the display of the web page. CSS comments are enclosed within /* and */.

Example

/* This is a single-line comment */

p {
  color: blue; /* This is an inline comment */
}

/*
This is a
multi-line comment
*/

CSS Units

CSS uses various units to specify lengths, sizes, and other measurements.

Absolute Units

• px (pixels): Represents a fixed size.
• cm (centimeters): Represents a fixed size in centimeters.
• mm (millimeters): Represents a fixed size in millimeters.
• in (inches): Represents a fixed size in inches.
• pt (points): Represents 1/72 of an inch.
• pc (picas): Represents 1/6 of an inch.

Relative Units

• % (percent): Represents a percentage relative to another value, often the size of a parent element.
• em: Relative to the font size of the element (2em means 2 times the current font size).
• rem: Relative to the font size of the root element.
• vw (viewport width): 1% of the width of the viewport.
• vh (viewport height): 1% of the height of the viewport.

Example

p {
  font-size: 16px;
  margin: 10px;
  width: 50%;
  height: 50vh;
}

CSS Colors

CSS supports a variety of ways to define colors, including color names, hex codes, RGB, RGBA, HSL, and HSLA.

Color Names

p {
  color: red;
}

Hex Codes

p {
  color: #ff0000;
}

RGB

p {
  color: rgb(255, 0, 0);
}

RGBA

p {
  color: rgba(255, 0, 0, 0.5); /* The last value is the alpha (opacity) */
}

HSL

p {
  color: hsl(0, 100%, 50%);
}

HSLA

p {
  color: hsla(0, 100%, 50%, 0.5); /* The last value is the alpha (opacity) */
}

CSS Shorthand Properties

CSS allows you to specify multiple property values in a single declaration using shorthand properties. This can make your CSS more concise and easier to read.

Margin and Padding

/* margin: top right bottom left; */
p {
  margin: 10px 20px 10px 20px;
}

/* padding: top/right/bottom/left */
div {
  padding: 10px 20px;
}

Background

body {
  background: #ff0000 url('background.jpg') no-repeat center center fixed;
}

Conclusion

In this chapter, you learned about the basic syntax of CSS, including selectors, properties, values, comments, units, colors, and shorthand properties. Understanding these basic elements is essential for writing and reading CSS rules, which are used to style HTML elements.