CSS Tutorial 1
A beginners guide to getting started with CSS
Last updated on July 28th, 2021
This is a complete beginners guide to CSS. You won’t have ever needed to touch a line of CSS code previously to understand it, you will, however, need a basic knowledge of HTML to get the most out of it.
If you haven’t read either of these HTML tutorials (HTML part 1 – HTML part 2) then please go and do that now and then come back to this CSS tutorial.
So what’s the difference between HTML and CSS?
The short answer is HTML is used for the structure of a web page and CSS is used for style (its actually quite a bit more complicated than that but that explanation will do for now). For example using HTML we can define the most important header on the page (with the H1 tag) but with CSS we can tell that H1 to be purple and bold with a size of 40 pixels.
Styling Text
Let’s get started with the basics of styling text; font-family, colour, weight, style and size. In the codepen below we’ve applied five different CSS values to change the appearance of the H1 tag.
See the Pen Basic CSS by Bryn (@goldenbolt) on CodePen.
The same CSS rules can be applied to any HTML tag (p, ul, li etc.). Have a look at this excellent style guide from codrops for more details about individual elements.