HTML Styles Tutorial with Examples
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.
2. Inline Style
No ADS
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
No ADS
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
No ADS
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>
No ADS
HTML Tutorials
- Introduction to HTML
- Install Atom Editor
- Install Atom HTML Preview
- Starting with HTML
- HTML Images Tutorial with Examples
- HTML Block/Inline Elements Tutorial with Examples
- HTML Editors
- Install Atom-Beautify
- HTML Styles Tutorial with Examples
- HTML Hyperlinks Tutorial with Examples
- HTML Email Links Tutorial with Examples
- HTML Paragraphs Tutorial with Examples
- HTML IFrames Tutorial with Examples
- HTML Entities Tutorial with Examples
- HTML Lists Tutorial with Examples
- HTML Tables Tutorial with Examples
- HTML Col, Colgroup Tutorial with Examples
- HTML Headings Tutorial with Examples
- HTML Quotations Tutorial with Examples
- HTML URL Encoding Tutorial with Examples
- HTML Video Tutorial with Examples
- HTML Dir Attribute Tutorial with Examples
Show More