Stylesheets

May
28

2 Comments - LEAVE A COMMENT

A lesson on inline, linked and embedded CSS styles.

Lesson Level: One

The three methods

Beginners CSS Book Recommendation:

There are three ways you are able to call on your CSS styles. One, the most efficent ways — especially if you have a large site and the same general styles will be applied sitewide, is using the <link> element (External Style Sheets). The second, and most popular amongst new users and those with styles that apply to only one page is to use <style type=”text/css”> styles </style> in the head of the HTML (Internal Style Sheet). The third method is embedding a style right into the HTML (Inline Styles)

Using the <link> element

In HTML there is the <link> element, which is placed in the <head> of your document. This will link your stylesheet to that page and the browser will use that stylesheet for that page. What you would do is write up all your HTML in one file and save it as an .html file (or whatever extension is applicable). Then write all your CSS in another file and save it as a .css file. Than, in your HTML somewhere in your <head> place the following code:

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

Where $stylesheetname.css whill change to whatever the name of your style is. If you are using more than one style sheet, (for different medias) than you would use the following variable for the media tag: screen, print, aural, braille, projection, tv, all. Right now though the only things you will need to worry about is screen, print and all. To incorporate different media settings for your styles, you would add the following to your <link> section (changes in red):

<link rel="stylesheet" href="$stylesheetname.css" type="text/css" media="screen" />
<link rel="stylesheet" href="$printstylename.css" type="text/css" media="print" />

Using Internal Style Sheets

Internal Style Sheets inculde the same information you would put in your external style, but instead of saving it in a seperate .css file, you would put all the style right in the <head>. For example:

<style type="text/css">
body {background:#000;
}
</style>

This is a good way to place in style that would only be used on that page. For example, if you had an ordered list that you wanted to have an orange background just on one page, you could place that style in the head section.

<style type="text/css">
body {background:#000;
}
.thisPageOnly ol {background:#FD8126;
}

</style>

Inline (Embedded) Styles

Inline styles are not the best way to go about calling upon styles for elements on your site. If used to often they become bulky and can transform your code into a mucky, thick mess. But, sometimes they can help. For example, if you have a style you want to apply to something one time only, than of course, it can help. For example, you have an image, on one page than you want to float to the left of the text. See the example below:

Example of Inline Styles:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.PC pixel graphic from http://www.conan.pwp.blueyonder.co.uk/graphics/pixels/pixels.html Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

As you can see, the image is set to the left in the middle of the dummy text. The “source” for this is below (ACTUAL CODE IN RED):

<p style="text-align:justify";>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<img src="computer.gif" style="float:left; border:0; padding-right:2px;" alt="PC pixel graphic from http://www.conan.pwp.blueyonder.co.uk/graphics/pixels/pixels.html" /> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. [ . . . sic . . . ] </p>

As you can see, first, I added a style to the <p> tag. I told it to make the entire contents “justify” in alignment between <p> and </p>. Than, I threw in the image of the pixel PC (adopted from here) and added the following style to it: <img src="computer.gif" style="float:left; border:0; padding-right:2px;" alt="PC pixel graphic from http://www.conan.pwp.blueyonder.co.uk/graphics/pixels/pixels.html" />. So you can see how this can become a burden if you chose to do this to every single time. So remember, if you are applying a style to just on element use the following syntax:

<$HTMLTAG style="$CSSPROPERTY:$CSSATTRIBUTE;" />

Jump to Comments

2 Responses to Stylesheets

  1. virgix says:

    I liked the example of Inline Style, with the image set to the left in the middle of the text: really useful for me, thanks!

  2. Lindsey says:

    No problems! Also, if there is an item you would like floated like that often you can just define a class in your external stylesheet to control this. I usually do this by adding these classes to my style sheets:

    img.left {float:left;
    margin-right:5px;
    }

    img.right {float:right;
    margin-left:5px;
    }

    Than I can add class=”right”, or class=”left” to any images that I will be using and they will behave as I wish without all the inline style code!

Leave a Reply

Your email address will not be published. Required fields are marked *