How to use a CSS file in HTML

Information Technology and Electronics

HTML and CSS are the fundamental building blocks for creating any modern website. HTML (Hypertext Markup Language) is the markup language used to define the structure and content of the website, while CSS (Cascading Style Sheets) is used to define the visual appearance of the website.

In this article, we will show you how to use a CSS file in HTML to customize the appearance of your website. You will learn how to link the CSS file to your HTML document, define style rules in the CSS file, and apply these rules to your HTML elements.

Before you begin, make sure you have a basic understanding of HTML and CSS. If you are new to these languages, we recommend checking out our introductory guides on HTML and CSS.

Creating a CSS File

To create a CSS file, you need to use a text editor such as Notepad or Sublime Text. Follow these steps:

Open your preferred text editor.
Create a new blank document.
Save the document with the .css extension (e.g., style.css).

CSS File Syntax

The CSS file consists of a series of rules that define the style of HTML elements. Each rule consists of two parts: the selector and declaration.

Selector: indicates which HTML element the style applies to.
Declaration: indicates what style to apply to the selected element. For example, to select all paragraphs and set their text color to red, the rule would be written as follows:

p {
  color: red;
}

In this case, "p" is the selector that indicates all paragraphs in HTML while "color: red;" is the declaration that sets the text color to red.

Linking the CSS File to HTML

After creating the CSS file, you need to link it to your HTML document. There are two ways to do this:

Direct insertion: Insert the following line of code inside the HTML head tag:

  <link rel="stylesheet" href="style.css">

Internal insertion: Insert the CSS code inside the HTML style tag:

  <head> <style> /* insert CSS code here */ </style>
  </head>

Remember to save both the HTML and CSS files in the same folder to ensure that the link works correctly.

Linking the CSS File to HTML

Once you have created your CSS file, you need to link it to your HTML file so that the style is applied to the content of the web page.

Method 1: External Linking

The most common method for linking The way to link a CSS file to HTML is to use an external link. To do this, insert the following code in the <head> section of your HTML file:

<link rel="stylesheet" type="text/css" href="style.css">

Where "style.css" is the name of your CSS file. Make sure to provide the correct path for your CSS file if it's located in a different folder than your HTML.

Method 2: Internal Style

You can also include the style directly in the <head> section of your HTML document using the <style> tag. Here's how:

<head>
    <style type="text/css">
        /* Insert your CSS rules here */
    </style>
</head>

Make sure to include the media type "text/css" in the <style> tag.

Both methods work well, but using external linking is generally preferred as it keeps the style separate from content and makes file management easier.

Writing CSS Code

After creating the CSS file, you can start writing code. CSS code is made up of rules that define how HTML elements should be displayed on the screen.

CSS Code Syntax

The basic syntax for a CSS rule is as follows:

Selector: identifies the HTML element to which the rule applies.
{}: delimits the block of declarations for the rule.
Property: defines the appearance of the selected element.
Value: specifies the value of the property.

Example:

selector {
  property: value;
}

For example, if you want to change the color of text in all paragraphs in an HTML document, you can use the selector "p" (which selects all <p> tags) and the "color" property with a specific value:

p {
  color: blue;
}

In this case, all paragraphs in the document will have blue text.

How to Apply CSS Rules to HTML Elements

To apply CSS rules to HTML elements, you need to link the CSS file to the HTML document using the <link> tag in the <head> section of your HTML document.

Example:

<!DOCTYPE html>
<html>
  <head> <title>Document Title</title> <link rel="stylesheet" href="style.css">
  </head>
  <body> ...
  </body>
</html>

In this example, the CSS file "style.css" is linked to the HTML document using the "href" attribute.

of the <link> tag. The browser will read the CSS file and apply the rules defined in the file to all HTML elements selected by the selectors defined in the rules.

Using CSS Rules to Modify HTML Style

CSS (Cascading Style Sheets) is a style language used to define the look and presentation of an HTML document. Using CSS, you can modify text color, font type, text size, and many other style properties.

To use CSS rules in an HTML file, you need to include the CSS code inside <style></style> tags. For example:

<head>
  <title>My Website</title>
  <style> p { color: blue; font-size: 18px; }
  </style>
</head>

<body>
  <p>This is an example of how to use CSS rules.</p>
</body>

In this example, we have defined a CSS rule for paragraphs (<p>) in our HTML document. The rule specifies that the text color should be blue and the font size should be 18 pixels.

You can also use classes and IDs to apply CSS rules to specific parts of your web page. For example:

<head>
  <title>My Website</title>
  <style> .title { font-size: 24px; font-weight: bold; } #subtitle { font-size: 18px; color: gray; }
  </style>
</head>

<body>
  <h1 class="title">Welcome to my website!</h1>
  <h2 id="subtitle">Discover our special offers.</h2>
</body>

In this example, we have defined a CSS class called "title" for our main title and a CSS ID called "subtitle" for our subtitle. The "title" class defines the font size at 24 pixels and the text style in bold, while the "subtitle" ID defines the font size at 18 pixels and the text color in gray.

By using CSS rules, you can easily customize the look of your HTML page. Remember to always use best practices to ensure that your code is clean and well-organized.

Conclusion

CSS is a powerful tool for customizing the look of your web page. Using CSS rules, you can easily modify text color, font size, and many other style properties. Remember to use classes and IDs to apply CSS rules to specific parts of your web page and to follow best practices to ensure that your code is clean and well-organized.

Ruggero Lecce - Consulente senior di personal branding in Italia

Michael Anderson - Software Engineer

My name is Michael Anderson, and I work as a computer engineer in Midland, Texas.

My passion is sharing my knowledge in various areas, and my purpose is to make education accessible to everyone. I believe it is essential to explain complex concepts in a simple and interesting way.

With GlobalHowTo, I aim to motivate and enrich the minds of those who want to learn.