DEV Community

Cover image for Introduction To CSS
enigma6174
enigma6174

Posted on

Introduction To CSS

CSS stands for Cascading Style Sheets and is used to add style to our websites. By default, the browser renders any website as a plain HTML document (without any style). CSS allows us to control how this HTML document is rendered by modifying the size, text, colour, alignment, layout (and many other properties) of the different HTML elements. Therefore, using CSS we can give different shapes, size and colours to a button, change the background of the website, add animations like a loading spinner and many other interesting things!

The first version of CSS (CSS 1) was released in 1996. This was the first time any capability to render a website by styling was introduced. It quickly became popular which led to the second version of CSS (CSS 2) being released in 1998. By 2000, CSS had become popular enough that a third version (CSS 3) was released and significant changes were also introduced.

Starting with CSS 3 the development was modified into a modular approach. The entire CSS code base was broken up into smaller modules based on features and from then on newer modules have continuously been added/updated to enhance existing features or add new ones. Therefore, CSS 3 is the latest version of CSS that is currently in development and also why there will be no CSS 4!

A typical CSS block starts with a selector that can be matched to one (or more) HTML elements. We then use braces to define that block and specify the properties inside it which allow us to control the styling of the selected HTML elements. The particular style applied with a property depends on the value that is assigned to the property. This whole thing is referred to as a CSS Rule.

For example, the following is a CSS rule applied on the HTML paragraph element <p>

p {
background: red;
display: flex;
}
Enter fullscreen mode Exit fullscreen mode

The p in the above is the selector and the keywords background and display are properties and the terms red and flex are the values to these properties. These are the specific style attributes that get applied to the paragraph element when the HTML document is rendered by the browser.

In CSS, the properties are enclosed between a pair of curly braces { } and every property must end with a semi-colon ; and this entire combination of selector + {...} is called as a CSS rule.

How to specify property?

PROPERTY: VALUE;

CSS - Cascading Stye Sheets

While the style sheets allow us to control the styling of HTML elements, the cascading nature of a stylesheet means CSS rules defined later in the code overwrite those written earlier.

In short, it means that in CSS, the order of the rules is important!

Consider the following example where two rules are applied to the HTML <p> element

p {
display: flex;
background: red;
color: white;
}

p {
display: flex;
background: blue;
color: green;
}
Enter fullscreen mode Exit fullscreen mode

In the above example, the initial rule applied to <p> is a red background with white font. However because of the cascading nature of CSS, the style that finally gets applied and rendered on the browser is a blue background with green font.

WHERE TO WRITE CSS?

There are 3 ways to add CSS to our website -

1. Inline CSS

This approach involves adding styling attributes directly to HTML elements and specify properties inside a string. This approach is however not recommended as string becomes long and difficult to manage and/or debug. One big downside to this approach is also the fact that we have to manually add the CSS blocks to every HTML element that we want.

Consider the following example

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Hosting</title>
    <link rel="shortcut icon" href="favicon.png">
</head>

<body>
    <main>
        <section style="background: red; color: white">
            <h1>Upto 100 Gb Free</h1>
        </section>
        <section>
            <h1>Zero downtime</h1>
        </section>
        <section>
            <h1>24x7 Customer Support</h1>
        </section>
    </main>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

In the above example, the first <section> tag has inline CSS styling as shown below

<section style="background: red; color: white">

The problem with this approach is that if we want this same style applied to the other two section tags, we have to manually add the above code inside every <section> tag.

2. Add A <style> Tag

A <style> tag is a special HTML tag that is added inside the <head> tag of the HTML document and then specify the styles as CSS rules. This method has the advantage of selecting multiple HTML elements and apply the CSS rules at one go without having to write the same CSS rules in different places.

Consider the previous example but in this case we use the <style> tag

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>uHost</title>
    <link rel="shortcut icon" href="favicon.png" />
    <style>
      section {
        background: red;
        color: white;
      }
    </style>
  </head>

  <body>
    <main>
      <section style="background: red; color: white">
        <h1>Upto 100 Gb Free</h1>
      </section>
      <section>
        <h1>Zero downtime</h1>
      </section>
      <section>
        <h1>24x7 Customer Support</h1>
      </section>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

As evident from above, the code inside <style>...</style> is the CSS rule applied to the <section> tag and in this case, the rules get applied to every section element in the HTML document without us having to write it every time!

3. Create a Stylesheet

A stylesheet is a separate CSS file that ends with the .css file extension. This is the file in which we write all the CSS rules. To apply the styles, all we need to do is simply import the file in the HTML file.

Consider the following HTML code snippet which does not contain any CSS rules inside it. The CSS gets applied by importing the stylesheet file index.css into the HTML document.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>uHost</title>
    <link rel="shortcut icon" href="favicon.png" />
    <link rel="stylesheet" href="assets/styles/index.css" />
  </head>

  <body>
    <main>
      <section>
        <h1>Upto 100 Gb Free</h1>
      </section>
      <section>
        <h1>Zero downtime</h1>
      </section>
      <section>
        <h1>24x7 Customer Support</h1>
      </section>
    </main>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

The following line of code imports the required CSS file into our HTML document

<link rel="stylesheet" href="assets/styles/index.css" />

While we can keep our .css file wherever we want, it is a good practice to create an assets folder to store all our stylesheets, images, videos and other media. The stylesheets are typically kept under the sub-folder styles but these can also be ignored! Remember to add the rel="stylesheet" attribute inside the <link> tag that imports the css file otherwise the styling will not be applied!

This approach of adding a separate CSS file is the recommended way as it allows separation of concerns - the HTML and CSS is separated into separate files which allows us to write cleaner readable code and also helps in debugging and making modifications later on. It also prevents the bloating of head section (i.e. everything within the <head>...</head>) tags and allows the browser to cache the stylesheet - making the loading time faster in case the HTML file needs to be downloaded again.

This is everything that is there to CSS in a nutshell to get started with styling! If you want to know more about CSS and what's happening visit World Wide Web Consortium (W3C) CSS Working Groups

For the complete CSS and HTML code examples, you can access my Github repo (remember to check the folder introduction for this code)

GitHub logo enigma6174 / css-course

A collection of resources to help learn CSS

Understanding CSS

If you liked this article and want to stay updated with more such articles, support me by following me on DEV and Twitter

I write about web development, AI, cloud, entrepreneurship, technology and anything else that excites me!

Discussion (0)