🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

CSS in HTML: Styles and Ways to Add Them

Reading time 4 min
Published Jun 23, 2017
Updated Jan 21, 2020

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.

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:

Example
<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:

Example
<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:

Example
<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):

Example
<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:

Example
<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>

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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:

Example
<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:

  • rel defines what you're relating your document with ("stylesheet").
  • type specifies the type of said document ("text/css").
  • href contains a reference to your CSS stylesheet.
Example
<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 style attribute - 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.