HTML & CSS References

CSS Syntax

Learn the correct way to format CSS code.

Introduction to CSS Syntax

CSS syntax refers to the way we write CSS code. In order to write CSS, you need to first identify the element in your HTML page that you want to style before adding styles using a plethora of built-in CSS properties.

There are multiple ways to identify and tell CSS which element in your HTML page it should style. CSS syntax follows the format demonstrated here.

In CSS, `Selector` points to the HTML element you want to style, `Property` is the built-in CSS property to use to style this element, `Value` is the value we want to apply for this CSS property, and `Declaration’ consists of the CSS property and CSS value, separated by a colon (:). Multiple CSS declarations are separated by a semicolon (;). Declaration blocks are all contained within curly braces.

This particular set of declarations would tell our browser that we want all H1 tags in the HTML file to have a font size of 12px, and have the color blue applied to the text.

Example CSS Syntax
h1 { 
  color: blue;
  font-size: 12px;
}

CSS Selectors

CSS Selectors are used to describe which HTML element(s) you want to style. CSS provides multiple ways to describe the selectors:

  • Element selectors
  • ID selectors
  • Class selectors

Element selectors are the simplest form of defining which HTML elements to style. As seen in the example above, you need to tell CSS just the tag name of the element that you want to style. For example – h1, a, p or div.

  • In order to target all <p> tags, we use the p selector. 
  • In order to target all <div> tags, we use the div selector.

CSS Properties

Using specific CSS properties is how we can change how our elements appear on a web page. Remember the syntax above, we need to use a selector first, and then we describe what styles we wanted to apply for a particular element.

Some common CSS properties that we can change are listed below:

DescriptionCSS Property NameValue TypeExample
Text ColorcolorColor name, Hex Code, RGB Valuecolor: black;
Text Sizefont-sizePixel Valuefont-size: 20px;
Font Weightfont-weightnormal, bold, bolder, lighter, number from
100 to 900 for thinner to thicker fonts
font-weight: bold;
Font Stylefont-stylenormal, italic, obliquefont-style: italic;
Background Colorbackground-colorColor name, Hex Code, RGB Valuebackground-color: red;

Learn HTML & CSS Today

Get hands-on experience writing real code while you learn with interactive tutorials in our free online learning platform – no downloads or complicated setup required.

  • Free and fun
  • Designed for beginners
  • No download or setup required