HTML is limited when it comes to the appearance of its elements. If you are trying to apply a nice look and feel to your web pages, then you’ll need to leverage CSS. CSS stands for Cascading Style Sheets, and its primary purpose is to enable web developers to apply styles across their web pages.
With CSS, you can specify a variety of properties for a given HTML element. Styles can be declared in three ways: inline, internal, and/or external. With CSS, you are not limited to applying styles in one manner. For example, you may want to have a style applied globally to all of your hyperlinks, so you would use an external style sheet.
However, on one specific page, you may have a hyperlink that you want to style differently. On that HTML tag, you can apply an inline style. The order of “applying” styles is as follows: external –> internal –> inline. If you apply the same property on an external style and apply a different property on the internal and/or inline, the inline will take priority.
Inline Styles
An inline style can be used if a unique style is to be applied to one single occurrence of an element. To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The following shows how to change the color and underline the text:
<span style="color:red;text-decoration:underline;">
Apply style to this text!
</span>Internal Style Sheet
An internal style sheet can be used if one single web page has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag. Here is an example:
<head>
<style type="text/css">
body {
background-color: black;
}
p {
color: yellow;
}
</style>
</head>External Style Sheet
An external style sheet is used when the styles need to be applied to many pages. With an external style sheet, you can change the look of an entire website by changing one file.
Each web page must link to the style sheet using the <link> element. The <link> element is placed within the <head> section of the web pages. Here is an example of the code that you place in each of your pages.
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>Rather than storing the styles in each page, you save the style information in one central file. Here is an example of the content stored in a CSS file.
Save the style sheet as a .css file. Store the file in a central location. This can be the root folder of your website. If you plan on having more than one CSS file, you can organize multiple files in a single folder.
body {
background-color: yellow;
}
p {
color: blue;
text-align: center;
font-family: “Century Gothic”, Verdana, serif;
}
