Six ways to use CSS with HTML

Published January 7, 2015 by CSS Newbies.

Cascading style sheets or CSS for short were introduced to customize the styling and layout of your HTML. Since 1996 they have become an integral part of all websites and a necessity for making your page aesthetically pleasing. CSS was designed to be used with HTML so there’s many ways you can use it within your page. Below I have listed 6 common ways to use CSS within HTML.

1. The Link Tag

The link tag is the most common way to include an entire CSS file into your HTML page. This is called using an external stylesheet. The tag does not require a closing tag. This tag should be put in the tags on your page.

<link href="filename.css" rel="stylesheet">

In the tag above simply change filename.css to the name of your CSS file.

2. Style Tags

The second way to include CSS into your HTML is style tags which do require a closing tag. This is referred to as internal styling. The style tags allow you to type CSS between them. These can be put anywhere on your page but it’s best best practice to put them above your content or in the head tag.

	<style>
		body{
			width: 100%;
		}
		
		h1 {
			color: #FFF;
		}
	</style>

3. Inline Style Argument

You can include a style argument on most HTML tags. This allows you to style that individual tag similar to an id.

	<span style="font-size: 15px; color: #FFF;">Hello World</style>
	
	<h1 style="font-family: Arial;">Hello World</h1>

4. Alter elements through Javascript

Using javascript you can alter elements styling and adjust them as needed. This isn’t commonly done on web pages without a specific need for it. Usually you would need some sort of user interaction or change that would take place and you would alter an element on your page. A common use for this would be a “show more” button for a descript that unhides more text for the user.

<div id="show_more" style="display: none;>
	Additional text!
</div>>

<script>
	document.getElementById('show_more').style.display = 'block';
</script>

5. Combining Internal & External styling
You can use internal and external styling in conjunction with each other. This allows you to include a site wide stylesheet and also use some customized styling for specific pages or elements. To do this you would use the Link tag in you heading and also use Style tags throughout your page.

6. Combining Internal, External, & Inline
Combining these three practices of CSS styling is an easy way to customize your page exactly how you want it. You can have a site wide stylesheet, page specific styling, and a few element specific style adjustments to make your page exactly how you want it.