Starting to Style your Webpage Using CSS
Video
Text Tutorial
In this tutorial, you will learn a language called CSS (Cascading Style Sheets) to use with HTML and make a colourful and exciting webpage! You will learn how to change sizes, colours and background-images in HTML elements and transform a page from boring to exciting! Be creative and let your imagination take over, and see what you can create!
You will need to know HTML before this tutorial; please find an HTML tutorial here.
Final Result
Setting up the page
Open your code editor, create a new file then save and open your file in your web browser as shown in the previous tutorial. Remember to save it as an HTML file with .html. Add the following HTML code to create a simple page with two headings and a paragraph:
<!DOCTYPE html>
<html>
<head>
<title>Styling the Page!</title>
</head>
<body>
<h1>Styling a Webpage using CSS</h1>
<h2>Make it colourful!</h2>
<p>Today, I'm using a language called CSS (<u>C</u>ascading <u>S</u>tyle <u>S</u>heets) to make the page <b>colourful</b>. CSS can also change sizes, as well as many more properties!</p>
</body>
</html>
Your page will look like this:
This looks boring and simple, while we want it to be colourful and exciting! Let’s use a language called CSS to do that.
CSS using the style attribute
One way of adding CSS into a webpage is using the style attribute, like this:
[opening or self-closing tag]
<tag style="css">
css is where CSS code would be typed. Let’s add a paragraph and try it out!
Adding the paragraph
Add this HTML code inside the <body> element:
<p style="">CSS with style attribute.</p>
You have added a paragraph with an empty style attribute. To add some styles, you need to learn how CSS works!
CSS Properties
CSS is a code used to style HTML elements. It can change their sizes, fonts and colours, but it always follows this structure:
property-name: value;
[more properties and values]
The property-name is the name or label of the property you are changing, and it normally is made of one word or more joined with a dash (-).
Styling the paragraph
Find the paragraph you coded earlier with the style attribute. In between the quotation marks (“), let’s type some CSS:
[style attribute's value]
color: blue;
This will change the color (remember the American spelling) property to blue and make the text become blue, like this:
Now, let’s add the background-color as yellow.
[style attribute's value]
color: blue; background-color: yellow;
The text-align property can have a value of left (default), center or right. Let’s see what it does.
[style attribute's value]
color: blue; background-color: yellow;
text-align: [left, center, or right];
text-align: center;
text-align: right;HEX Colours: more specific
Sometimes, you may want colours that are more specific than colour names like yellow or blue. To do this, search the web for “hex color picker”. Select a colour and copy the HEX code (the one with the # before it), like this:
Now, paste the code (e.g. #ffdf78) as the value of the color or background-color property and your specific colour will be shown.
[style attribute's value]
color: blue; background-color: #ffdf78;
text-align: right;
Using the font-size property
Let’s add a font-size property to the paragraph to change the size of the text. The value is a number followed by some letters which specify the measurement, for example:
Pixels (px)
[style attribute's value]
color: blue; background-color: #ffdf78;
text-align: right;
font-size: 100px;
font-size: 100px;Points (pt, the usual measurement people use for text)
[style attribute's value]
color: blue; background-color: #ffdf78;
text-align: right;
font-size: 20pt;
font-size: 20pt;CSS using the <style> element
CSS can be added to a page using the <style> element rather than the style attribute, which is useful for styling multiple elements at once. Before we see how to do this, let’s add another HTML paragraph with no style attribute.
Adding the paragraph
Add the following HTML code to your <body>:
<p>Let's make <b>all</b> the paragraphs have green text and a pink background colour!</p>
Styling all the paragraphs
First, create a <style> element in your <head>. Inside it, type the following CSS:
p {
color: green;
background-color: pink;
}
The p before the opening curly bracket shows that you are styling all <p> elements, while the properties and values are inside the curly brackets. The page will look like this:
All of the paragraphs have been styled in one piece of code!
Adding more paragraphs
Add the following HTML code to the <body> of the page.
<h2>Some more paragraphs: </h2>
<p class="odd">Paragraph 1 (odd)</p>
<p class="even">P2 (Even)</p>
<p class="odd">P3</p>
<p class="even">P4</p>
<p class="odd">P5</p>
You will have noticed that all the paragraphs have a class attribute which is either odd or even. They will be useful for the CSS code, and are another way of identifying multiple elements. They are called CSS classes.
CSS classes
At the moment, the classes have not changed the paragraphs, and they still have green text and pink backgrounds, like the other paragraphs. However, we can style the odd and even paragraphs differently using their classes, which override the element type styles (e.g. ones given to every p element). Add the following code to your <style> element:
/*odd class*/
.odd {
text-align: left;
color: blue;
}
/*even class*/
.even {
text-align: right;
color: gold;
}
/*odd class *and* even class*/
.odd, .even {
background-color: white;
}
The piece of CSS code before the { is called the selector. The . before the class name specifies that you are styling a class as the selector and a , between multiple classes (or any selector) means you are styling both classes (or selectors) at once.
The comments, typed like /*this*/ in CSS, do not change the result and are just to help the developer.
This would be the result of this CSS:
odd paragraphs are styled differently to the even ones in some ways, but even and odd both have a background-color of white.Adding an id
IDs are used in HTML and CSS to style one element on a page from the <style> element. They are like classes, but multiple elements cannot have the same ID. Let’s add an ID to the top “Make it colourful <h2>“, so its code will look like this:
<h2 id="mainh2">Make it colourful!</h2>
Please note that the id or class of an element must not contain spaces.
Styling using an id
Add the following code to your <style> element:
/*mainh2 id*/
#mainh2 {
color: blue;
}
Id selectors always start with a #, to show you are styling an id. The mainh2 heading will have changed:
Using a <div> with an id
<div> elements do not do anything to their content; They are designed to be used with CSS. Let’s surround the odd and even paragraphs with one, setting its id to parags.
<div id="parags">
<h2>Some more paragraphs: </h2>
<p class="odd">Paragraph 1 (odd)</p>
<p class="even">P2 (Even)</p>
<p class="odd">P3</p>
<p class="even">P4</p>
<p class="odd">P5</p>
</div>
Now, let’s add this to the <style> element to style it.
/*parags id using div*/
#parags {
background-color: yellow;
}
This is the same as styling a normal id, but you have learnt how to use the HTML <div> element. This would be the result:
background-color as white.Spacing it out
As well as colours and fonts, CSS can change sizes of elements and spaces between them. Let’s learn some new properties.
Adding the element
First, add a <div> with an id of spaces to your <body>:
<div id="spaces">Spacing it out</div>
Then, add this to your <style> element.
/*spaces id*/
#spaces {
background-color: lightgreen;
color: darkgreen;
text-align: center;
width: 50%;
height: 50%;
}
/*See lower down to know what this does*/
body, html {
height: 100%;
}
This width and height properties are ones we have not used before, but you can probably guess what they do. Remember to add a measurement like px after the number when using them, like we did with the font-sizes. Let’s see what they can do:
The width property
width: 200px;(200 pixels) will not change the width of the box when you resize the browser.
width: 50%;(50% the width of the element it is inside (i.e. <body> in this case)) will change the width of the box when you resize the browser. Try it out!
Please Note: You can use vw to mean % of the width of the viewport (visible page), rather than % of the element it is inside like %
The height property
height: 50px;(50 pixels) will not change the height of the box when you resize the browser.
height: 50%; in the videoheight: 50%;(50% the height of the element it is inside (i.e. <body> in this case)) will change the height of the box when you resize the browser, but only if you add this piece of code in the <style> element:
body, html {
height: 100%;
}
Please Note: You can use vh to mean % of the height of the viewport (visible page), rather than % of the element it is inside like %
Adding another element
Add this to the <style> element, so you can add a spacesb id element to the page to be styled the same as the spaces id element:
/*spacesb id*/
#spacesb {
background-color: lightgreen;
color: darkgreen;
text-align: center;
width: 50%;
height: 50%;
}
Then, edit the spaces element so out is in a <div> with an id of spacesb:
<div id="spaces">Spacing it <div id="spacesb">out</div></div>
This is what the result will be:
spacesa and spacesbIf you edit the CSS of spacesb so you can see the element as a box by changing the colours, this is what you will see:
/*spacesb id*/
#spacesb {
background-color: lightblue;
color: darkblue;
text-align: center;
width: 50%;
height: 50%;
}
The width of spacesb is 50%, so it will be 50% of the width of spaces. The same applies for the height.
Space near the edge
Let’s edit the CSS of spaces and add two new properties: padding and margin. The padding property adds space (10 pixels in this case) between the text and the edge of the box, while margin adds space between the box and the edge of the page/containing element.
/*spaces id*/
#spaces {
background-color: lightgreen;
color: darkgreen;
text-align: center;
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
}
Boxes and borders
Let’s add a border to the #spaces element, by adding this CSS code to the code above:
/*spaces id*/
#spaces {
background-color: lightgreen;
color: darkgreen;
text-align: center;
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
border: 3px dashed gold;
}
The border property’s value is made up of three parts: 3px (the width of the border), dashed (the style of the border, which can also be solid, dotted or double), and gold, the colour of the border. This will create the following:
Add a margin, border and padding to the #spacesb CSS code, so the code becomes this:
/*spacesb id*/
#spacesb {
background-color: lightblue;
color: darkblue;
text-align: center;
width: 50%;
height: 50%;
border: 5px dotted red;
margin: 5px;
padding: 5px;
}
The headings need styling…
…so you can use the properties you have learnt so far to make them look better, by adding this CSS code to the <style> element:
h1 {
color: navy;
background-color: lightblue;
margin: 5px;
padding: 5px;
text-align: center;
border: 5px solid navy;
}
h2 {
color: navy;
background-color: lightblue;
margin: 3px;
padding: 3px;
text-align: center;
border: 3px solid navy;
}
Rounded corners
There’s one more thing you might want to do with borders, which is to add rounded corners. Luckily, CSS has a useful property for that: the border-radius property! Let’s add it to the #spaces element.
/*spaces id*/
#spaces {
background-color: lightgreen;
color: darkgreen;
text-align: center;
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
border: 3px dashed gold;
border-radius: 10%;
}
The border-radius property’s value is a measurement, like the height and width properties’ values.
Now, let’s try something slightly different…
Elements inside elements
Give the first paragraph an id, like this, so you can change it in the <style> element…
In the <body>:
<p id="p1">Today, I'm using a language called CSS (<u>C</u>ascading <u>S</u>tyle <u>S</u>heets) to make the page <b>colourful</b>. CSS can also change sizes, as well as many more properties!</p>
In the <style> element:
/*u inside #p1*/
#p1 u {
color: red;
text-decoration: none;
}
/*b inside #p1*/
#p1 b {
color: blue;
font-weight: 100;
}
What does this do?
The #p1 u selector selects all <u> elements inside the #p1 paragraph; The #p1 b selector selects all <b> elements inside the #p1 paragraph.
In CSS, if you type two selectors with a space between them, you are styling the element(s) with the second selector inside the element(s) with the first selector.
New properties
This example also uses two new CSS properties:
text-decoration
This property can be underline, overline, line-through, or a combination, separated by spaces. It can also be none, which removes any underlines (or overlines etc.).
font-weight
This property defines how bold text in an element is. It can be any number from 100 to 900, or a word like normal or bold.
The paragraph now:
This has styled the <b> and </i> elements inside the #p1 paragraph, but not the ones outside it. To prove this why don’t you look at the bold ‘all’ further down the page?
Background images
The final feature of CSS you will learn in this tutorial is how to make elements have background images.
Firstly, complete the #spaces part of the <style> element as shown below.
Then, find an image you have permission to use, right-click it, copy its address and paste (Ctrl+V) it in your code editor, where I have typed address (remember the double quotes ("")). This is very similar to adding images in HTML, which I covered in the last tutorial.
/*spaces id*/
#spaces {
background-color: lightgreen;
color: darkgreen;
text-align: center;
width: 50%;
height: 50%;
padding: 10px;
margin: 10px;
border: 3px dashed gold;
border-radius: 10%;
background-image: url("address");
background-size: cover;
}
Playing with the background-size
The background-size property can be cover, contain, or auto. Why don’t you change it and try to spot the difference?
And finally…
…you’ve reached the end of this tutorial!
CSS can transform webpages and is the only way to make them colourful and stand out, so it is essential to learn if you want to code an exciting website. In this tutorial, you have learnt how to change sizes, colors, text, borders and background images, but that is only a fraction of what CSS can do.
What CSS Does… in Pictures!
What Next?
Well done for completing this very long tutorial (which had to be very long to fit enough in!), and now you’ve learnt the basics of HTML and CSS, why don’t you see the other tutorials I will publish and choose what to do next? You can code websites with many pages, web apps, and even, with the help of a web server, online multiplayer computer games (or non-online-multiplayer ones if you want an easier and cheaper choice)! All of these need HTML and CSS to work, and now you’ve learnt these languages, why don’t you journey deeper into the world of web development?
For now, if you want to keep using CSS and HTML for a while before learning more, be creative and have fun, and please comment below if you have any ideas for future tutorials. You can follow me to receive updates about new posts straight to your inbox!
I hope you enjoyed learning,
WebCoder49
WebCoder49 