DEV Community

Cover image for CSS 101 - part 1: First Step
Eric The Coder
Eric The Coder

Posted on • Updated on

CSS 101 - part 1: First Step

One of my 2021 resolution is to strength my knowledge of CSS. I postpone the training since almost one year. So this time no excuse, everyday, I will publish here on Dev.to what I learn from my CSS course the day before.

Click follow if you want to miss nothing.

Without further ado here is a summary of my notes for day 1.

What is CSS?

According to w3schools definition:

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page.

When tags like font and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

Here are some CSS example

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
Enter fullscreen mode Exit fullscreen mode

CSS Syntax

h1 {
    color: black;
    font-size: 24px;
}
Enter fullscreen mode Exit fullscreen mode

The CSS syntax is define like that:
selector {
property: value;
}

In our example, the h1 is the selector. This selector decide witch elements would be style by the css properties. In this case all h1 elements of our page will be style with the specified properties.

In this example those properties are color and font-size

The last syntax element is value.

  • The value of the property color is black.
  • The value of property font-size is 24px

Where to add our CSS?

There are three ways of inserting CSS to our page

  • Inline: Directly in the html tag with the style attribute
  • Internal: In the head section inside style tag
  • External: In a separate file name something.css

Inline CSS

<h1 style="color: red;">This is red title</h1>
Enter fullscreen mode Exit fullscreen mode

Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>
    <h1 style="color: red;">This is a red title</h1>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

External CSS
main.css

h1 {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

And add reference to this file the in head section of our html page

<link rel="stylesheet" type="text/css" href="main.css">
Enter fullscreen mode Exit fullscreen mode

Comments

CSS comments are not displayed in the browser, but they can help document your source code.

Comments example

/* This is comment */
div {
  color: red;
}
Enter fullscreen mode Exit fullscreen mode
div {
  color: red; /* This is another comment */
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

That's it for today. Tomorrow the journey continue, see you later! If you want to be sure to miss nothing click follow me here or on twitter!

Follow me on Twitter: Follow @justericchapman

Discussion (0)