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

<style type="text/css">
  body {background-color:blue;}
  p {color:white;}

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.

  <link rel="stylesheet" type="text/css" href="style.css" />

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.

Did you find the page informational and useful? Share it using one of your favorite social sites.

Recommended Books & Training Resources

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