CSS Tutorial for Beginners

CSS For Beginners - Website design & development

In this tutorial we shall look at how to apply css styles to web pages. If you are following along with the examples, please first create a folder on your desktop and call it “examples” or what ever you’d like. This tutorial also assumes you have very basic knowledge of how to create and edit an HTML file. You can read about how to work with HTML in our HTML for absolute beginners tutorial.

The first thing we want to do is create our HTML file that the styles will be applied to so lets do that now. Create a file called “index.html” in your examples folder and add the following html to the file. Once you have created the HTML file, go ahead and also create a file in the same folder called “styles.css”.

Creating the HTML

Once you have your files created, inside your index.html file, create the basic HTML structure then link to the stylesheet by adding a resource link between the “head” tags. Your HTML file should look like this:

Now, between the <body> tags add the following. Notice the class="main-section" attributes. This class will be used to reference the section element:

When previewing the file in your browser, it should look something like this:

Webpage design with no CSS styles applied

Creating the CSS

Now that we have our HTML ready, open up the “styles.css” file in your editor and add the following code:

As you can see, we have referenced the HTML elements such as <footer> and added the styles to it. We have also referenced the class applied to <section> by using .main-section. Your page should now look like this:

Webpage design with CSS styles applied

Homework

Now that you know how to create a very basic HTML page with CSS styles applied to it, go experiment with adding different styles. Try also, removing styles and trying to break it to get a better understanding of what each line of code does. You can also right click on any webpage, in most browsers, to inspect elements on the webpages to see which styles they have applied and how they have acheived a specific style.

Happy Coding!

Leave a Reply

Need a website? Get in touch with us today for a free quote. Get a Free Quote