How to Include CSS in HTML Pages |

CSS can be added to HTML documents in 3 ways: Inline – by using the style attribute inside HTML elements. Internal – by using a <style> element in the <head> section. External – by using a <link> element to link to an external CSS file

Styling HTML Elements

HTML is quite limited when it comes to the presentation of a web page. It was originally designed as a simple way of presenting information. CSS (Cascading Style Sheets) was introduced in December 1996 by the World Wide Web Consortium (W3C) to provide a better way to style HTML elements.

With CSS, it becomes very easy to specify the things like, size and typeface for the fonts, colors for the text and backgrounds, alignment of the text and images, amount of space between the elements, border and outlines for the elements, and lots of other styling properties.

Which CSS has highest priority?

Properties of CSS: Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page

Adding Styles to HTML Elements

Style information can either be attached as a separate document or embedded in the HTML document itself. These are the three methods of implementing styling information to an HTML document.

Inline styles — Using the style attribute in the HTML start tag.
Embedded style — Using the <style> element in the head section of the document.
External style sheet — Using the <link> element, pointing to an external CSS files.

Note: It’s become impossible to style pseudo-elements and pseudo-classes with inline styles. You should, therefore, avoid the use of style attributes in your code. Using external style sheets is the preferred way to add styles to the HTML documents.

Importing External Style Sheets

The @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:

Example

Try this code »

<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.

Example

Try this code »

@import url("css/layout.css");
@import url("css/color.css");
body {
    color: blue;
    font-size: 14px;
}