When I think of web development, I like to think of it in terms of building a house. When we learn HTML, we are learning how to build the web page from the ground up, framing it with the lumber that will eventually become our end product.
CSS, on the other hand, puts the finishing touches on the home—creates a suitable environment for staging and selling the home. It decorates your text and background, creates your layout, and makes your website responsive and user-friendly. Without CSS, web pages just wouldn't be as professional or beautiful as they are.
In this article, we're going to target CSS—Cascading Style Sheets. We'll give a brief overview and provide some interactive tutorials that will help you level up as either a web designer or web developer!
What is CSS?
CSS was created to help web developers out. As websites were getting more and more complex, the styling was following suit. Prior to CSS, inline-styling was the name of the game, and the repetition of styling common elements in the same way was getting cumbersome for developers. This led to the standardization of CSS in the mid-to-late nineties so that external stylesheets could be used and linked to the HTML.
Cascading Style Sheets was named for the way it evaluates its code. If we have two different rules for a
alt;div> in our code, for instance (assuming they are the same specificity) what happens?
By its very nature, CSS _cascades_—so if both sets of rules are pointing to the same element, and they have the same specificity, the last one written wins. That is, specificity is a way to figure out which declaration block, or set of rules, to use for an element in CSS.
Here is a list of tutorials on the most important things to learn that will help you in your journey to learn CSS and style your website:
First Things First…
Link CSS to HTML
The first thing we need to be able to do to work with CSS is to link a CSS file to an HTML file. This tutorial shows you how to do it!
The next step when learning CSS is to understand what CSS selectors and declaration blocks are and how they are used to style your web page. Here, we discuss the differences between elements, classes vs ids, and universal selectors, as well as some best practices for grouping CSS code together.
Layout Properties In CSS
One of CSS’s primary responsibilities is the layout of our web page. There are several properties that assist in that regard: position, display, margin, border, padding. The next several tutorials are dedicated to these components of layout.
The CSS position property affects where a container appears on the page. We use the position property, for example, to make a footer sticky or to create overlays. This will help you differentiate between the five possible values for position.
When we want to affect how a container lays in relation to other containers, we use the CSS display property. Here, we will go over the inline, inline-block and block values that can be assigned to an element.
The CSS box model is the basis of how we think about layout in CSS. It’s made up of content, padding, border, and margin. Here we will cover the differences between each and how to use them.
The box model was a great start when it comes to how our web page is laid out; however, it could be a little difficult to work with if a design was a little complicated in the layout department. Also, the advent of the smartphone increased the need for another model that improved on the box model. Enter: the CSS flexbox model. It offers flexibility that the box model just didn’t have and makes implementing responsive designs simpler.
Along with flexbox comes the need to be able to control CSS on various devices. Here we will talk about CSS media queries. Media queries basically give us the ability to have different CSS rules run on different device sizes. This gives us more control over how our websites look on smartphones, on tablets and on laptops.
Style Properties In CSS
The other primary responsibility that CSS has is the style of our webpage. There are many, many properties that control how our page can look. Here, we will cover the most important of the properties: color (including background-color) and font-size.
In this article on the CSS color property, we learn about not only color but background-color and how to use it on text blocks.
One of the things we can do with the background, in addition to image and color, is to have some sort of gradient to fill the space. In this post, we cover the CSS gradients that can be used as values on the background. The possibilities include linear-gradient and the radial-gradient. They open up all sorts of color combinations that can be used in lieu of a solid color background or image.
CSS font-size comes into play when we talk about accessibility. Here, we take a look at the different types of font-sizes we can use on text: pixels, rems, ems and vw/vh.
This only scratches the surface of everything that CSS can do for you when it comes to styling your web page. If you feel you have mastered these concepts, I encourage you to look into other CSS concepts like CSS Grid and CSS Animations to become even more of a CSS master!
About the author
Christina Kopecky is a writer at Career Karma where she focuses on coding tutorials and technical articles. (LinkedIn)