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;
}
CSS Syntax
h1 {
color: black;
font-size: 24px;
}
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>
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>
External CSS
main.css
h1 {
color: red;
}
And add reference to this file the in head section of our html page
<link rel="stylesheet" type="text/css" href="main.css">
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;
}
div {
color: red; /* This is another comment */
}
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
Top comments (0)