Today, we're going to look at CSS which is the second in Web Development's holy trinity alongside HTML (If you need to, check here to learn more) and Javascript.

DISCLAIMER: The purpose of this article is not to teach you everything about CSS. My goal is to provide a more humane introduction to CSS and a guide to better resources.

So, what is CSS?

CSS or Cascading Style Sheets is a styling language used to specify the styling and presentation of documents created using a markup language such as HTML.

A good way to think about CSS is to compare a web page to a Ferrari (I know it's a bit far off but just hang in there). In this scenario, you can think of HTML as the metallic car without any paint or functionality, just a hunk of metal that nobody wants to own. Now, splatter some gold paint on it and you have a Ferrari that make the ladies blush :) In that same way, without CSS, your web pages look uninteresting and mechanical but with well-written CSS, your web pages get sexy.

The C in CSS stands for Cascading and it refers to the fact that CSS style rules are applied to HTML elements in a hierarchical manner from the most specific to the least specific. This concept is known as Specificity and I provide a link to learn more about it at the end of this article. Alright, let's look at how to write CSS stylesheets.

NOTE: A stylesheet is the term used to describe a collection of CSS styling rules.

How to write CSS

Every CSS stylesheet is made up of a collection of style rules which typically comprise of:

• selector: which are identifiers used to target specific portions of the HTML that we want to apply styling to. We'll talk about selectors later on.

• declaration block: which consist of a semicolon-seperated list of declarations in which each declaration consists of:

  • property: A pre-existing characteristic of the target element that we want to change like it's height, width, color e.t.c.

  • colon (':'): A seperator between the property and the value

  • value: The exact value we want to set the selected property to.

A typical CSS stylesheet would look something like this:

selector1 {
    property1: value1;
    property2: value2;
    ...
}

selector2 {
    property1: value1;
    property2: value2;
    ...
}
...

Alright, let's look at how we actually apply CSS to our HTML.

Levels of CSS

We can use any of the following approaches to apply CSS to our HTML markup:

• Inline: We use the style attribute to specify CSS for an element, providing a semicolon-separated list of properties and values. To make an h1 tag red, it would look like this:

    ...
    <h1 style="color:red;">Hello World</h1>
    ...
  

  The major problem with this approach is that it can become difficult to maintain as our styling needs become more complex. So, let's see the next approach

• Internal: We use the style tag within our HTML to contain all the CSS for an element. to achieve a similarly red h1, we would do it like this:

    ...
    <style>
        h1 {
            color: red;
        }
    </style>
    ...
    <h1>Hello World</h1>
    ...
  

  Although this scales well in comparison to the inline approach, using this approach still makes it cumbersome to share styles across multiple pages. So, let's go to the final approach.

• External: We put all our CSS in an external file and then link to it from within the pages that need to make use of it's styles. To accomplish a similarly red h1, we would create a .css file and a .html file and place the following code in each of them respectively:

    /* style.css */
    h1 {
        color: red;
    }
  

    <!--demo.html-->
    ...
    <link href="style.css" rel="stylesheet">
    ...
    <h1>Hello World</h1>
    ...
  

More on Selectors

In CSS, styling of specific elements is only accomplished through the use of selectors which we can group into three broad groups:

• Selectors whose names match exactly the names of specific tags in the HTML markup. These selectors are written normally without the need for a prefix.

• Selectors to target elements specified using either the class or the id attribute of a given HTML tag. To target an element specified using the class attribute you simply prefix the class name with a '.', there can be many such elements on a page. To do the same for an element specified with the id attribute you prefix the id name with a '#' instead. Here's an illustration:

    .class_name_goes_here {
        /* declarations go here*/
    }
  
    #id_name_goes_here {
        /* declarations go here*/
    }
  

• Selectors to target elements based on how they are placed relative to other elements on the document tree.

To learn more about selectors, check out this article. Also, for the full list of CSS selectors check it out here. To learn about Specificity, check out this article. To learn a bit more about CSS as a whole and it's history and development, check out Wikipedia. And if you're a visual learner and would appreciate videos more, then check out Youtube.

Alright that's it, that's all I have for you today. I hope you learned a little bit about CSS and most importantly, I hope this article has inspired you to hunger for more. Thank you for reading.

Keep Learning

Keep Growing