CSS Basics for Beginners

INTRO TO THE GUIDE

Need a more complete CSS tutorial than what this page can provide?

Take my CSS Crash Course which includes 6 tutorials on the following topics:

  • Lesson 1: CSS & HTML basics

  • Lesson 2: The Box Model (a core CSS concept)

  • Lesson 3: Simple selectors

  • Lesson 4: Combinator selectors

  • Lesson 5: CSS specificity, precedence, & !important

  • Lesson 6: CSS concepts unique to the Squarespace platform

CSS Syntax

A CSS rule is made up of a selector and one or more declarations.

A declaration is made up of a property and a value, which are separated by a colon (:).

The selector comes first, followed by an opening curly bracket ({), followed by the declarations which are separated by semi-colons (;), and finally a closing curly bracket (}).

Media Queries

Media queries allow us to define different CSS rules for different media types using screen sizes. For example, we can have one set of style rules for desktop computer screens, one for mobile devices, and one for tablet devices.

Media queries can be used to check many things, such as:

  • width and height of the viewport

  • width and height of the device

  • orientation (is the tablet/phone in landscape or portrait mode?)

  • resolution

Media Query Syntax

The basic syntax of a media query is as follows:

@media mediatype and (expressions) {

  <CSS CODE GOES HERE>;

}

Media Query Expressions

Here are all of the expressions that you’ll need to know for media queries:

  • min-width => Specifies the minimum width of the screen.

  • max-width => Specifies the maximum width of the screen.

  • min-height => Specifies the minimum height of the screen.

  • max-height => Specifies the maximum height of the screen.

  • orientation => Specifies landscape or portrait mode. Landscape means the width is larger than the height, and portrait means the height is larger than the width

Examples of Media Queries

This makes all <h1> elements aligned to the left on screen sizes smaller than 769px.

@media screen and (max-width: 769px) {
   h1 {
      text-align: left;
   }
}

This makes all <h1> elements blue on screen sizes larger than 769px.

@media screen and (min-width: 769px) {
   h1 {
      color: blue;
   }
}


This defines a range of 769px - 900px; it makes all <p> elements have margin-bottom of 0px on screen sizes between 769px and 900px.

@media screen and (min-width: 769px) and (max-width: 900px) {
   h1 {
      color: blue;
   }
}

Common CSS Properties & Values

Description Property Example Value(s)
Text Color color: blue;
#ffffff;
Font size font-size: 1.5em;
16px;
Typeface font-family: Helvetica;
Arial;
Font boldness font-weight: bold;
600;
Text alignment text-align: center;
left;
Background color background-color: red;
#b82116;
Border roundness border-radius: 30px;
Space around element's border margin: 10px;
Space within element's border padding: 20px;
Next

Desktop & Mobile Navigation