Code your first web page

beginner-css-tutorial

Beginner CSS Tutorial 

In our last Beginner HTML Tutorial we learned how to code our first HTML page from scratch. This is what we got as a result :

Beginner HTML Tutorial result

Check out this Pen!

What we are going to do in this tutorial is add some style to our plain HTML page. There are a few ways to style a page but in this tutorial we will use and attach an external cascading style sheet ( CSS ).

By following this tutorial you will :

  • 1# Get familiar with CSS.
  • 2# Attach an external CSS to your HTML file.
  • 3# Learn about CSS syntax
  • 4# Learn about CSS declarations
  • 4# Style your HTML page. (that you previously made in our last tutorial)

We will take things step by step and i will provide live example together with all the code you will need. By the end of  this tutorial you will have styled your first HTML web page using an external .css file so, lets get started!

First things first, before we start you will need a Text Editor, HTML page and of course a Browser. I suggest that you download notepad ++ and use it (windows users) its free, light and it does the job.
Also,  this is a follow up article so  you should already have  a  folder on your desktop (or anywhere that you like) called  “my first website“.  Inside, there should be a file named (index.html) that we created in our previous beginner HTML tutorial.

Lets say a few things about CSS first.

What is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

CSS Saves us a Lot of time!

CSS defines HOW HTML elements are to be displayed in a browser.

External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! ( and that’s exactly what you will be learning today)

So lets write our first CSS file from scratch ..

Beginner CSS Tutorial start

step 1# Create your external CSS file.

Open your text editor and create new document file>new. Leave it empty for now and just save it.

1# click on save as
2# Choose the folder “my first website
3# Name it style.css and save it. ( using .css extension we let the browser know what kind of file it is)

step 2# Attach an external CSS file to your HTML.

Next we are going to open our index.html file, and connect it with the new style.css file that we just created.

Open the index.html and in between <head> tags, just below the </title>,  add this piece of code:

<link rel=”stylesheet” type=”text/css” href=”style.css”>

Et voilà, you have just linked your HTML to your CSS document. What we used above is also called a Relative path link, meaning that the location of the file ( in our case style.css) is in the same folder as our html file ( in our case index.html).

* we will leave this aside for now and we will come back to it in some other tutorial

Your whole html code should look like this:

<!DOCTYPE html>
<html>
<head>
<title> my first website </title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1> my first page </h1>
<p> html is not hard </p>
</body> 
</html>

Ok, now that we have connected our two documents lets get back to our style.css file and , well.. style our page a little.

step 3# Add some style to your page

Once we have opened our style.css we are going to choose a selector from our html page and add some declarations to it, keep on reading..

Selector

A selector would be a html element that we want to style. Do you remember those: <h1>, <p>, <body> ?

Lets take our heading tag and use it as a selector for styling. Just at the beginning of your style.css file type:

h1

now lets continue by  adding some declarations to it, each declaration is always surrounded by curly brackets and it ends with semicolon, so our h1 will become:

h1 { ; }

Next we are going to write some declarations inside those brackets. When writing a declaration we should bare in mind that it should have a property and a value, our property in this example will  be the color of the text and our value will be grey. So inside those curly brackets i will type this:

h1 { color:grey; }

So to elaborate this simple code i must say that the above consists of: selector, property and value, where the value would be “grey” selector would be “h1” and the property is obviously “color“.

Go ahead and save your files. Now when you open your page you will see that the heading has turned grey.

There are many properties and values that we can experiment with but we are going to leave this for one of the next tutorials.

In this tut lets just add one more property and value to our existing code. As our background is white, the grey colour of the heading text is not realy showing much, so our second property will be the backgound of the <h1> selector :

h1 { 

color: grey ;
background: black ;

}

And that will put our grey heading text on a black background.

*Notice how i used new lines for the values and their properties so i can have a better visual on them.

Go ahead and save your style.css file.

So far you have learned a few things about CSS, created and attached your first  external style sheet. and you have styled your heading text with  text color and background.

Beginner CSS Tutorial End

This is how it should look in your browser. you can check the HTML and the CSS code together with Browser look by simply switching between the HTML/CSS/RESULT tabs below:

Check out this Pen!

In this example we created our CSS file and attached it to our existing html.
We also styled our heading tag by changing the values of its background and color.

This concludes the Beginner CSS tutorial – Code your first web page

check more tutorials here Tutorials

Nikola Petrovic
Get in Touch

Nikola Petrovic

Hi there. My name is Nikola,
I speak English, Greek and Serbian.
As a Web Producer i can deal with almost anything web design & development related.
As a freelancer, I charge only a small portion of the money you would pay to agencies to create your website. Affordable web design doesn’t mean that it will lack any of the advanced features of today’s web technology. We just cut out the cost of the middle man.
Feel free to request a free quote using the form on the right or the one bellow.
Nikola Petrovic
Get in Touch