Did you find this useful?
Socialize it today.


HTML Styles

Monday, February 13, 2012

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 example shows how to change the color and underline the text:



<span style="color:red;text-decoration:underline;">Apply style to this text.</span>

Apply style to this text.


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 of



<head>
<style type="text/css">
  body {background-color:blue;}
  p {color:white;}
</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 Web site 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. Save the stylesheet as a .css file. Please visit our home page for more detailed tutorials on CSS.

Please help us spread the word by socializing it today!

email contact us

Did you find something wrong with the information on this page? Please take a moment to report it to us so that we can continue to improve the quality of the information on this site. Click here to report an issue with this page.



Recommended Books & Training Resources

Creating Web Pages Simplified HTML CSS and JavaScript Editor HTML CSS: The Complete Reference