TL;DR – Styles are CSS properties which allow you to build a design for your website. In HTML, style can be applied using the style attribute, <style> or <link> tags.
Contents
Applying Styles in HTML
The purpose of HTML is functionality – not design. To create a unique look for your web page, you need to use Cascading Style Sheets (CSS). However, you will need to use some HTML elements to include them in your web page.
There are three basic ways to use style in HTML:
| Type | Added with | Best for |
|---|---|---|
| Inline CSS | The style attribute | A single element |
| Internal CSS | The <style> tag | A single web page |
| External CSS | The <link> tag | The whole website |
Inline Styling and the Most Common Properties
Using inline CSS for HTML styles is the best option when you need to change the look of a single element. Inline means declaring the style inside the tag which defines the element to be styled.
All you need to use is the HTML style attribute:
<tag style="name:value"> content </tag>
As you can see, you need to define the CSS styling property in a name-value pair. Let's look at a few examples of the most commonly used properties in HTML styles.
The background-color property defines the background color for the element. The color can be written in either its name, RGB or HEX value:
<div style="background-color: black; height: 200px; width: 200px;"></div>
<div style="background-color: rgb(255, 0, 255); height: 200px; width: 200px;"></div>
<div style="background-color: #333666; height: 200px; width: 200px;"></div>The color property changes the HTML font color in your document. It accepts the same values as the background-color property:
<p style="color: rgb(255, 0, 255);">I am a unicorn</p>
<p style="color: #42f4ee;">I am a star</p>
<p style="color: lime;">I am a lime</p>The font-family property defines the HTML font style for a selected element:
<p style="font-family: Times;">I am a times font-family text</p>
<p style="font-family: Arial;">I am an arial font-family text</p>
<p style="font-family: Impact;">I am an impact font-family text</p>The font-size property allows you to define HTML font size. It can be defined by either px, em, or pt. In most cases, people tend to use pixels (px):
<p style="font-size: 1.7em;">My font-size is 1.7em</p>
<p style="font-size: 17pt;">My font-size is 17pt</p>
<p style="font-size: 17;">My font-size is 17</p>
<p style="font-size: 17px;">My font-size is 17px</p>If you're looking at how to center text in HTML, get to know the HTML style text-align property. It can align your text to the left, right or center:
<div width="100%" style="text-align: left;">
<p> I am aligned to the left</p>
</div>
<div width="100%" style="text-align: center;">
<p> I am aligned to the center</p>
</div>
<div width="100%" style="text-align: right;">
<p> I am aligned to the right</p>
</div>Including HTML Styles in Head Section
Internal CSS is great when you need a specific styling to apply for the whole page. Applying the HTML style attribute to every element separately would create a messy and redundant code in this case.
To include internal styling, you need to add the styling information between the <style> tags and place them in the <head> section of the document:
<style>
selector {
name: value;
}
</style>
To choose the element to style, you need to include a CSS selector before listing the name-value pairs. In the example below, we change the HTML font color for <h1> and <p> elements by including h1 and p as selectors:
<head>
<style>
/* This is internal styling */
h1 {
color: indianred;
}
p {
color: red;
}
</style>
</head>Using External Stylesheets
You can also have a stylesheet in a separate file and include it in your document using <link> tags. This will help you keep a tidier code.
Just like <style>, <link> tags have to be included in the <head> section of the document. You will also need to use three attributes:
reldefines what you're relating your document with ("stylesheet").typespecifies the type of said document ("text/css").hrefcontains a reference to your CSS stylesheet.
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
Note: <link> is an empty element, so you don't need a closing tag.
HTML Style: Useful Tips
- You can add multiple styling properties at once when using the HTML
styleattribute - just make sure to separate the name-value pairs with commas. - Using a separate stylesheet is very convenient for styling multiple pages, as it's easier to apply changes to one document than to each page separately.