Link Search Menu Expand Document
Merit Academy Tech U

CSS Basics

Table of contents

  1. Tutorials
  2. Introductory Examples and Resources
    1. Selectors
    2. Cascade
    3. Conventions

CSS is the styling language of websites and web applications. It styles the HTML markup of web pages and is nothing without HTML. It would be trying to do paint-by-numbers without a coloring book. Therefore, you do need to know at least a little bit of HTML before you learn any CSS. It is highly recommended that you learn HTML and CSS at the same time.
It is highly recommended that you learn HTML and CSS at the same time.

Tutorials

The best websites to learn CSS are the following:

  1. w3schools
    A full CSS course for those who are new to web development looking for simple answers
    The simplest tutorial site for an introduction to CSS and other languages. Has examples, code sandboxes, and practice questions, and is rather comprehensive. Highly recommended for beginners.
  2. MDN
    For those who are experienced coders looking for the right answers
    MDN (Mozilla Developer Network) is the standard documentation and examples for professional developers. Provides more detailed and accurate explanations than w3schools.
  3. codecademy
    For those who want to get a brief overview and learn by doing
    Codecademy has a great free mini course for learning CSS. It does require an account but teaches the basics quickly and effectively.
  4. CodeHS
    For those who want a comprehensive web design course
    Click the link above to enroll in Merit Academy’s complete web design course which covers HTML, CSS, Bootstrap, and other skills related to making web sites. The course code (if you need it upon signing up) is F5D0E.

Introductory Examples and Resources

There are a couple of essentials when it comes to CSS:

Selectors

CSS selectors allow you to style different parts of your HTML in an organized way. Here are the most important selectors to know from least specific to most specific.

SelectorUsage ExampleHTML Example (below)
ElementChange the styling for all the paragraph tagsParagraph 1 (black)
ClassChange the styling for most of the paragraph tagsParagraphs 2 and 3 (red)
IDChange the styling for one paragraph tagParagraph 4 (blue)
Inline styleChange the styling of a tag in HTMLParagraph 5 (green)

CSS

/* Element Selector */
p {
    color: black;
}

/* Class Selector */
.red {
    color: red;
}

/* ID Selector */
#blue {
    color: blue;
}

HTML

<html>
<head>
    <link rel="stylesheet" href="path/to/cssfile.css">
</head>
<body>
    <p>Paragraph 1</p>
    <p class="red">Paragraph 2</p>
    <p class="red">Paragraph 3</p>
    <p id="blue">Paragraph 4</p>
    
    <!-- Inline style -->
    <p style="color: green;">Paragraph 5</p>
</body>
</html>

Cascade

The “Cascade” part of “CSS” refers to its loading behavior. CSS is loaded from top to bottom, thus bottom styles might override styles above them.

CSS

p {
    color: blue;
}

/* This is the color that will be used because of the cascade */
p {
    color: red;
}

HTML

<html>
<head>
    <link rel="stylesheet" href="path/to/cssfile.css">
</head>
<body>
    <p>Red Text</p>
</body>
</html>

This behavior extends to multiple stylesheets loaded in the HTML document head, later stylesheets may override styles in previous stylesheets. In the example below, the styles from file2.css will be used instead of file1.css because of the order the stylesheets are linked in the HTML.

file1.css

p {
    color: blue;
}

file2.css

p {
    color: red;
}

HTML

<html>
<head>
    <link rel="stylesheet" href="file1.css">
    <link rel="stylesheet" href="file2.css">
</head>
<body>
    <p>Red Text</p>
</body>
</html>

Conventions

If you’re unconvinced that following convention is important, visit this page.

  1. You should name your CSS classes and IDs with kebab case (e.g. class-name), never uppercase. A few people like using camel case for IDs but we personally don’t recommend it.

  2. Learn how to write utility classes. These are classes that have one job and are easy to reuse. For example, if you wanted for a few elements to have blue text, instead of repeating color: blue in each rule every time you wanted to use that color, simply make one class called .text-blue {} that could be used in your HTML whenever you need blue text.

     .text-blue {
     color: blue;
 }

    You can easily write way too many utility classes so use them for things like margin, padding, colors where you know you’ll need to be flexible.

  3. You should try to keep your CSS as organized and readable as possible. You will quickly discover that your CSS can get very lengthy very quickly and it can be hard to keep your code DRY. A simple way to section out your CSS is the following:

     /* Imports */
 @import googlefonts;
 @import otherstylesheet.css;

 /* General Styles */
 body
 h1, h2, h3...
 p
 a, button, a:hover...

 /* Typography */
 body {
     font-family: sans-serif;
 }

 code, pre {
     font-family: monospace;
 }

 /* Layout styles */
 nav {}
 .row {}
 .column {}
 #site-footer {}

 /* Utility classes */
 .text-blue {}
 .text-red {}

 /* Specific components */
 .card {}
 #middle-content {}

    The best way to order the selectors within a section is in the order they appear on the page (see the “Specific Components” section above), this way cascade loads the CSS in the order that the elements appear on the page. Another way to order your selectors is from most specific to least specific (element selectors, then class selectors, then ID selectors, see the “Layout Styles” section above).