CSS tutorial for beginners
CSS tutorial for beginners
The first technology that you can start learning after HTML is Cascading Stylesheets, or CSS. While HTML is used to describe the content's structure and semantics, CSS is used to style and lay it out. You can for instance, use CSS to adjust your content's font, color, size, and spacing, split it into multiple columns, or add animations and other decorative features.
This CSS tutorial for beginners aims to guide you along your path of learning CSS.
Learn CSS
Prior to attempting some CSS, you can learn the basics of HTML. We recommend that you work first through our HTML module Introduction.
If you understand the basics of HTML, we suggest that at the same time you learn more HTML and CSS, moving back and forth between the two subjects. This is because when you apply CSS, HTML is much more fascinating and much more enjoyable to learn, and without understanding HTML, you can't really learn CSS.
You should also be familiar with using computers and passively using the web prior to starting this topic (i.e., just looking at it, consuming the content). As detailed in installing simple software, you should have a basic work environment set up and understand how to build and handle data, as detailed in Dealing with files, all of which are aspects of our Getting Started with the full beginner module on the site.
The next CSS subject for you to focus on with the basics of the CSS language covered is styling text, one of the most popular things you can do with CSS. Here we look at the basics of text styling, including font setting, boldness, italics, spacing of lines and letters, drop shadows and other text features. By looking at adding custom fonts to your website, and styling lists and links, we round off the module.
We have already looked at the basics of CSS at this point, how to style text, and how to style and control the boxes inside which your content sits. Now it's time to look at how to place your boxes, and each other in the correct place in relation to the viewport. We have covered the required criteria so that we can now dive deeply into the CSS layout, looking at various display settings, modern layout tools such as flexbox, CSS grid, and positioning, and some of the legacy techniques that you might still want to know about.