CSS for Beginners – Inserting CSS Styles

Before you can start to master Cascading Stylesheets (CSS), you need to know the different ways you can insert the styling into a HTML document. There are three different ways to insert a style sheet into your HTML document: External CSS, Internal CSS and Inline CSS.


External CSS

An external style sheet contains all of the CSS styling for your website in a single separate document. External style sheets are the norm for most modern websites, particularly dynamic sites, as it allows styles to be changed quickly and easily, and allows websites to completely change their style just by referencing a new style sheet.

Sites that use external CSS need to reference the style sheet in the head section of every HTML page using the <link> element:

The external style sheet can be created in any appropriate text editor, and as long as the CSS is written correctly, and the document is saved as a .css file, you should have few problems with this method.

Internal CSS

An internal style sheet is one which is inserted into the <head> section of a HTML page using the <style> element. If you have a large, multi-page website, this method is only really useful if you want to style a single page differently to the rest of your site. If you want to edit the style of pages that use an internal style sheet, you will need to do so manually for each page. A (very) simple internal style sheet might look like:

Inline CSS

Inline styles are used to apply unique styling to a single HTML element. The HTML element is edited to have the style attribute, properties and values inside the opening tag. You can add any CSS property in this way, but adding more than a couple of properties inline can be both unwieldy and problematic when trying to change website style later.

Inline styles lose many of the advantages of a style sheet by mixing content with presentation, so use this method sparingly, if at all.

Cascading Order

It is possible to have a single page with external, internal and inline styles. This isn’t good practice, but it does happen. There could be a situation where the same element (h1 for example) is styled in three different ways on the same page, which would obviously cause some issues in how the element looks.

To avoid this potential problem, CSS uses a cascading priority system, so that last style read by the browser (reading from top to bottom) is the one that is used. In the example above, the inline style would have the highest priority, so the h1 element would be blue, with a 10px left margin.

If there was no inline style, and assuming <h1> was also styled in the external style sheet, the external style would have priority because it is lower in the <head> section that the internal style.

Cascade Priority
1. Inline Styles
2. External and Internal Styles
3. Browser default

Next – Learn how to manage colours and backgrounds with CSS

Previously – Learn about CSS syntax and how CSS is written

Russ Ware

Russ has been testing, reviewing and writing guides for tech since the heady days of Windows 95 and the Sega Saturn. A self-confessed (and proud) geek about all things tech, if it has LED's, a screen, beeps or has source code, Russ will want to master it (and very likely take it apart to see how it works...)

Related Articles

Back to top button