CSS - Lesson 2: Syntax | Andros Fenollosa

Every style has the following structure.


selector {
    style: value;
}

selector: Indicates which part of the document the style or styles will apply to.
style: Name of the style.
value: Value of the style.

In the following example we change the typography size on all paragraphs.


p {
    font-size: 3rem;
}

There will be cases with several values or other styles.


p {
    font-size: 3rem;
    border: 1px solid black;
}

comments

They must start with /* and end with */.


/* Table styles */
table {
    /* Adds a left margin of 2.5rem */
    margin-left: 2.5rem;
    /* color: pink */
}

`<style>` tag

If you want to embed the styles in the HTML document itself, you can do so inside <head> with the <style> tag.

<head>
  <style>

  body {
      color: yellow;
  }

  </style>
</head>

`<link>` tag

CSS can be linked from an external file. Inside <head> use <link> with the relative path to the file.

<head>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>

In the following example we can see a real case of a simple website that uses 2 normalizers.

<head>
    <!-- normalize.css normalizer: Balances the styles across browsers -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <!-- Your CSS -->
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>