HTML Styles & CSS
HTML is limited in terms of adding that extra aspect of a website that makes people visually appreciate your content aka, the Style of your website. In this tutorial I will share with you how to Style your various HTML Elements.
Styling HTML Elements
CSS aka Cascading Style Sheets is a companion language to HTML. I like to say that HTML is the Skeleton of a Website and CSS is the Skin of a Website. CSS enables you to target elements either by the actual tag name or by targeting a class or ID. You can change various aspects to an element like the size, color, font, width, height and much more.
How To Add Style to HTML Elements
There are three ways or locations you can add style to an element.
- Inline Styles – Using the
style
attribute in the HTML Start Tag. Example:<tag style="property:value;">
- Embedded Styles aka Internal Styles – Using the
<style>
element in the head section of the HTML Document. - External Style Sheets – Using the
<link>
element in the head section of the HTML Document pointing to a CSS file.
Quick Note: If you are targeting an element or class or ID with all 3 options above, there is a priority that the browsers will use. Inline Styles are the highest priorities followed by Embedded Styles and finally, External CSS Files. Also note that if you target something with CSS in multiple files or the Embedded method, CSS Cascades meaning that the last style reference will be the one used. So be mindful of that fact.
Inline Styles Explained
You can put CSS rules directly into the start HTML Tag with the style attribute. The Style Attribute uses a property and value combination the same way you would do so in the Embedded or External CSS methods.
Here’s an Example:
<p style="color:red; font-size:24px;">This is text that's red and larger than normal</p>
While using Inline Styles might seem convenient, it’s typically recommended that you use your general styles in an external style sheet or Embedded in the head. This is primarily because managing changes or updates to how you style your content will be optimized by grouping your styling in an external style sheet that can be used by more than one HTML Document.
Embedded – Internal Styles Explained
Embedded Style Sheets aka Internal Style Sheets use <style></style>
tags in the head section of your HTML Document.
<head>
<style>
body { background-color: #000; }
h1 { color: #fff; }
p { color: #eee; }
</style>
</head>
External Style Sheets
External Style Sheets are the preferred way to group your CSS Styles. This ensures that you don’t have to repeat yourself. There’s actually a term in coding “D.R.Y” Don’t Repeat Yourself. It will make keeping your code modular and easy to maintain which is important.
<head>
<link rel="stylesheet" href="css/style.css">
</head>
HTML Styles & CSS Recap
Making your HTML Documents for your website look good requires you to Style it out with CSS using one of 3 methods; Inline, Embedded/Internal and External Style Sheets.
Hopefully you enjoyed this tutorial and make sure to checkout other HTML Tutorials here on PixemWeb. Till next time, Happy Coding.