If you are here, you probably know that CSS is about style. In fact, with CSS you can style your web pages any way you want. You can set sizes, colors, basic animations, and more. In other words, CSS is a language you need to know if you want to work in web development. So, in this CSS tutorial, we will help you get started with it in a few minutes.
This CSS tutorial is part of a longer series of posts that will help you become a full-stack developer. If you are interested in that, you can start from the beginning here.
What is CSS?
CSS stands for Cascade StyleSheet, and it’s a language you use to apply a style to your web pages. Unlike many novices may think, CSS is not a programming language. In fact, just like HTML, you are not telling the PC “do this – do that”. Instead, you are just giving a description of what the final result should look like.
So, with CSS, you tell the browser how each item in an HTML page should appear. That’s what style is about, and that’s what we will learn in this CSS tutorial. But before we do that, we can better understand where the name CSS comes from,
As we know, the name “CSS” contains three important keywords: Cascade, Style, and Sheet. But to better understand them, we should analyze them backward.
- Sheet, because all the description of your style will go in a dedicate sheet. You won’t describe the style of your items in your HTML page (even if you could), but you will use a separate file instead. Then, in the HTML page, you will reference this document.
- Style, as we all know, means styling the components of our web page.
- Cascade because in the CSS file you are going to describe how you want your page to look like. Thus, you will list each HTML item, one after the other. And, for each, you will list all the properties you want to apply, for example, a specific font, color, or size. All of this looks like a cascade.
Simple enough, there is not much to say about how and why CSS. We can get started with our CSS tutorial now!
How to integrate CSS and HTML
So, CSS gives us only information about the style. Instead, HTML gives us only information about the content. It’s clear the two must work together, otherwise either one won’t have much sense to exist, particularly CSS. We need to integrate them.
By integrating CSS and HTML, we mean applying some style defined with CSS to an HTML document. We have three strategies we can use.
- Inline CSS
- CSS within HTML
- External CSS file
Let’s see what they mean.
Inline CSS
This is the simplest way, the quick and dirty option. Still, it’s the worst way to go, because it’s not scalable. With this approach, you directly write all the CSS style properties inside your HTML tags.
To do that, you will use the attribute style on the item where you want to apply the style, and write some CSS properties into it. You don’t need to identify to which elements you are applying the style: it will apply exactly on the element where you use the style attribute.
So here’s an example to make a paragraph red and bold (at the same time).
<p style="color: red; font-weight: bold;">My red and bold paragraph...</p>
Inside the style tag, you can put all the CSS properties you’d like. We can see it doesn’t scale well, because if we add more paragraphs we need to copy-and-paste the rules. Even worse, if later we want to change the rules, for example making text green, we need to edit it in all the places where we used it. We totally need a better way.
CSS within HTML
A better way to go could be to define all your style in just one place, typically at the top of the page. To do that, you need to use the <style>...</style> tag, which is meant to contain CSS code.
However, unlike with inline CSS, here our browser has no default way to know where to apply our rules. What exactly is the paragraph we want to make red? Do we want to make them all red? We need to tell that, and we can do that with selectors.
We can talk more about selectors later, but in short, they are a way to say “apply those rules only to this selected element”.
You can technically put your <style>...</style> tag anywhere you want, but it generally goes in the head of the page. So, to make all paragraphs red and bold, we can go with the following code.
<!doctype html>
<html>
<head>
<style>
p {
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>I am red and bold</p>
<p>Also me!</p>
</body>
</html>
Simple enough. You can put as many rules you want in each selector, and use as many selectors you want.
This approach is better than inline CSS because you can quickly change the rules for multiple elements in one place. Still, it’s not the best way to go, because if you have multiple pages on your website you need to replicate the same rules on all the pages. What if you want to change something? Clearly there must be a better way. And there is!
External CSS File
This is the best practice, the one you should always follow. You put all your CSS in a file dedicated only to CSS. Then, in your HTML document, you say “hey go check the style rules over there”, and reference that CSS file.
The clear benefit here is that you can reference the same CSS file from multiple HTML documents. Thus, when you make a change to the style inside the CSS file, all your web pages can be updated automatically (of course you need to refresh the page).
How to do it? We have to use a link tag, with rel set to stylesheet and href set to the path of our CSS file. It can be a relative or absolute path, or even a file on an external server. You must put this tag in the head, otherwise it won’t work!
So here’s an example.
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body>
... some content ...
</body>
</html>
Easy enough. Always follow this approach, as this is the best practice. Even more, that’s the approach we are going to use in our Full Stack Development Course!
CSS Tutorial: How to Write CSS Code
The Basics of CSS
CSS is extremely simple to understand because it works with a set of rules, and each rule has only two elements, the selector and the style block.
The selector, which identifies what element or elements should receive these rules.
A set of one or more styles to apply to all the elements identified by the selector. All the styles, together, form a style block.
So, you just write your selector and then a block opened and closed by curly brackets. Inside those brackets, you enclose all the style rules you want to apply to that selector. In other words, you’re saying “to this selector, apply everything that is within those curly brackets”.
Inside those brackets, you are going to have one or more style properties. Each property is composed of two values, which you divide with a colon. On the left, you have the name of the property you are setting, and on the right the value you want for that property. Furthermore, you should always end every property with a semicolon, so that’s separated from the next one. You need to do this always, even if you have just wan property.
An example of property can be color: red;, where color is the name of the property, and we tell we want it to be red.
The Basics of CSS Selectors
So, the first thing we want is to select any HTML item we have in our page. We have a CSS tutorial dedicated to CSS selectors after this one, but we should at least grasp the basics now.
You can mainly select an HTML item based on the tag name, ID, and class properties, or a combination of those.
To select by tag name, you simply write the tag name as a selector. So here are a few examples of that.
p {}
div {}
body {}
ul {}
If you want to select by class name, you simply use the tag name prepended with a dot. The dot is important because in this way the browser knows it shouldn’t look for a tag, but for a class instead.
.my-class {}
Finally, you can always select by ID. To do that, we need to use the name of the value of the ID, prepended with #. Again, this tells the browser to look for an ID, not for a tag or a class.
#my-id {}
We can combine all three together simply by chaining them to one another. Always do that from less specific (the tag, because there are many items) to the most specific (the ID, because there is only one).
p.my-class#my-id {}
In this way, we are going to select only the paragraphs that have the class my-class and the ID my-id. If even one of those things isn’t true, the rule won’t apply to that element.
Obviously, there is more with selectors, but we will see that in another CSS tutorial.
Common CSS Properties
With CSS, you have tons of property. Face the reality: you probably won’t remember all of them straight away. That’s totally normal, you will have to search and search, and search again. Yet, with practice, you will interiorize most of the properties.
Today we are going to show you the ones you will need most of the time. Then, in further CSS tutorials, we will expand with the most important and complex ones. So here, in this CSS tutorial, we grouped the properties for their category.
Add some color
Here are some quick examples to get you started.
| Property | Description |
|---|---|
color: red; | Make the color of the text red. |
background-color: red; | Make the background of the entire element red. |
We have only two properties in this section. With color, we define the color of the text. Instead, with background-color, we define the color of the background of the element.
You can provide colors as words (e.g. red, blue, green), but that’s not a good practice. You won’t know exactly which gradient it will appear, the browser will choose. Instead, you should provide hexadecimal colors.
Hexadecimal colors are a way of representing colors by telling how much red, green, and blue you should combine to make them. You tell that by defining the amount of each of these three basic colors with a number, represented in hexadecimal. Unlike decimal digits, which goes from 0 to 9, hexadecimal (hex) digits go from 0 to F (16 digits in total = hexadecimal). You have two digits for each base color: red, green, and blue in order. And, you have to prefix that with a # so that the browser knows we’re talking about hex.
So, an example of Hex color can be #FF0000, which is bright red (red at maximum, the other two at zero). Don’t worry, you can use software like Photoshop, Paint.NET, or even some online tool to pick hexadecimal colors from a graphic interface, or even from a picture.
Display
The display property is quite tricky, it tells how the element should appear. It’s easy to understand, but hard to master. Yet, it’s one of the key property to achieve complex layouts and deserves a tutorial all by itself.
Here, the basics.
| Property | Description |
|---|---|
display: block; | This item is a block, it should appear as standalone. Thus, the next item must appear on the line below it, and the previous item should appear on the line above it. No item can be on its right or left. |
display: inline; | Treat this item like a word in a text, can have other items around it. |
display: inline-block; | Behave like inline for other items around it, but like block for items contained. |
display: none; | Totally hide the element for the page. While it may seem nonsense at first, it is crucial for items that we want to appear and disappear (e.g. like menus). |
Play with this a little, and you will definitely learn more!
Add some space
| Property | Description |
|---|---|
padding: 5px; | Distance between the borders of this element and the elements that it contains. |
margin: 5px; | Distance between the borders of this element and other elements around it. |
width: 100px; | Set the width of the item. Doesn’t work for inline elements. |
height: 100px; | Set the height of the item. Doesn’t work for inline elements. |
max-width: 900px; | If you want, you can avoid setting the width to let it grow as the content grows but put a cap to it. |
max-height: 500px; | If you want, you can avoid setting the height to let it grow as the content grows, but put a cap to it. |
You can provide distance in many ways. In pixel (px), inches (in), or in em or rem (two typography units), but also in percentage (%). Note that percentage works only if you set the width of the element is not dynamic (i.e. you can’t use display: inline).
If you provide only one number, all the paddings or margins (top, left, right, bottom) will have the same. You can provide two values (the first for top and bottom, and the second for left and right). As an alternative, you can set specific properties (e.g. margin-bottom, margin-top, margin-left, margin-right, padding-bottom, padding-top, padding-left, and padding-right).
A tip: you can use the value of auto to let the browser figure out the margins (you can do also with padding, but with margin it’s more important). If you set left and right margin to auto, and the element has not a dynamic width, it will appear in the center of its parent element.
Fonts
| Property | Description |
|---|---|
font-family: 'Arial', sans-serif; | Set the type of font you want to use. |
font-weight: bold; | Make the font bold (or light). You can even provide a number if your font support weight by number, generally in the order of 100 (e.g. 300, 400, 500 etc.) |
font-style: italic; | Apply a particular style to the font. Common to make it italic. |
line-height: 1em; | The height of one line of text. You can use to define how much space between lines. |
font-size: 1.8em; | How big the font should be. |
Just one not here. For the font to work, it must be installed on the computer of the user. If not, we need to provide the font file, and we will see a tutorial for that. However, always use a catch-all as a precaution.
In other words, when you specify the font-family, you can list multiple fonts (separated by a comma, each font name between quotes). The browser will try to use the first, and if not available will go to the second, and so on until the end.
If no font is found, the browser will fall-back on a default font that you can’t predict, each browser has its own. But at least, you can specify the type of font you want, among serif, sans-serif, and monospace.
CSS Borders
| Property | Description |
|---|---|
border: 1px solid #000000; | Specify a border to place around the element by providing its width, the type of line (solid, dotted etc.) and the color of the border. |
border-radius: 5px; | By default, borders have edges. If you want them to have a radius, use this property. |
If you want to your element to have a border, you can provide it by specifying its size, type of line, and color.
Furthermore, you can specify a radius for your four edges. That may be important even if you don’t have a border, particularly if you have a background. Just like margin and padding, you can provide a different radius for each different corner. Just use border-radius-top-left, border-radius-top-right, border-radius-bottom-left, and border-radius-bottom-right.
An example of CSS file
Below, an example of a CSS file to show what it looks life. Of course, for a real website, such file would be way bigger.
p {
font-family: 'Georgia', serif;
font-size: 1em;
line-height: 0.95em;
padding: 0.6em;
margin-bottom: 0.6em;
color: #0d0d0d;
}
h1 {
font-family: 'Arial', sans-serif;
font-size: 0.8em;
font-weight: bold;
margin-top: 2em;
margin-bottom: 0;
padding: 0 0.6em;
}
header#top-header {
display: block;
width: 100%;
height: 60px;
background-color: #0d0d0d;
color: #fefefe;
padding: 0.6em;
}
Try It Yourself!
You will never rember everything you see unless you try it on your own. So here we have a little exercise for you. In fact, if you are following the Full Stack Development Course, you already have a website from a pretend bakery store.
At this point, our website has no style, but we can add some with the file css/style.css. Edit this file to make it something nicer. Here we have the result we are looking for in the “about” page.
Still quite ugly, isn’t it? Yeah, but at least we got the basics. With the additional CSS we will learn in the upcoming tutorials, we will transform this in a professional website.
Try to do it on your own, and it doesn’t have to be identical. Once you feel confident, check the solution below.
Our example CSS
Okay, below the CSS we used to create that page.
body {
padding: 0;
margin: 0;
font-family: 'Georgia', serif;
color: #1E2019;
}
a {
color: inherit;
}
header {
margin: 0;
padding: 0.6rem;
display: block;
width: 100%;
height: 60px;
background-color: #955E42;
color: #E6CCBE;
}
footer {
margin: 0;
padding: 0.6rem;
display: block;
width: 100%;
background-color: #955E42;
color: #E6CCBE;
}
.content-area {
width: 100%;
}
.content {
padding: 0.6rem;
max-width: 1000px;
margin: auto;
margin-bottom: 4rem;
}
The CSS code is straightforward, but we are in a CSS tutorial after all. So here are the key takeaways you should understand.
- We remove margin and padding from the body so that we are sure the header sticks to the very top.
- The links (
a) are set tocolor: inherit, meaning that they take the color from their parent element. In this way, we avoid the ugly blue. - To make the header and footer large as the entire page, we make them blocks with the display property.
- As we want to ensure the content is centered, first we make the content area the width of the page. Then, we put a
max-widthon the content, so that it can grow but up to a cap. The margin set to auto will take care of the centering.
Conclusion
In this brief CSS Tutorial, we got started with CSS, but this is just the beginning. The goal of this post is not to make you create stunning web pages, but rather to help you grasp all the concepts of CSS.
Now that you do, we can focus on more advanced parts of CSS so that you can actually make amazing websites.
As always, check the entire code for this tutorial on GitHub: for the entire code of all the tutorials, take a look at alessandromaggio/full-stack-course. Instead, for the code specific of this tutorial, take a look at this commit.
One Response
Comments are closed.