How To Link CSS To HTML

Cascading Style Sheets (CSS) is a stylesheet language used for describing the presentation of a document written in HTML or XML. CSS is used to define styles for web pages, including layout, colors, fonts, and more. To apply CSS styles to an HTML document, you need to link the CSS file to the HTML file. In this blog post, we will show you how to link CSS to HTML.

  1. Create a CSS File The first step is to create a CSS file. Open a plain text editor like Notepad, and save the file with a .css extension. For example, if you want to name the file styles.css, save the file as styles.css.

  2. Write CSS Code Next, write your CSS code inside the CSS file. For example, to set the background color of a webpage to blue, you can use the following CSS code

body {
background-color: blue;
}

  1. Link CSS to HTML To link the CSS file to the HTML file, you need to add the <link> element inside the <head> section of the HTML file. The <link> element has three attributes: href, rel, and type.

The href attribute specifies the path to the CSS file. If the CSS file is in the same folder as the HTML file, you can simply write the name of the CSS file. If the CSS file is in a different folder, you need to specify the path to the CSS file.

The rel attribute specifies the relationship between the HTML file and the CSS file. Set the value to "stylesheet" to indicate that the linked file is a stylesheet.

The type attribute specifies the type of the linked file. Set the value to "text/css" to indicate that the linked file is a CSS file.

Here's the HTML code to link the CSS file to the HTML file:

Example

In this example, the CSS file is named styles.css and is located in the same folder as the HTML file.

  1. Save and Open HTML File Save the HTML file and open it in a web browser. The web page should now be styled according to the CSS code in the linked CSS file.

Conclusion In summary, linking CSS to HTML is a straightforward process. You need to create a CSS file, write CSS code, and link the CSS file to the HTML file using the <link> element. By following these steps, you can style your web pages with CSS and create beautiful and professional-looking websites.