Classes, Inline Styles and HTML Elements

It's !important (hehe) to know how your styles are being applied to the DOM. There are some pitfalls to be careful of, but first let's quickly re-cap the different ways to declare your styles:

  • Inline Styles
  • Enbedded Styles
  • External Styles

Inline Styles

These are the styles that are written inside the actual element.

<input type="button" style="background-color:#bada55" value="Button1" />

Inline styles will always take precedence over any other style declaration which can be both good and bad. It's a good practice to NOT use inline styles wherever possible, because it can cause conflicts with other style declaration methods and you will pull your hair out trying to find where the conflict is happening: ie Is it inline, in the embedded style block or in the external stylesheet?

Embedded Styles

These are the styles that you see in a style block in the head of the document. Best practice is to always put this style block between the head elements.

<!DOCTYPE html>
<head>
	<title>My HTML Document</title>
	<style>
		.differentbutton {
			background-color: #543212;
		}
		.button {
			background-color: #ff0000;
			color: #ffffff;
		}
	</style>
</head>
<body>	
	<input type="button" class="button differentbutton" style="background-color:#bada55" value="Button1" />
</body>
</html>

If there is no matching inline style for the targeted element, an embedded style will be applied. In the example above, the input button has an inline style for background-color and also a class of button. The class name button is declared in the embedded style block, which is also trying to apply a background-color style. Using the rule we just learned, the inline style will always win. However, the color attribute applied in the embedded style will be applied because there is no competing style attribute in the inline styles.
It's also important to understand that ordering is key in styles. If there are two conflicting styles being applied to the same element, the latter one will always win. For example, the above code shows the button with two class names - button and differentbutton. You can see in the embedded style block that both of these classes format the background color of the element. Let's forget that there is an inline style in the element for a second. The background color would be applied from the button class, because it appears after the differentbutton class in the order of the document. This is also true for inline styles. If a style is applied twice (it can happen) within an inline style block, the latter style will override the earlier one.

External Styles

These are styles that are declared in a completely different file. The file is a Cascading Style Sheet (CSS for short) and is referred to when the document is being formatted. Again, best practice is to do this in the head of the document and we are creating a reference (or link) to the location of the external stylesheet. The CSS file is essentially a list of embedded styles, except that they exist in a different file. This helps to keep your documents tidy, because you have HTML in the HTML file and styles in the CSS file.

<!DOCTYPE html>
<head>
	<title>My HTML Document</title>
	<link rel="stylesheet" href="styles.css" >
</head>
<body>	
	<input type="button" class="button" style="background-color:#bada55" value="Button1" />
</body>
</html>

This code tells the HTML document to go looking for a CSS file called styles.css in the same folder as the HTML file. You can reference another folder or even an entirely different website, just make sure you get the path correct. If the link finds that file, it will load the styles from that file into the HTML document and apply the formatting to any element that matches the CSS selector - unless there are matching inline styles (which take precedence (of course).

There is also another important part of CSS that you should be aware of. I mentioned just above that CSS uses selectors to "target" elements in the HTML. Selectors could be a class attribute, an ID or even the actual element itself. Take this code for example

<!DOCTYPE html>
<head>
	<title>My HTML Document</title>
	<style>
		input {
			background-color: #efefef;
		}
		.button {
			background-color: #abcdef;
		}
	</style>
</head>
<body>	
	<input type="button" class="button" style="background-color:#bada55" value="Button1" />
</body>
</html>

The first selector in the embedded style block references the input element. This means that every single input element on this page will be formatted in that way. This is a really powerful selector especially when used in an external stylesheet. If every page has the external stylesheet loaded, every input button throughout the entire site will be formatted exactly the same way. However, this element selector does break the rules that we have been talking about. I mentioned earlier that the order matters when laying out your styles. The element selector breaks the mould. An element selector will always take precedence over another embedded style trying to apply the same style. So in the above example, the background colour of the button will be #efefef.

Please note: There is a style attribute that can be used to force a style, regardless of where it fits in the hierarchy. This attribute is called !Important and if it is used in an embedded style selector, it will take precedence over inline styles. You should really try to avoid using !Important because it can cause confusion and often makes it hard to troubleshoot style problems. However, there might be times when you need to use it, so keep that in mind.

Til next time ...