Basics of CSS for Beginners

#webdev #beginners #css #codenewbie

In this blog, I will introduce you to the very basics of CSS. First of all, what does CSS stand for?

CSS stands for Cascading Style Sheets. It is a style sheet language which is used to describe the look and formatting of a document written in HTML. With CSS we can play with the whole page layout, we can change the colours of backgrounds, fonts, font sizes and many more things.

You can write your CSS within the the <head> section of your HTML document but in most cases you will create a CSS folder.

Basic Example:

p {
color: blue;
font-size: 20px;
text-align: center;
}

In the code block above, I am styling the paragraph (<p>) in CSS. I changed the text colour to blue, I also made the font-size 20 pixels. Also I aligned the text so that it's in the centre of the page. There are many more styling attributes that you could style in CSS and I will go through them in the next blog, but here is another example with a little more styling:

h1 {
color: orange;
font-size: 35px;
text-align: center; 
font-family: "Lucida Console", "Courier New", monospace;
}

p {
color: blue;
background-color: orange;
font-size: 20px;
text-align: center;
font-family: "Times New Roman", Times, serif;
}

In the example above, I added a background-color, which is the background colour of the paragraph. I also added a font using font-family. There are many different fonts that you can use.

In this very short blog, I wanted to give you a very basic introduction to CSS by using a few examples. There is so much more to CSS which I will start to explain in the next blog.

Thank you for reading, and I hope this basic introduction has helped, in the meantime...

Keep Coding!! 💻

FUN FACT: CSS was first intended in 1994 by Håkon Wium Lie while working at CERN with a computer scientist Tim Berners-Lee.