44 Votes

CSS: Include CSS Stylesheets in HTML

Tutorial by Stefan Trost | Last update on 2023-02-17 | Created on 2015-04-02

Using CSS stylesheets, you can style and design the elements of your HTML page. However, in this tutorial, I do not want to talk about the possibilities of CSS, but how to include CSS into your HTML.

In the following, we will see how to include CSS as external file, how to define CSS within one HTML file or how to apply CSS only to single HTML elements. In the last section, we will see how to combine those methods.

Include CSS as external File

The royal road is using an external file. All CSS rules are just written into one file and this file is then linked within the head of the HTML page. The file extension for CSS files is CSS.

Let us have a look at an example:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>

The integration is done with the HTML tag "link" within the head of our HTML page. This tag has to contain the attributes "rel", "type" and "href". "rel" (relation) always has the value "stylesheet" and "type" is always "text/css", which is the MIME-Type of a CSS file. The filename of our external CSS file is specified in the attribute "href". In this example, we would like to include "style.css". Please note: If the CSS file is stored in any subdirectory on the web space, of course, we have to adjust the link and path here.

The file "style.css" is just a normal plain text file containing our CSS rules we would like to define. For example, the content of the file could look like the following and can be created using each text editor.

h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }

The advantage of defining CSS rules in external files is obvious: We can create only one central CSS file for our entire website which can be included on each single page.

With this, we do not have to repeat the CSS rules on each page and it will be very simple to maintain our website: for example, if we would like to change the font size of one element, it is sufficient to change the CSS file and the modification will be visible on every single page immediately.

Define CSS within HTML page

If you would like to define some CSS rules for only one specific HTML file, you can also write the rules directly into the head without using an external file. Here you can see an example:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style type="text/css">
<!--
h1 { font-size: 14px; padding-bottom: 10px; }
p  { font-size: 10px; }
-->
</style>
</head>
  <body>
    <h1>Heading</h1>
    <p>Paragraph</p>
  </body>
</html>

The rules are surrounded with the HTML tag "style" and the opening style tag can again contain the MIME-Type (text/css). Alternatively, we can also just write "<style>", the browsers understand that too.

Optionally, the rules can be enclosed as HTML comment (<!-- and -->). This is common practice to prevent older browsers from interpreting the CSS rules as text. However, nowadays this hardly plays a role, since all common browsers understand CSS.

The advantage of this method is that the global CSS file will not be bloated by rules that are only important for one page. Additionally this method applies for the whole page so that you can nevertheless define some central rules.

CSS only for single HTML Elements

Last, it is also possible to apply CSS only to specific elements. Again, we would like to have a look at an example for this:

<!DOCTYPE html>
<html>
  <head>
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <h1 style="font-size: 14px; padding-bottom: 10px">Heading</h1>
    <p style="font-size: 10px">Paragraph</p>
  </body>
</html>

For this, we are using the attribute "style" that we are directly adding to the desired HTML element we would like to style. So, we are just adding the rules for the corresponding element using style="[CSS-Rules]" like you can see in the example above.

This method can be used for example, whenever we only want to style one specific element. However, in general, it is recommended to go without this method, because it is a better practice to divide content and styling.

Combine CSS from different Sources

We are not required to limit us to only one of these three introduced methods. Moreover, we are always allowed to combine the methods like we want. We only have to keep in mind that the last defined rule will overwrite the rules defined before.

For example, when we have included a separate CSS file in the head and we have defined some page page-specific CSS thereunder, the page-specific rules will overwrite the rules from the CSS file. If we are defining additional rules for some elements, those rules will overwrite all of the other rules defined before.

For example, if we have defined the font size "14" and the font-weight "bold" for all p elements in our CSS file and we will overwrite this rule with "p { font-size: 12; }" on the page, the font will stay bold, but the font size will be overwritten.

ReplyPositiveNegative

About the Author

AvatarYou can find Software by Stefan Trost on sttmedia.com. Do you need an individual software solution according to your needs? - sttmedia.com/contact
Show Profile

 

Related Topics

jQuery: CSS Stylesheet Switcher

Tutorial | 1 Comment

Reload Images, CSS, JS and Web Pages despite Browser Cache

Tip | 2 Comments

Fonts for Windows, Linux and Mac on the Web

Article | 0 Comments

Send HTML5 Canvas as Image to Server

Tutorial | 0 Comments

HTML: Difference between ID and CLASS

Info | 0 Comments

jQuery: Load and Replace DIV Content with clicking Links

Tutorial | 0 Comments

HTML5 Canvas: Beginner Tutorial Chapter 3 - Rectangles and Circles

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.