Connecting CSS to HTML Pages

You can add CSS to a page in three different ways: (i) Directly to an HTML element (ii) With an internal style sheet (iii) With an external style sheet.

images/articles/css/css25.webp

The most reusable way to add CSS to a page is by using an external style sheet, but the simplest is to add styling information directly on an element.

1. Adding Style to HTML Element

You add style to any HTML element with the style attribute. When a style is applied within an HTML element, it is called an inline style or inline CSS.

<p style="font-weight: bold;">This text is bold.</p>

2. Internal Style Sheet

Applying styles to individual elements becomes cumbersome when you have a large web page. For instance, in order to make the text of the three <div> elements bold you needed to add a style attribute to each of the <div> elements.

You can create a special area of the web page to store styling information. This styling information is then applied to the appropriate elements within the HTML. This alleviates the need to add a style attribute to each element.

You add internal styles within the <head> portion of a web page using the <style> element.

3. External Style Sheet

To use an internal style sheet to create styling information for one page is fine. But what happens when you have 10 pages or 50 pages or 100 pages that all need styling? You need to add styling information to every page. This becomes a tedious task.

You can use external style sheets to share CSS among multiple pages. An external style sheet is a type of text document that can be included on every page. The browser reads this external style sheet just as it would read styles applied within the page itself, and applies those styles accordingly.

You add or include an external style sheet with the <link> element, which goes in the <head> area of an HTML page.

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

This line includes a file called style.css in the current directory and incorporates it into the page.

Now external style sheet can be shared among multiple HTML files. If you need to make a change to styling, you need to edit only one CSS file, and it automatically applies the styles to all the pages that use that CSS file.