Welcome back readers, today's post is written as a guide to teachers as well as students. It is by no means the only material you will use to master CSS, but it is built to set beginners on the path of mastering CSS. So let's get started.
Introduction
CSS stands for Cascading Style Sheet. It is a technology used to beautify and style our HTML. HTML is a markup language it is used to simply create documents, CSS is its best friend. It complements HTML by beautifying it. Therefore all front-end projects begin with HTML but they can't end there. The front-end developer must employ CSS if he wishes to turn an ordinary black-and-white document into a work of art.
The above image is an example of a document without CSS. Now here is one with basic CSS, (Please keep in mind I don't own these images, they are gotten from the internet)
The difference should be clear. Keep in mind though that this is not CSS at full power. Check out CSS when used by a skilled front-end developer,
Adding CSS to a document
CSS is for HTML. So to get started using it, you need an HTML document. Don't worry I have something basic for you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Getting started with CSS</title>
</head>
<body>
<h1>I am a level one heading</h1>
<p>
This is a paragraph of text - it says <span id="me">joshytheprogammer is awesome</span>. In the text is a
<span class="second-p">span element</span> and also a
<a href="https://blog.joshytheprogrammer.com">Visit my amazing blog</a>.
</p>
<p class="second-p">
This is the second paragraph. It contains an <em>emphasized</em> element. <em>Why haven't you shared this with you friends?</em>
</p>
</body>
</html>
There are three ways to successfully add CSS to a document.
Inline CSS. This involves you writing your CSS code inside the HTML element you wish to style. As an exmaple, the code below will create a red level one heading.
<h1 style="color: red;">I am a level one heading</h1>
Writing CSS code directly inside the HTML element using the
style
attribute. However, this approach is not recommended for larger projects as it can be hard to manage.Embedded CSS. This involves writing your CSS code in the same file as your HTML. It is done by creating a
style
tag in thehead
tag of your HTML.<html> <head> <title> Your first document </title> <style> h1 { color: red; } </style> </head> <body> <h1>I am a level one heading</h1> </body> </html>
External CSS. This involves writing your CSS in its own file. This is the recommended way of writing CSS. To get started, create a new
style.css
file in the same folder as yourindex.html
. In your HTML, add the following lines of code to yourhead
tag.<link rel="stylesheet" href="style.css" />
In this post, we will be working only with External CSS. It is the most efficient way of writing CSS out of the three discussed above.
The CSS syntax
As you must have noticed in the examples above, there is a specific way CSS is written. It is:
selector {
property: value;
}
Usage:
h1 {
color: red;
}
p {
color: blue;
}
.second-p {
color: green;
}
#me {
color: brown;
font-weight: bolder;
}
The selector simply specifies the element or group of elements you wish to style. It can be an element name, class name, ID, or state. We will talk more about selectors later.
The next thing you notice is the property: value;
statement. This is called a rule - it specifies one of the ways you want your element (the one selected) to look.
So in the first example, we are saying we want all level-one headings to have a red color.
CSS Selectors
As previously promised, let's talk more about selectors. I said that they specify the element or group of elements we wish to style. Well, there are only three types of selectors you need to know for now.
The "element" selector. This is used to style all the elements in a document at once. So all the rules defined in the "element" selector will apply to all of the said elements on the document. As an example, the rule we specified above will change the color of all level one heading on our document to red. This is important because there can be an unlimited number of level-one headings in our document, and all of them will be red. It is possible however to be more specific about the elements you wish to style. Enter:-
The "class" selector. This is written as
.class-name
This will style all the elements on the document that bears the class specified. This is the best way to style across various elements. You can give one class to all level headings, paragraphs, and images on your page and the rules specified will apply to them all. There is a way to be even more specific, Enter:-The "id" selector. This is written as
#id-name
It will style all the elements that bear the ID specified. IDs cannot be repeated across elements. They are unique.
The Universal Selector
The universal selector is used to select all the elements on the page. It is written as *
. When you want to change the layout of your entire document, you add your rules to the universal selector.
* {
property: value;
}
The existence of the universal selector gives birth to Document Re-setters. By default, the browser applies certain styles to your HTML in order to beautify it. Some of them are helpful, some not necessary. For those not necessary, you might want to remove them - from all elements at once. Hence, the universal selector.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scroll-behavior: smooth;
}
The above block of code is an example of Document Re-Setters I use regularly. Feel free to use them in your projects as well. It simply involves removing all the unnecessary margins and padding the browser adds to elements.
Some rules to note
CSS like every other programming technology has a couple of no-nos. Those things that when you do, vs-code will grace you with that pretty red line. Here a just a couple:-
Don't fuck up the keywords. Pardon my french. What I mean by that is that both your property and your value must be known to CSS. If not it will throw an error. So be sure you perform research after you see RED.
Use U.S. spelling. When in doubt about US vs UK spelling, choose the US most times. For example,
colour
is defined ascolor
notcolour
.Be careful with spacing. Though you may separate values with spaces for the sake of shorthand. Properties may never have spaces.
Conclusion
There are a bunch of CSS properties each with its corresponding values and use cases. The best way to get better is to build, just build. That being said:- I'll be uploading 9 CSS projects you should build as a beginner. Watch out for that. Have a lovely day.