A CSS file is simply a plain text file saved with the .css extension. Show Getting Started with CSSIn this tutorial you'll learn how easy it is to add style and formatting information to the web pages using CSS. But, before we begin, make sure that you have some working knowledge of HTML. If you're just starting out in the world of web development, start learning from here » Without further ado, let's get started with the Cascading Style Sheets (CSS). Including CSS in HTML DocumentsCSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML document:
In this tutorial we will cover all these three methods for inserting CSS one by one.
Note: The inline styles have the highest priority, and the external style sheets have the lowest. It means if you specify styles for an element in both embedded and external style sheets, the conflicting style rules in the embedded style sheet would override the external style sheet. Inline StylesInline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute. The style attribute includes a series of CSS property and value pairs. Each "property: value" pair is separated by a semicolon (;), just as you would write into an embedded or external style sheets. But it needs to be all in one line i.e. no line break after the semicolon, as shown here:
<h1 style="color:red; font-size:30px;">This is a heading</h1> <p style="color:green; font-size:22px;">This is a paragraph.</p> <div style="color:blue; font-size:14px;">This is some text content.</div> Using the inline styles are generally considered as a bad practice. As style rules are embedded directly inside the HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates the purpose of using CSS. Embedded Style SheetsEmbedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags. Let's take a look at an example:
<!DOCTYPE html> <html lang="en"> <head> <title>My HTML Document</title> <style> body { background-color: YellowGreen; } p { color: #fff; } </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html>
Tip: The type attribute of the <style> and <link> tag (i.e. type="text/css") defines the language of the style sheet. This attribute is purely informative. You can omit this since CSS is the standard and default style sheet language in HTML5. External Style SheetsAn external style sheet is ideal when the style is applied to many pages of the website. An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file. You can attach external style sheets in two ways — linking and importing. Linking External Style SheetsBefore linking, we need to create a style sheet first. Let's open your favorite code editor and create a new file. Now type the following CSS code inside this file and save it as "style.css".
body { background: lightyellow; font: 18px Arial, sans-serif; } h1 { color: orange; } An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section, as you can see in the following example:
<!DOCTYPE html> <html lang="en"> <head> <title>My HTML Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph of text.</p> </body> </html>
Tip: Among all the three methods, using external style sheet is the best method for defining and applying styles to the HTML documents. As you can clearly see with external style sheets, the affected HTML file require minimal changes in the markup. Importing External Style SheetsThe @import rule is another way of loading an external style sheet. The @import statement instructs the browser to load an external style sheet and use its styles. You can use it in two ways. The simplest is within the header of your document. Note that, other CSS rules may still be included in the <style> element. Here's an example:
<style> @import url("css/style.css"); p { color: blue; font-size: 16px; } </style> Similarly, you can use the @import rule to import a style sheet within another style sheet.
@import url("css/layout.css"); @import url("css/color.css"); body { color: blue; font-size: 14px; }
Note: All @import rules must occur at the start of the style sheet. Any style rule defined in the style sheet itself override the conflicting rules in the imported style sheets. However, importing a style sheet within another style sheet is not recommended due to performance issue.
HTML (HyperText Markup Language) and CSS (Cascading Style Sheet) are the fundamental web development languages. HTML defines a website’s content and structure, while CSS specifies the design and presentation. Together, both languages allow to create a website that is well-structured and functional. CSS defines style declarations and applies them to HTML documents. There are three different ways to link CSS to HTML based on three different types of CSS styles:
This article will focus on external CSS to an HTML file linking as it changes the appearance of your entire website with just one file. We’ll also include a more detailed explanation of CSS and its benefits. Download Complete CSS Cheat Sheet How to Link CSS to HTML File – Video TutorialLooking for visual guide? Check out this video.
Subscribe For more educational videos! Hostinger Academy While there are multiple approaches linking CSS to an HTML file, the most efficient way is to link an external style sheet to an HTML document. It requires a separate document with a .css extension which solely contains all CSS rules without HTML tags. Unlike internal and inline styles, this method changes many HTML pages by editing one CSS file. It saves time – there is no need to change each CSS property on every website’s HTML page. Start linking style sheets to HTML files by creating an external CSS document using an HTML text editor and adding CSS rules. For instance, here are the style rules of example.css: body { background-color: yellow; } h1 { color: blue; margin-right: 30px; }Make sure not to add a space between the property value. For example, instead of margin-right: 30px write margin-right: 30 px. Then, use the <link> tag in the <head> section of your HTML page to link a CSS file to an HTML document. Next, specify the name of your external CSS file. In this case, it’s example.css so the code will look as follows: For better understanding, here’s a breakdown of the attributes contained within the <link> tag:
Once you’ve included the <link> element in your HTML file, save the changes and enter your website’s URL in your web browser. Styles written in the CSS file should change the look of the website. Although external CSS helps make the web development process easier, there are a few things to keep in mind that HTML pages might not be rendered properly before the external style sheet is loaded. Furthermore, linking to several CSS documents can increase your website’s loading time. On that note, if you want to edit a specific HTML element, it might be better to use the inline style method. Meanwhile, the internal or embedded style might be ideal for applying CSS rules to a single page. Reasons to Use CSSCSS is a style sheet language that manages the website’s visual representation. It consists of a list of formatting rules to style elements written in markup languages like HTML. In addition, CSS defines the display of HTML elements on various media types, such as projected presentations or television-type devices. Whenever a browser finds a style sheet, it’ll convert the HTML file according to the provided style information. Hence, it’s important to link CSS to an HTML file to give your site a more engaging look across devices. Other benefits from linking a CSS file to an HTML document are:
On the other hand, CSS has several disadvantages, such as:
All in all, CSS plays an important role when designing a website. It controls the formatting of various elements on a web page, such as fonts, background colors, and object positions. With the right application of CSS and HTML, a website can give an optimized user experience. ConclusionEmbedding CSS rules to HTML elements can be time-consuming and energy-wasting. Luckily, external style sheets make the process more efficient. CSS external style sheets are documents containing a list of style rules. Link them to an HTML document, and you’ll be able to change multiple pages at once, avoiding code bloat and keeping your HTML structure clean. We hope that knowing how to link CSS to HTML easily will save you time when creating a website to focus more on growing the traffic. If you’re interested to learn more about coding, head to our guide on learning to code.
In order to link HTML to CSS in your HTML file, you need to use link tags with the right attributes. Remember that, as a self-closing tag, the link tag should be included in the head section of your HTML file.
Check that your files are in the same folder if you have trouble linking your CSS to HTML. Check that the file path is correct if the CSS file is in a different folder. |