Styling of HTML can be done in a number of ways. The easiest and often the least recommended way is to use inline styling where a style is applied to a single element by adding the style attribute. The generally accepted way of styling elements is to include a CSS stylesheet which is known as external styling. Internal styles can also be used.
Inline styles
The format of applying an inline style is as follows:
<tag style="property:value;>
As an example let’s apply the colour blue to some text:
<p style="color: blue;"><span style="color: #0000ff;">This text is blue</span></p>
Our CSS lessons go into more advanced styling of HTML elements.
Internal styles
Internal styles can be included by placing the
tags between the tags.
<style> .someClassName {background-color: #FFFFFF;} #someIdName {color: blue;} h1 {color: green;} p {color: rgb(0,0,255);} </style>
External styles
External stylesheets can be included by placing a link tag between the head tags
<link rel="stylesheet" href="externalStylesheet.css">
Some commonly used style attributes:
font-family – changes the font
E.g font-family:courier;
font-size – changes the font size
This can be specified in %, px, or em. E.g. font-size: 20%; or font-size: 20px; or font-size: 2em;
text-align – aligns text
E.g text-align: center; | text-align: left;
background-color – changes the background colour
E.g background-color: green or background-color: #00ff00