comment Add Comment
Posted on Last updated

HTML Styles

Hello, and welcome to this unit of our html course series called HTML Styles. This unit is a subset of CSS as an individual course but I have decided to add it to give you a fore-knowledge of how styles work with HTML. In this unit, we are going to learn about three sections, and these sections are the three ways of styling an html document:

  1. Using External CSS Files
  2. Adding The CSS Styles to The Head Section of Your HTML Document, and
  3. Using The Style Attribute in The Body Element

Using External Stylesheets or External CSS Files

This is the best way of adding styles to your html document if only the html document is a large one, and this is how it is done;

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

and is placed within the <head></head> of your html document. This is what it it means:

<link there means the document should link to…

rel= means related to a defined document

stylesheet means it’s a css file

type=”text/css” explains itself, the file type is a css file

href is the attribute that tells that the “css/style” is the destination / address / folder where the css file is found. In the case above, the css file is found in the folder called css, and the name of the file is style.css.

Adding The CSS Styles to The Head Section of Your HTML Document

In a case where your document isn’t huge or is a few lines of code, you may want to have only one file to contain both your html and css codes. This is one way you can do that – by adding the css code to the head section internally without linking to an external stylesheet. In this case, you use the <style></style> tags and place your css codes within them. This can be written this way:

<html>
<head>
<title>Hello World!</title>
<style type="text/css">
}
.new{
font-family: Verdana;
font-size: 16px;
background-color: red;
}
.new h1{
color: white;
}
.p{
text-align: center;
}
</style>
</head>
<body>
<header>
<div class="new">
<h1>Hello World!</h1>
<p class="p">This is my first coding in html5</p>
</div>
</header>
</body>
</html>

Note the type attribute added to the <style type=”text/css”>.

Using The HTML Styles Attribute in the Body Element

Alternatively, your css codes can be added to the <head></head> section of your HTML code without using external stylesheets, but this time with an attribute. This is how it is done;

<html>
<head>
<title>Hello World!</title>
</head>
<body>
<header>
<div style="font-family: Verdana; font-size: 16px; background-color: red;">
<h1 style="color: white">Hello World!</h1></pre>
<p style="text-align: center">This is my first coding in html5</p>
</div>
</header>
</body>
</html>

Please note the following: With this method,

  • the <style></style> tags are no more needed
  • the elements no more need to be put in classes
  • all styles must have the style attribute and styles must have quotation marks around them.

Alright then, after trying your hands on the above codes in your editor, this brings us to the end of this unit – HTML Styles. See you in the next unit.


Leave a Reply

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