How to add stylesheet in HTML?

add stylesheet in HTML

In this article, you learn how to add stylesheet in HTML. In HTML, style refers to how documents are presented on a web browser. The language has limited features for styling documents because it was originally created for presenting textual information. Cascading Style Sheets (CSS), which was introduced by the W3C in 1996, offers better methods and features for enhancing web pages. Using CSS, developers can easily specify the color of text and page background, the style and size of fonts, change the amount of space between elements, and add outlines or borders.

Style information of a webpage can either be embedded in its HTML code or attached as a separate document. The three main methods of adding styling information to an HTML document are inline styles, embedded style, and external style.

3 Ways to add stylesheet in HTML

HTML5 Elements

How to add Inline Styles

With inline styles, a developer adds style properties to an element by applying CSS syntax directly to the start tag. Use the style attribute to attach various properties to segments of text. A style attribute is characterized by a series of CSS properties and value pairs. Each value pair is separated by a semicolon? there should be no line breaks if you decide to use inline styles.

<h1 style="color:blue; margin-left:30px; ">This is a heading</h1>

How to add an Internal style sheet

Embedded style sheets are designed to only affect the document they are embedded in. These are usually defined in the head section of a document using the <style> element.

<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
} 
</style>
</head>

How to add External Style Sheets

External style sheets come in handy when a developer intends to apply a particular style to several pages. The style rules are held in a separate document that can be linked-to files on the website. External styles are preferable to inline and embedded styles because they offer great flexibility? you can change the look of an entire website by applying changes to a single file. An external sheet can be attached to a website in two ways which are namely, importing and linking.

To attach using the link method, use the link tag which should be included in the head section of your HTML document. If you will prefer using the import method, use the import statement which instructs the browser to load style properties from an external file. You can include the @import statement in the header section of your document or load rules from external CSS files using the style element.

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

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles on a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

So, an inline style has the highest priority and will override external and internal styles and browser defaults.

Here are the advantages of linking a CSS file to HTML:

  • Time-effective?? you only need to create a single CSS file to style all HTML files.
  • Faster load time?? the site will cache the CSS file for your visitors? next visit.
  • Improve SEO?? storing CSS styles in another file makes the HTML file more concise and readable by search engines.

Conclusion

While there are many ways to link CSS to HTML, the best method to do it is to use the HTML’s? <link> tag. By using this method, you’ll get to save time and code more efficiently without affecting your website’s visual representation

What do you think of this tutorial? Let us know in the comments section below!

HTML

Join Telegram Join Whatsapp