In the previous lesson, you’ve learned some basic HTML. Now we going to make this a little fancier with CSS.

What is CSS?

CSS is the abbreviation for Cascading Style Sheets. It is a language to spice up your HTML and make it pretty. You can give colors to elements, add nice fonts, font sizes and determine the position of elements.

Let’s go!

Let’s start where we left off.

Coloring the background

This is the end result of lesson 1. Let’s make it fancy now. Let’s start with a nice light grey background. We can at this color to the complete document. We just add HTML to our CSS file and give it a color code. Colors are defined in hex codes. To find a color you like find a hex color picker.

Adding font and font size

Now we can add a nicer font like Calibri and add a font size of 14 pixels. If you set the font on a the HTML tag, your entire website will get this font assigned.

Styling the body element

Let’s take this a little further. We can style this body element as well. The text is stuck to the side, so it can use a little padding. Let’s add some margin as well to center it more on the page. I add a border to give it more definition against the background.

Styling headings and text

Now we can style the text. Headings are written between h-tags. There can be only one h1 tag in the whole document. There can be multiple sub headings like h2, h3, h4 etc. Text paragraphs can be put in a p-tag and hyperlinks are wrapped in an a-tag. A hyperlink is default blue with underlining. You can change that with CSS as well. I’ve changed the text-decoration to none and added a different color and font-weight to it.

Next time

In lesson 3 we will discuss classes and ID’s, to make your document even fancier. We will take positioning a step further as well. Till next time!

About The Author

Noraly van der Hulst is a passionate front-end developer. She owns a company called Frontrend and is a new mom. Her free time she likes to spend with her camera and ofcourse her family and friends as well.

Related Posts

Leave a Reply

Your email address will not be published.