External, Internal and Inline CSS Styles

Posted: October 20, 2010 by Connor Crawford in css_presentations, Uncategorized

(Our group project, with Connor Crawford, Alex LaLonde and Carl Ferrell)

Inline styles are the least flexible type of style to implement. You can apply inline styles to any tag, for example:

<p style=”color: red”>

Paragraph text goes in here

</p>

The advantage to using inline styles is that they can be used to troubleshoot. Inline allows the coder to eliminate all variables, and clearly see what is wrong.

With internal stylesheets, a web page’s styles are all specified at the top of the page code, within the <head> tag for the page. For example you might use the following code to specify properties for your <h1> and <p> tags:

<head>

<style type=”text/css”>

h1 {color: blue; font-weight: bold}

p {color: gray}

</style>

</head>

External stylesheets allow you to put all of your styling information into a completely separate CSS file. You can then simply reference this file from within each web page, and the page’s content will then be styled accordingly.

To include an external stylesheet in one of your web pages you need to add a <link> tag within the <head> tag of your page. The following example would link to a stylesheet called stylesheet.css:

<head>

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

</head>

It should be clear that external stylesheets offer the most in terms of flexibility and ease of use, and they also provide the fullest separation of HTML and CSS of all three options. A stylesheet can be applied to multiple HTML files, and thus efficiently style an entire website.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s