HTML Styles Tutorial with Examples

HTML Styles
Inline Style
CSS Class
CSS file

1. HTML Styles

The story of HTML Styles began in 1994, when websites was starting to be used as a platform for electronic publishing. People found it difficult to create a website whose layout and style resemble traditional printed newspapers. This pressed a demand for the "style sheet language" and then the CSS (Cascading Style Sheets) was invented.

CSS is an interesting topic and has a lot of things for us to talk about, so it had better be introduced in detail in a separate article, which includes the history and the benefits of CSS. It would be great to read my article about CSS in the link below:
Lich su cua CSS

Basically, CSS defines styles that can be applied to the HTML elements, such as rulers, colors, fonts, etc.

In this article, I will show you how to use Styles in HTML as well as some basic CSS properties. We have a separate topic on CSS and you can also learn more specifically here.

CSS Tutorials

2. Inline Style

The simplest way to apply a style to an element is to use the Style attribute.

<tagname style="property1:value1; property2: value2">

For example:

<p>I am normal</p>

<p style="color:red;">I am red</p>

<p style="color:blue; font-weight:bold">I am blue and bold</p>

<p style="font-size:35px; font-style:italic">I am big and italic</p>

color, font-size, font-style and font-weight are properties of CSS. Each CSS property specifies an aspect of style for the element.

OK, we are going to get acquainted with some common CSS properties by following the examples below:

CSS background-color

The CSS background-color property is used to specify a background color for the element, which also works for children of the current element.

background-color-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Style</title>
    <meta charset="UTF-8"/>
</head>
<body style="background-color: AliceBlue;">
     <h1>CSS background-color</h1>

     <p style="background-color:yellow">My Background Color is yellow!</p>
</body>
</html>

CSS color

The CSS colorproperty is used to specify a text color for an element, which also works for children of the current element.

<p style="color:red;">I am red</p>

CSS font-family

The CSS font-family property is used to set the font for an element, which also works for children of the current element.

font-family-example.html

<h1>CSS font-family</h1>
<hr/>
<div style="font-family: 'Comic Sans MS';">
  <h3>This is a Heading h3</h3>
  <p>This is a Paragraph</p>
</div>
<hr/>
<p style="font-family: Arial;">
  This is a Paragraph
</p>

CSS font-size

The CSS font-size property is used to specify a font size for the element, it also works for children of the current element.

font-size-example.html

<p>
    This is a Paragraph (Default font-size)
</p> 
<p style="font-size: 150%">
    This is a Paragraph (font-size: 150%)
</p>
<p style="font-size: 35px">
    This is a Paragraph (font-size: 35px)
</p>

CSS text-align

The CSS text-align property is used to specify the horizontal text alignment. It has 3 values: left, center and right.

text-align-example.html

<p style="background-color:AliceBlue;text-align:left;">
    This is a Paragraph (text-align:left;)
</p>
<p style="background-color:AliceBlue;text-align:center;">
    This is a Paragraph (text-align:center)
</p>
<p style="background-color:AliceBlue;text-align:right;">
    This is a Paragraph (text-align:right)
</p>

3. CSS Class

CSS allows you to create a class, a group of properties. You can apply this class to one or more elements. Classes are defined in an opening <style> tag and a closing </style> tag.

The <style> tag can be placed anywhere in the HTML document, but it is recommended to be placed in the <head> tag.

For example, let's define a class named "app-note" in the <style></style> tags. Note: A dot (.) must always be placed immediately in front of the name of the class.

<style>
    .app-note  {
        font-size:90%;
        font-style: italic;
        color: red;
    }
</style>

Later, you can apply this class to HTML elements as follows:

<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>

See full code of the example here.

css-class-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class</title>
    <meta charset="UTF-8"/>
    <style>
        .app-note  {
            font-size:90%;
            font-style: italic;
            color: red;
        }
    </style>
</head>
<body>
<h3>CSS Class</h3>
<hr/>
<p class="app-note">
    This is a Paragraph
</p>
<div class="app-note">
  This is a Div
</div>
</body>
</html>

For another example, let's define a group of properties that apply to a specific tag.

<style>
    div  {
        font-size:120%;
        color: CadetBlue;
    }
    code {
       font-weight: bold;
       font-style: italic;
       background-color: yellow;
       color: blue;
    }
</style>

<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>

Xem code đầy đủ của ví dụ trên:

styles-for-tag-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Styles for a Tag</title>
    <meta charset="UTF-8"/>
    <style>
        div  {
            font-size:120%;
            color: CadetBlue;
        }
        code {
           font-weight: bold;
           font-style: italic;
           background-color: yellow;
           color: blue;
        }
    </style>
</head>
<body>
<h3>Styles for a Tag</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
</body>
</html>

4. CSS file

Again and again you write styles in a separate CSS file, which makes the file usable by many different HTML documents.

For example, I created a file named main.css:

main.css

div  {
    font-size:120%;
    color: CadetBlue;
}

code {
   font-weight: bold;
   font-style: italic;
   background-color: yellow;
   color: blue;
}

.app-note  {
    font-size:90%;
    font-style: italic;
}

And declared to use the aforementioned CSS file in the HTML document:

using-css-file-example.html

<!DOCTYPE html>
<html>
<head>
    <title>Using CSS File</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" href="main.css" />
</head>
<body>
<h3>Using CSS File</h3>
<hr/>
<div>
  The <code>alert()</code> method displays an alert box with a specified message and an OK button.<br/>
  The <code>confirm()</code> method displays a dialog box with a specified message,
   along with an OK and a Cancel button.
</div>
<br/> <br/>
<div class="app-note">
    This is a DIV with class 'app-note'
</div>
</body>
</html>