Skip to main content

CSS, explained.

Published 2022/01/16 17:57

CSS is basically a document that decides how things should look like on a web page. What does this mean exactly?

Suppose you want to create a webpage about your vacation in Crete.

To create the content of the web page, you'll need a file called HTML, which would look something like this:

<h1>My vacation</h1>

<p>Last summer I went on vacation to the Greek islands or Rhodes and Crete. It was loads of fun</p>

<p>We went to the beach, ate tons of ice cream and enjoyed the sun so much that we got a little sunburned</p>

More on HTML

The document has a heading ("My vacation") and two paragraphs. In HTML, a heading is <h1> and a paragraph is <p>.

Now the problem is that, although it's great that we can get our content out there, it's a little boring.

What if we could give it a little colour? This is where CSS comes in.

With CSS we can tell the browser to do things like:

  • Give this heading a red colour

  • Make some space between paragraphs so it doesn't look as crammed

  • Change the size of this image so it's nice and tidy.

So how do we do this?

Adding CSS to your website.

This is an example of a typical page made with HTML:

<!DOCTYPE html>
<html lang="en">
    <title>My vacation</title>
    <h1>My vacation</h1>

    <p>Last summer I went on vacation to the Greek islands or Rhodes and Crete. It was loads of fun</p>

    <p>We went to the beach, ate tons of ice cream and enjoyed the sun so much that we got a little sunburned</p>

Suppose we need to make the heading have the colour red. In CSS it would look like this:

    color: red;

Where h1 is just our heading (as we discussed) and color: red basically says "make the colour red".

The CSS code above basically says:

Whenever there's a first-level heading (h1), make it red.

But we're still not done. We somehow need to tell the HTML file:

Hey HTML! I have some colours and stuff I want you to add to your page. Here's a file for it.

To do this, go to the <head> of your page (remember, head is for stuff that aren't written on the page) and use this line, for a CSS file called style.css:

    <link rel="stylesheet" href="style.css"/>

That's it! If you load (or refresh) the page on your browser again, the heading will now appear red!

More stuff you can do with CSS

CSS has loads of stuff you can "style" your web page with:

  • Add a background color with background-color: blue

  • Change the size of something (like an image) with width: 300px

  • Make some space between things, like paragraphs with margin: 30px

Further more

CSS can also be used to add styling to a page, depending on things like screen sizes. So you can actually make the page look different on desktops and mobile phones without having 2 separate pages! These are called "media queries" which we'll get to on a later date!

Next steps

Now you know what CSS is all about. It's basically about taking a page with content and changing how it looks!

Now that you got a basic idea of CSS, here are some links to go study further:

Dev, Explained (43 part series)

  1. Javascript Scopes, explained.
  2. Javascript Promises, explained.
  3. Accessibility, explained.
  4. React, explained
  5. Should I use forEach() or map()?
  6. Should I use Flexbox or CSS Grid?
  7. Docker, explained.
  8. Unit testing, explained
  9. Git, explained.
  10. Typescript, explained.
  11. async/await, explained.
  12. The DOM, explained.
  13. Regular expressions, explained
  14. GraphQL, explained.
  15. Vue, explained.
  16. Svelte, explained.
  17. API, explained.
  18. Javascript Hoisting, explained.
  19. Immediately Invoked Function Expressions (IIFE), explained.
  20. ARIA roles, explained.
  21. Test-driven Development, explained.
  22. ARIA live regions, explained.
  23. aria-label in accessibility, explained.
  24. Type coercion in Javascript, explained.
  25. Variables, explained.
  26. if statements, explained.
  27. Arrays, explained.
  28. Currying in Javascript, explained.
  29. Memoization, explained.
  30. For loops, explained.
  31. Javascript Prototypes, explained.
  32. React Hooks, explained.
  33. Graph databases, explained.
  34. MongoDB, explained.
  35. Serverless, explained.
  36. Javascript Callback functions, explained.
  37. HTML, explained.
  38. CSS, explained.
  39. Responsive design, explained.
  40. Javascript, explained.
  41. The CSS Box Model, explained.
  42. CSS Flexbox, explained.
  43. CSS Grid, explained.
2022 Savvas Stephanides
Buy me a coffee
Some icons from Freepik