CSS Basics: Syntax Fundamentals

CSS stands for Cascading Style Sheets. It is a language for defining how web pages should be styled, whether texts bold or not, spacing between elements, etc. CSS in a way is easy to pickup, but tricky to master. That is why there are a lot of toolings, techniques, frameworks, etc developed to ease how to do stylings.

This is an example of CSS rule / ruleset, CSS codes that would apply styling to a web page.

  h1, .heading {
    font-weight: bold;
    font-size: 3rem;
    color: blue;
  }

The snippet have anatomy of these:

  • The rule have group of selector h1, heading that target the HTML elements corresponding with h1 tag and heading class.
  • In the code snippet above the curly brackets and the things between is a code block.
  • declaration is line of code that is within the code block, e.g: font-weight: bold;
  • Within declaration we have three main things to take a note: css property, colon, value, and semicolon. For example:
    font-weight: bold;
    • font-weight is css property.
    • bold is value.
    • colon separate the css property and value.
    • semicolon is ending the css declaration.