CSS (Cascading Style Sheets) is a way to turn HTML from boring text into colorful and stylistic websites. In this guide, we will learn how to implement CSS and some basic ways to add some color and style into your website.
There are three ways to get CSS into your code:
For the majority of the guide, we will be doing externally, but it is totally okay for you to do whatever method you like. I encourage you to try all three and see the benefits and drawbacks of each one (you will learn quickly what they are.)
This CSS will be like another attribute to the HTML tag, using the style keyword. To separate CSS styles, add a semicolon
<p style="<insert CSS here">Some text</p>
This CSS will be at the top of the HTML document, and they will apply to all the elements you specify.
<style>
<insert CSS here>
</style>
<body>
<p>Some text</p>
</body>
The new <style> tag will usually go under the <head>, but above the <body>.
This CSS will be implemented via another document. In your same project file, create a new file. You can name it whatever you want (common practice is styles), and end it with the .css tag. This new file will contain your CSS. Then you will need to link the file to your HTML document. Add this line to your code:
<link rel="stylesheet" href="styles.css"/>
Before we get into different CSS tags, let’s learn about selectors. Selectors are ways to add CSS to a certain group of elements. For example, if we had a couple of headers that we wanted to have the same color, we wouldn’t want to copy all the CSS to each header. Instead, we would use a class. To create a class, you would follow this syntax:
.name {
<insert CSS here>
}