How to Add, Embed, or Link Style Sheet to HTML page

You will discover how to implement style guidelines to Html pages in this article.

Styling HTML Elements

HTML has certain limitations in terms of webpage presentation as it was initially created for straightforward information display. However, the introduction of CSS by the World Wide Web Consortium in December 1996 revolutionized web styling.

CSS offers a more efficient approach to customize HTML elements, allowing effortless specification of font size, typeface, text and background colors, text and image alignment, element spacing, borders, outlines, and a wide range of other styling properties.

Adding Styles to HTML Elements

There are three ways to incorporate styling information into an HTML document: attaching it as a separate document or embedding it within the HTML document itself. These methods include:

Inline style — This involves using the style attribute within the HTML start tag to specify the desired styles directly in the HTML elements.
Embedded style — This method entails using the <style> element within the head section of the document to define the styling rules for the entire HTML document.
External style sheet — With this approach, the <link> element is utilized to reference an external CSS file, which contains the styling information for the HTML document.

Note: When it comes to priority, inline styles hold the highest precedence, while external style sheets have the lowest. This implies that if you define styles for paragraphs in both the embedded and external style sheets, any conflicting style rules present in the embedded style sheet will take precedence over the external style sheet.

CSS styling in HTML allows for customizing the appearance of HTML elements by adding styles directly to the markup. This can be achieved through various methods, such as using inline styles in HTML tags, embedding styles within the HTML document, or linking external style sheets to provide consistent styling across multiple HTML pages.

Inline Styles

To apply distinct style rules to an element, inline styles are employed by inserting CSS rules directly into the start tag. This can be accomplished by attaching the style attribute to the element.

The style attribute comprises a sequence of CSS property and value pairs (property: value), separated by semicolons (;), similar to what you would write in an embedded or external style sheet. However, it is crucial to keep all the pairs in a single line, without any line breaks after the semicolon.

Take the following example, which showcases how to define the color and font-size of the text:

<h1 style="color:blue;fontsize:20px;">Inline styles</h1>
<p style="color:red;font-size:25px;">This is a first page.</p>
<div style="color:yellow; font-size:15px;">This is second page.</div>

Try this code

Most people think it's bad practise to use inline styles. It is exceedingly challenging to update or manage a website because style guidelines are intermingled with the document's information since they are incorporated right inside of the html tag.

Note: Inline styles can no longer be used to style pseudo-elements and pseudo-classes. As a result, you should avoid the use of style attribute in your markup. Instead, employing an external style sheet is the recommended approach for incorporating style information into an HTML document.

Using inline styles with the style attribute in HTML allows for direct CSS styling of elements, providing flexibility and control over the appearance of specific elements on a webpage, but it's important to consider best practices and the potential impact on SEO when utilizing inline styles.

Embedded Style Sheets

Embedded or internal style sheets solely have an impact on the document in which they are embedded.

Embedded style sheets are specified within the <head> section of an HTML document using the <style> tag. Multiple <style> elements can be defined within the <head> section.

The following example illustrates the embedding of style rules within a web page.

<head>
	<style type="text/css">
        body { background-color: purple; }
		h1 { color: skysblue; }
        p { color: yellow; }
    </style>
</head>

Try this code

Using embedded styles within the HTML <style> tag enables precise CSS styling, providing flexibility and control over the appearance of multiple webpage elements. It allows for direct application of styles, taking advantage of the internal style sheet, CSS specificity, and effective organization. By prioritizing embedded styles over external ones, optimal performance impact and responsive design can be achieved.

External Style Sheets

When there is a need to apply a style across multiple pages, an external style sheet proves to be the best choice.

An external style sheet contains all the style rules (style guidelines) in a separate document that can be linked from any HTML document within your website. This approach offers maximum flexibility since modifying a single file allows you to alter the appearance of the entire website.

There are 2 methods to add external style sheets: linking and importing.

Linking External Style Sheets

An external style sheet can be linked to an HTML page or document using the <link> element. As demonstrated below, the <link> element is placed inside the <head> section.

<head>
    <link rel="stylesheet" href="sample.css" />
</head>

Try this code

Importing External Style Sheets

The @import rule provides an alternative method for loading an external style sheet. By using the @import statement, you can instruct the browser to load an external style sheet and utilize its styles.

There are two approaches to utilizing the @import rule. The simpler approach involves placing it within the <style> element within the <head> section of your HTML document. It's important to note that other CSS rules can still be included within the same <style> element alongside the @import statement.

<style>
        @import url("sample.css");
        p {
            color: red;
            font-size: 20px;
        }
</style>

Try this code

The @import rules can also be used to import a style sheet inside of other style sheet.

@import url("layout.css");
        @import url("color.css");
        body {
            color:red;
            font-size:15px;
        }

Note: Every @import rule should be positioned at the beginning of the style sheet. Any style rule specified within the style sheet will take precedence over conflicting rules in the imported style sheets. It is important to note that the usage of the @import rule may lead to performance problems, and as a general practice, it is recommended to avoid importing style sheets whenever possible.

By utilizing external style sheets and linking them using the CSS link element through the HTML link tag for styles, you can achieve efficient and organized styling for your webpages, leveraging the benefits of external style sheets such as CSS specificity, enabling responsive design with external stylesheets, linking multiple style sheets, and effectively prioritizing style sheets using the link element.

FAQ

What is the purpose of the `<style>` tag in HTML?

The <style> tag is used to define CSS (Cascading Style Sheets) rules and styles within an HTML document. It allows you to specify how HTML elements should be styled, such as their colors, sizes, fonts, layout, and more.

How do you define inline CSS styles using the `<style>` tag?

To define inline CSS styles using the <style> tag, you can include the <style> tag within the <head> section of the HTML document and write CSS rules directly inside it. The styles defined within the <style> tag will apply to the HTML elements throughout the document.

What are the advantages of using the `<style>` tag over inline styles?

The advantages of using the <style> tag over inline styles include better separation of concerns, improved code organization, and ease of maintenance. By placing CSS rules in the <style> tag or external CSS files, you can keep the HTML markup clean and separate the styling logic, making it easier to update or modify styles across multiple pages.

How do you target HTML elements using CSS selectors within the `<style>` tag?

To target HTML elements using CSS selectors within the <style> tag, you can use various CSS selectors such as element selectors, class selectors, ID selectors, attribute selectors, and more. By specifying the desired selector followed by the CSS properties and values, you can apply styles to specific elements.

Can you use CSS preprocessors like Sass or Less within the `<style>` tag?

No, CSS preprocessors like Sass or Less are not directly supported within the <style> tag. Preprocessors require a separate compilation step to generate the final CSS output, which is typically done outside the HTML document. The generated CSS can then be included using the <link> tag or inline styles.

How do you apply CSS styles to a specific HTML class using the `<style>` tag?

To apply CSS styles to a specific HTML class using the <style> tag, you can use the class selector. Define a CSS rule with the class selector followed by the class name and specify the desired styles within the rule. Then, apply the class name to the relevant HTML elements using the class attribute.

What is the syntax for creating CSS rules within the `<style>` tag?

To create CSS rules within the <style> tag, you use the syntax of a CSS rule. Each rule consists of a selector followed by a block of curly braces {}. Inside the braces, you specify one or more CSS properties and their corresponding values, separated by a colon :.

Can you use media queries within the `<style>` tag to apply styles based on different screen sizes?

Yes, you can use media queries within the <style> tag to apply styles based on different screen sizes. Media queries allow you to define different styles for different conditions, such as screen width, device orientation, or print media. By wrapping the CSS rules inside a media query, you can target specific screen sizes or devices.

How do you override or cascade styles within the `<style>` tag?

Styles within the <style> tag follow the cascading order of CSS. To override or cascade styles, you can use more specific selectors, apply the!important rule to a style declaration, or rearrange the order of the <style> tags to prioritize styles. The last-applied style or the one with higher specificity will take precedence.

Conclusion

The HTML <style> element is a fundamental tool that grants web developers the ability to define and apply CSS styles directly within their HTML documents. By embedding CSS code between the <style> tags, developers can customize the appearance and layout of HTML elements, enhancing the visual presentation and user experience of their web pages.

Inline styles provide a quick and straightforward way to apply styles directly to individual HTML elements using the style attribute. While this approach is convenient for small-scale modifications, it can lead to code duplication and reduced maintainability when used extensively.

On the other hand, external stylesheets offer a more structured and efficient method for managing styles across multiple HTML pages. By linking an external CSS file using the <link> element, developers can centralize their styles, ensuring consistency and easier maintenance. This approach promotes code reusability and separates the concerns of content and presentation, fostering a more organized and scalable web development process.