Easy HTML5 Tutorials Part: 3

Welcome to CSS classes
laptop with logos

In our previous HTML5 tutorials we covered how to build a blank web page that was ready for you to start designing on. In this tutorial we are going to cover how to add styles to the tags  to decorate them so that they can be customized just the way you want. If you need a blank template you can download it from here.

Locate the stylesheet <link> as shown in fig 1.1.

*As you recall in the previous tutorial we created a command line that links an external .css file called “styles” as shown in red to your html page. This allows you to keep your html page clean and uncluttered and all your style commands on a separate page. There are 3 different ways of adding styles to your tags.

1)Classes can be added to any tag by adding class=”xxxxxxxxxxx” to the opening tag. Ex: <header class=”topbox”>

2)ID’s can be added to any tag by adding id=”xxxxxxxxxxx” to the opening tag. Ex: <header id=”topbox”>

3)Styles can be added to main tags such as <body>, <header>, <main>, <footer> etc… without adding any code to the tag.

**As where a class of the same name can be used multiple time on a page, an ID of the same name can only be used once per page.

Very Important – class and ID names can not contain any spaces but you can use dash or underscore in exchange of space if you want and more than one class can be issued to any tag but must be separated by a space.

fig 1.1

<!DOCTYPE html>
<html lang="en-CA">
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>your website page<title>
    <meta name="description" content=""
    <meta name="keywords" content=""
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
    </header>
    <main>
    </main>
    <footer>
    </footer>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js”> </body> </html>

Notice the <head> tag as shown in fig 1.2.

*For this tutorial we are going to omit the rest of the page and just narrow in on the part that we need.

fig 1.2

<header>
</header>

Add the “topbox” class to the tag as shown in fig 1.3.

*To add a class it must be within the brackets of the opening tag

**Also add “Hello World” text inside your header

***A class can be named whatever you want but should have a name relative to what it will do or be placed

fig 1.3

<header class="topbox">
Hello World
</header>

NOTE: Now if you downloaded the blank template it came with a CSS sheet, if not then no problem just open a blank notepad and save it as “styles.css” and make sure that you choose “UTF-8” as the encoding type. You can name your CSS sheet whatever you want as long as it matches with the name in your stylesheet link at the top of your page in the <head> section and make sure you save it in the same folder as your html page.

Now open your CSS sheet and add your “topbox class as shown in fig 1.4.

*All classes must start with a period before the name, have an opening and closing curly brackets after the name and have your properties within the curly brackets. Your properties must have the property name followed by a colon then a space then a value followed by a semicolon.

**Now any tag you add the “topbox” class to will have a red background.

fig 1.4

.topbox {
background-color: red;
}

NOTE: If you save your pages and open your index.html with your web browser it should look like this

Hello World

Add the “white-text” id to the tag as shown in fig 1.5.

*to add an id it is almost the same as adding a class except that you exchange “class” for “id”

fig 1.5

<header class="topbox" id="white-text">
Hello World
</header>

Now open your CSS sheet and add your “white-text” id as shown in fig 1.6.

*All id’s must start with a hashtag before the name, have an opening and closing curly brackets after the name and have your properties within the curly brackets. Your properties must have the property name followed by a colon then a space then a value followed by a semicolon.

**Now any tag you add the ID “white-text” to will display it’s text as white.

fig 1.6

.topbox {
background-color: red;
}

#white-text {
color: white;
}

NOTE: If you save your pages and open your index.html with your web browser it should look like this

Hello World

Now open your CSS sheet and add your “header” as shown in fig 1.7.

*All main tags do not require anything before the name, but just the same must have an opening and closing curly brackets after the name and have your properties within the curly brackets. Your properties must have the property name followed by a colon then a space then a value followed by a semicolon.

**Now all <header> tags will have padding of 10 pixels.

fig 1.7

.topbox {
background-color: red;
}
#white-text {
color: white;
}
header {
padding: 10px;
}

NOTE: If you save your pages and open your index.html with your web browser it should look like this

Hello World

Congratulations

At this point you have now learned the 3 different techniques of applying styles to your web page but of course there is more than background color, text color and padding, I encourage you to view this cheat sheet of all the CSS styles available here. and have some fun trying different things.

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email
Share on print

Leave a Reply

Your email address will not be published. Required fields are marked *