top of page

HTML Lecture 06 - HTML Styles

  • Writer: Alex Wright
    Alex Wright
  • Aug 31, 2020
  • 2 min read

Updated: Jul 1, 2022


We have learned in earlier lectures how we can structure our webpage by adding headings, paragraphs and giving them different formats. In this lecture, we are going to discuss how we can add styles to our text to make the webpage look colorful. We will discuss this topic in CSS lecture in detail. But this lecture will give you an overview of how HTML styles work.

We will be discussing two different techniques to apply styles to our text:

  1. Inline CSS

  2. Internal CSS

Inline CSS

Let's have a look at Inline CSS. In this technique, we use style attribute within the element. Style attribute uses the following syntax:

<tagname style="property:value">

where property defines the CSS property and value defines the CSS value. Multiple properties can also be used separated by a semi-colon. Let's use this technique in the following code:

<!DOCTYPE html>
<html>
<head>
<title>Lecture 06</title>
</head>
<body>

<h1 style="font-family:courier; text-align:center">This is Lecture 6</h1>
<p style="background-color:yellow; font-size:40px">Applying Yellow color in the background of this paragraph</p>
<p style="color:green">Applying green color to the text of this paragraph with font size of 300px</p>
<p style="background-color:red; color:yellow">Applying yellow color to text with red color on background of this paragraph.</p>

</body>
</html>

As you can see in the code, in <h1> tag we have used multiple CSS property in single attribute changing the font and alignment of the text. Similarly we have used multiple properties in first and third paragraph adding more properties to the same element. Lets look at the results:

As you can see in the results, heading is aligned in center with font courier. First paragraph have a bigger font size with yellow color in the background. Second paragraph is green in text. Third paragraph have yellow text and red background.

Internal CSS

The second technique we will be using is called the Internal CSS. To apply this technique we use <style> element in the <head> section. This technique can be used to apply styles on multiple elements with single line of code. Let's have a look at code below:

<!DOCTYPE html>
<html>
<head>
<title>Lecture 06</title>
<style>
body {background-color:yellow;}
h1 {text-align:center; color:red}
p {color:blue}
</style>
</head>
<body>

<h1>I am heading</h1>
<p>I am a paragraph</p>
<p>I am second paragraph</p>

</body>
</html>

As you can see in the code we have used <style> element within the <head> section. We only used the element name inside <style> element to make changes to that particular element type. Lets see the results:

As you can see in the results the whole body background is yellow, h1 heading is in red color with center-aligned and we only used the style element under the head section. Note the text color of both the paragraphs. We have not individually assigned styles within the <p> element. All we did is used Internal CSS technique and targeted the <p> element to apply style.


External CSS


This is the technique where you can create a separate .css file and link it to your .html file to apply styles on your HTML document. This is a advanced topic and will be discussed in detail in CSS lectures.

Comments

bottom of page