CSS defines the way things look on your websites. HTML is your content, JavaScript adds interaction, but the appearance comes down to CSS. CSS is super powerful, and has a ton of awesome stuff built in. This post will take you from introductory syntax through creating layouts and making sites responsive!
Syntax
CSS is comprised of selectors and declarations. Selectors are how we tell CSS which elements to apply styles to. Declarations are the actual styles that will be applied for that element, i.e. they are everything within the braces. Within those declarations, we have properties and values. The properties are the type of style we are applying, the value is what we are actually applying.
The above CSS is saying, make the font color for all h1's blue. The h1 is the selector, the declaration is everything between the braces, the property is color, and the value is blue.
One final piece of CSS syntax is comments - these are ignored by the browser -- they are just there for humans to document their code. In CSS these look like the following:
/* this is a comment */
Selectors
In CSS, we will use selectors to specify which HTML elements we want to style. Sometimes, this will be every element on the page. Other times, we will only want to select certain elements.
Sometimes, we will want to select each instance of an element on the page, for example, all h2's. We can select elements with their names!
h2 {
color: blue;
font-family: sans-serif;
}
Sometimes, we will instead want to select groups of elements -- say we only want certain paragraphs to be bolded, we can use classes to differentiate between those paragraphs.
<h2 class="center">Hello World</h2>
<h2 class="center">Hello World</h2>
<h2>Hello World</h2>
We differentiate element and class selectors by putting a . before the class name in CSS -- that way CSS knows we are looking for a class named center instead of an element!
.center {
text-align: center;
}
Now, the first two h2 tags with the center class on them will be centered, and the third, without that class, will still look normal.
There are also some more complex selectors, such as:
h1, h2, h3 {
/* The commas allow you to group selectors! In this case, all h1-h3's will be blue */
color: blue;
}
h3:hover {
/* pseudo-classes allow us to select elements in certain states. So, in this case, when an h3 is hovered, it will be pink! */
color: pink;
}
Here's more about pseudo-classes, and here's an awesome game to practice with more complex selectors.
You may have used IDs for JavaScript code or other web development; however, I don't recommend using them for CSS, since they are only on one element and you want your code to be reusable!
Properties
Let's talk about the basic properties in CSS and how you can use them! We'll go into layout, which tends to be a little trickier, further down in this post, but for now, we'll go over color and text styling!
Color
There are a couple ways you can add color to a document using CSS, including text and backgrounds. Also, there are a couple of ways to represent colors in CSS.
The first is using named colors. There are 140 colors with names in CSS, these allow you to just put in a name and use them!
.red {
background-color: tomato;
}
But — there are a lot more than 140 colors out there, so we also have a few more complex ways to represent more colors as well. These are based on the amount of red, green, and blue that comprise a color. Imagine you had three lights, one of each of these colors, and a background. If all three lights were off, then the background would be black. If all three were turned all the way up, the background would be white. And, if one of the lights was turned all the way up but not the others, the background would be that color. Then, the lights can be turned up in combination to create any color.
The RGB, RGBA, and hexadecimal colors are all derived from the above color combinations. Each color of the red, green, and blue "lights" can be given a value from 0 to 255, so that each value can be stored in one byte. In RGB and RGBA, you use base 10 numbers to represent the values, and in hex values, you use the hexadecimal system. RGBA values also have "alpha" values, which are the opacity of the color.
You can color text, backgrounds, borders and more with the above system!
Text
Another really important CSS feature is styling text. You can choose fonts, text spacing, and sizing.
There are some fonts that are built into most computers, which are referred to as web safe fonts. You can also add fancy fonts by including a font file. You can use sites like Google Fonts to find ones that you like for your sites.
body {
/* if the user's computer has Arial, use that, if not Helvetica,
then fall back to the operating system's default sans-serif font */
font-family: Arial, Helvetica, sans-serif;
}
You can also change the size of text in a couple different ways — the first is pixels — which is usually the most beginner-friendly, then there's also ems and rems, which allow you to scale fonts differently. You can read more about those here.
The Box Model
CSS operates with the box model. First, you have your content. If you want to add spacing around that content within the background or border around it, you use padding. Then, you can add a border, which will normally be colored differently and patterned. Finally, outside of the background and border is the margin — this will be spacing between our element and other elements on the page.
One quick helpful margin snippet is margin: 0 auto;, which allows you to center most elements horizontally. The 0 value means that there is no margin on the top and bottom of the element. Auto adds equal margin to both sides of the element, centering it in its container.
Display
One of the more important CSS attributes is display. There are a few values you can use here. The first is none which hides the content. This can be helpful for hiding some content on different size screens or due to JavaScript events. inline removes linebreaks after elements, and it also means that adding height and width won't have an effect. blockmeans that the next element will be on the next line. inline-block is similar to inline, though you can apply height and width to the element. Fixed and sticky displays make elements stay in positions These are generally the most used and most traditional display properties, however, two more recent ones have really changed the layout game.
Layouts
Usually one of the trickier parts of CSS is creating layouts for your webpages. Getting things aligned properly used to be much more difficult than it is now, due to CSS Grid and Flexbox, two newer CSS display attributes . If you would like to learn them in more depth, CSS Tricks has great guides for both Grid and Flexbox. I'll go over a few tricks here too!
In order to center an element horizontally, you can normally use either text-align: center; or margin: 0 auto;. But — vertical centering used to be more difficult. Good news! Flexbox made it a lot easier. The following snippet placed on the parent of the element you're trying to center will center it both horizontally and vertically.
parent {
display: flex;
align-items: center;
justify-content: center;
}
Bonus: here's a video version of this example!
You can create rows of elements with CSS grid really nicely.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
The above code generates three columns of equal size on the page. The grid gap adds spacing between each column.
Bonus: here's a video version of this example!
In addition, they make the "holy grail" three column plus header and footer layout a lot easier — check out this post for a couple ways on how to acheieve it with CSS Grid!
Defaults
Sometimes, there may be styling on your page that seems to be coming from nowhere. The browser actually has some styles pre-written for you. For example, there's an 8px margin on the body, a 2px border on table blocks, and headers have larger fonts. Sometimes you don't want these pre-loaded styles, so you can override them!
Cascade
One of the more notorious and occasionally controversial CSS features is the cascade. This mimics inheritance in object-oriented programming, and it defines how styles override one another. If developers use a CSS library, such as Bootstrap, this may be more difficult to navigate.
CSS selectors have various levels of specificity which define how styles are overridden when more styles are applied.
If, for example, we have the following CSS code:
body {
font-family: sans-serif;
}
All of the text with in our body tags will be sans-serif — even if they are also within a h1 or p or any other tag. But, sometimes we'll want h1's to be serif instead, which we can add like so:
h1 {
font-family: serif;
}
Now our h1's have a serif font, all other tags within the body are still sans-serif.
Also, different selectors have different levels of specificity. ID's are the most specific, though I generally don't use them for CSS since using them isn't very modular, then classes, then elements themselves, then their parent elements. So, if I add styling to a class, it will override styles added to the element. Using the cascade can be tricky, but it makes your CSS more reusable.
Media Queries
Sometimes you will want certain attributes to change depending on screen size. You can do this using media queries.
The following CSS selectors will only apply when the screen is smaller than 800px across. You can change to min-width for mobile first!
@media only screen and (max-width: 800px) {
body {
background-color: MediumOrchid;
}
}
Animations
CSS allows users to create animations with keyframes. You can specify attributes at certain points in the animation, how long that animation will take, and the timing function performed.
In addition, you can add transforms that are applied when a pseudo-selector is added, such as an element is hovered over. These are super performant!
Read More
This post is barely scratching the surface of all the things you can do with CSS, it's super powerful and a very important part of the web. Here are some resources where you can dive a little deeper
Top comments (26)
This article describes everything I spent almost one month to teach a junior developer at work. The best of Ali 👏👏👏.
Hey, Im a bit late, but also confused. CSS is not something you should know before getting the junior developer job? Im asking because I myself want to become a front end developer and get a job as a junior developer, but I thought one needs to know html,css and javascript before applying for a job.
There are a lot of Senior developers - who can barely write basic CSS.
👏
One thing I always like to mention with CSS too is pick your HTML elements for semantics, then style them with the CSS how you want. A super common example of this is using different the different header tags -- use an
h2for where you are in the document/outline of content, for example, not because you want something about that size, etc, use tables for displaying data, etc etc; you can do so much with CSS that there's no reason not to use it to its full potential to style those semantic elements however you want.Ha, you just took me back nearly 20 years -- I had forgotten there was a <center> element. Interestingly,
Great tutorial Ali! I didn't know about the
frunit at all, thanks!I read this tutorial to make up for it.
They make developer lives so much easier :D
Liquid syntax error: 'raw' tag was never closed
Hey, I wouldn't suggest this method for a couple reasons:
CSS in JS is a valid thing, but I would use a library built for that so that your code is more performant and follows best practices!
Hi Ali, Dirk,
I think you've missed a very important argument why you shouldn't do this at all. What about a client ho has disabled javascript (because reasons)? He/she is able to see your page, but with the wrong styling.
JS is good for doing the extra mile, please use CSS for the things it was intended. We can even make animations and transitions with CSS today!
Good luck :)
Very useful post. Thank you. By the way, I found that link "140 colors with names" is broken. Hope you will fix it) Good luck
Great catch, thanks! Should be good now!
Ali, do you plan to do cycle of posts like "from zero to hero"??? I love it and think it would be helpful for me and others, who is new one for webdev
Thanks!! Maybe -- I have done one other like this -- my react guide. They take 20+ hours to make, so definitely not an every week type thing, but I have fun making them!
As someone who works as a back-end developer I always rolled my eyes whenever I had to do something on the front-end (especially if it had something to do with CSS). After discovering Flexbox it's definitely no longer the case. Your article reminded me that I haven't tried CSS Grid yet, now I'm even more interested to check it out! 😁
{pre-read comment} - This looks like exactly the kind of thing I've been looking for. A simple intro to CSS syntax and what it's used for! Thanks so much, can't wait to read it!
Not sure if this would meet your criteria for inclusion, but a useful (relatively recent) feature of CSS that everyone should be using more:
developer.mozilla.org/en-US/docs/W...
It will save the children of the next generation from preprocessors! :)
As always great post Ali! 👏👏