How to connect CSS to HTML. Basic Methods

Getting Started with CSS

In this article, you’ll learn how to easily add style and formatting information to web pages using CSS – Cascading Style Sheets.

Embedding CSS in HTML Documents

CSS can be attached as a separate document or embedded in the HTML document itself. There are three methods of incorporating CSS into an HTML document:

Internal style sheets – using the style attribute in the initial HTML tag.
Built-in style sheets – using the style element in the title section of the document.
External style sheets – using a link element pointing to an external CSS file.

We’ll look at all three CSS insertion methods one by one.

Note. Internal styles have the highest priority and external styles have the lowest priority. This means that if you specify styles for an element in both the internal and external style sheets, conflicting style rules in the internal style sheet will override the external style sheet.

Internal Style Sheets

Internal stylesheets are used to apply unique style rules to an element by placing CSS rules directly into the initial tag. It can be attached to an element using the style attribute.

The style attribute includes a series of pairs of CSS properties and values. Each property: value pair is separated by a semicolon (;), as if you were doing an entry in built-in or external style sheets. But it should be all on one line, that is, without a line break after the semicolon, as shown here:

<h1 style="color:red; font-size:30px;">"Header"</h1>
<p style="color:green; font-size:23px;">Paragraph</p>
<div style="color:blue; font-size:15px;">Text</div>

Using internal styles is generally considered bad practice. Because the style rules are built directly into the HTML tag, it blends the code with the document content, making it difficult to maintain the code and defeating the purpose of using CSS.

Note. Styling pseudo-elements and pseudo-classes with inline styles has become nearly impossible. Therefore, you should avoid using style attributes in your code. Using external style sheets is the preferred way to add styles to HTML documents.

Built-in stylesheets

Embedded styles only affect the document in which they are embedded.

Embedded styles are defined in the head section of an HTML document using the style element. You can apply any number of style elements in an HTML document, but they must be between the head and /head tags. Let’s look at an example:

<head>
  <title>HTML page</title>
  <style>
    body { background-color: YellowGreen; }
    p { color: #fff; }
  </style>
</head>
<body>
  <h1>Header</h1>
  <p>Paragraph</p>
  <div>Text</div>
</body>
</html>

Tip: The type attribute of the style and link tags (e.g., type = “text / css”) defines the style sheet language. This attribute is purely informative. You can omit it because CSS is the default style sheet language in HTML5.

External Style Sheets

An external style sheet is preferable when a style needs to be applied to most website pages.

External stylesheets contain all the style rules in a separate document that you can refer to from any HTML file on your site. External styles are the most flexible because you can use them to change the appearance of an entire Web site by changing just one file.

You can attach external styles in two ways – by linking and importing.

Linking External Style Sheets

Before linking, we need to first create a stylesheet. Let’s open your favorite code editor and create a new file. Now enter the following CSS code into that file and save it as “style.css”.

body {
    background: lightyellow;
    font: 19px Arial, sans-serif;
}
h1 {
    color: pink;
}

An external style sheet can be linked to an HTML document using the link tag. The link tag is inside the head section, as you can see in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML page</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>Header</h1>
    <p>Paragraph or text.</p>
</body>
</html>

Tip: Among all three methods, using an external style sheet is the best method for defining and applying styles to HTML documents. As you can see from the example, the affected HTML file requires minimal changes to the markup.

Importing External Style Sheets

The @import rule is another way to load external stylesheets. The @import statement tells the browser to load an external stylesheet and use its styles.

You can use it in two ways. The easiest is in the header of your document. Note that other CSS rules can still be included in the style element. Here’s an example:

<head>
  <title>An example of an imported CSS stylesheet</title>
  <style>
        @import url("/examples/css/style.css");
        p {
            color: red;
            font-size: 17px;
        }
    </style>
</head>
<body>
  <h1>The styles for this header are defined in the imported stylesheet.</h1>
  <p>The styles for this paragraph are defined in the built-in stylesheet.</p>
</body>
</html>

Example of using a built-in and external CSS table with the @import statement

Similarly, you can use the @import rule to import a stylesheet into another stylesheet.

<head>
    <title>Example @import CSS statement</title>
    <style>
        @import url("/examples/css/layout.css");
        @import url("/examples/css/color.css");
        body {
            color:red;
            font-size:15px;
        }
    </style>
</head>
<body>
    <div>
		<h1>External style sheet import</h1>
   		<p>HTML element styles are defined in layout.css and colors are defined in color.css.</p>
    </div>
</body>
</html>

Note. All @import rules must be at the beginning of the stylesheet. Any rule that is in the stylesheet itself overrides conflicting rules in the imported tables. However, importing one stylesheet into another stylesheet is not recommended because of performance issues.