Nothing is for sale here. Freewill tips keep the site running. Want to help? → Tip via Paypal
CSS Style Sheets
CSS can be implemented in three different ways—inline, embedded, and external—so it’s very flexible.
Inline Styles
An inline style rule is coded into an HTML tag within the flow of your source code. The purpose of inline styles is to allow you to override an embedded or external style rule (or the default style) for any HTML element. In other words, an inline style lets you create a quick rule for a situational purpose.Embedded Styles
Embedded styles are coded into the HEAD section of your source code. Embedded styles allow you to override the rules defined in an external style sheet (or the default style) for any HTML element. The difference between an inline rule and an embedded rule is that with an embedded rule, you don’t have to create a rule with each use of an HTML element on the page. An element given an embedded style rule will render that element according to that rule each time it’s used on the page (as long as no inline style is used to override it).External Styles
External styles, also called linked styles or remote styles by some writers, are the least important in the cascading order, but the most powerful! An external style sheet uses a link placed in the HEAD section of your web page that leads the browser to a separate file containing your style rules. The advantage of external style sheets is that you can make a change in that one external file, and have that change reflected on every page of your site that draws its style rules from it.Using Inline Styles
Inline styles are added directly to HTML tags, so using them is very much like adding an HTML attribute and value to an element, only the word style becomes the HTML attribute and the syntax is slightly different. You can use inline style tags anywhere in the body of an HTML document. Here’s an example:
In the above code example I’ve taken the HTML blockquote element and created a padding of 50 pixels within the element. With inline styles, the word style is actually an HTML attribute. After the equal sign the CSS property and value are added between quotation marks just as you would to add an HTML value to an attribute. With inline styles, the HTML element you’re adding a style rule to becomes the CSS selector, so only the CSS property and value are used.
As with any HTML element, when I want the blockquote to end I need to cancel it. That’s accomplished in the exact same way as cancelling an HTML element without a style added to it, like this:
Using inline CSS only affects the HTML element that it’s coded into. If you wanted to repeat that style for another blockquote on your page you’d have to code that style into the other blockquote tag. Keep reading to discover how you can implement CSS in ways that you don’t have to code it into each element.
Using Embedded Styles
Embedded styles are coded into the HEAD section of the page, right smack between a style declaration opening tag and style declaration closing tag.Unlike inline style rules where you have to code a style into each HTML element where you want it used, embedded style rules affect every usage of the HTML element you’ve created a style rule for on the page where the rule is embedded. Here’s an example of an embedded style:
<head>
<meta charset="UTF-8">
<title>Your Title</title>
<style>
div {font-family: Arial; font-size: 14px; margin-left: 30px;}
p {border-left: solid red 1px; padding-left: 5px;}
</style>
</head>
If the above style rules (lines 4-7) were placed in the HEAD section of your page, here’s how it would affect your page display:
- Each time you used a division tag (<div>) on a page with that style rule, the text within that division would be in the Arial font at 14 pixels, and the division would have a margin of 30 pixels on the left side.
- Each time you used a paragraph tag (<p>) there would be a 1 pixel thick solid red line on the left edge, and there would be 5 pixels of padding between the red line and the text.
HTML elements are enclosed between the < and > signs. Confusion would abound if CSS also used arrow brackets to enclose selectors. Therefore, the opening <style> and closing </style> tags identify the code in between as CSS code.
The CSS selectors, which are the HTML elements you wish to create a rule for (the division and paragraph elements in the previous code example) are followed by curly braces { … } that contain the property and value, which is the rule or rules for the chosen selector.
The property and value are separated by a colon and space (the space is optional, I like to use it because it makes it easier to scan the code when you want to edit it). Example:
The semi-colon signals the end of a rule. Because each selector can have more than one rule, the semi-colon also serves as a rules separator. Example:
font-size: 12px;
margin-left: 30px;
In that example (taken from the style rules I created for the division tag above), you can see there are three rules, only this time I placed each rule on a separate line for easier visual comprehension.
Those last two examples do not show the CSS selector. Included, the last example looks like this:
font-size: 12px;
margin-left: 30px;}
You should always include the semi-colon after a rule, even if you’re only creating one rule. The truth is, a single rule will work most of the time if you forget the semi-colon, but results can be unpredictable in some instances. It’s also a good habit to start. If you make a habit of always including the semi-colon, there’s less of a chance you’ll accidentally leave one out where it’s needed.
That’s the basics of using embedded styles. Now let’s look at external style sheets.
Using External Styles
An external style sheet contains the style rules you create, saved in a plain text file, but with a .css file extension instead of a .txt file extension. To save a file with a .css extension, in most text editors you can simply place quotation marks around the file name and extension as you save it. Example:"my-styles.css"
The contents of your external style sheet is the same as the style code you would place in an embedded style, minus the opening:
<style> …and closing… </style>
…style declarations. These are not needed because the browser knows it’s a style sheet from the link placed to it in the HEAD section of the page and from the file extension.
To link to an external style sheet, place the following code in the HEAD section of your page:
<link rel="stylesheet" href="my-styles.css">
There is no closing tag for this link in HTML.
Where I have “my-styles.css” in the code, you’d change that to reflect the name of your own style sheet, and if necessary, the server path to the style sheet. (If you need it: server paths tutorial.)
Below is part of a real style sheet from one of my web sites, along with an explanatory note I added for your benefit.
body {background-attachment: fixed;
text-align: justify;
font-family: Verdana, sans-serif;
font-size: 14px;}
table {text-align: justify;
font-family: Verdana, sans-serif;
font-size: 12px;
border: 1px solid black;
padding: 7px;}
/* You can align the styles like above, or
run it all together like below. This is how
to make a comment in a style sheet. */
a {font-family: Verdana; text-decoration: none;}
a:link {color: #7C7161;}
a:visited {color: #7C7161;}
a:hover {color: #36cc9a; background-color: #000000;}
a:active {color: #B70004;}
h1 {font-family: 'Garamond', serif; font-size: 24px;}
h2 {font-family: Verdana, sans-serif; font-size: 20px;}
h3 {font-family: Verdana, sans-serif; font-size: 16px;}
Don’t worry if you don't understand what each of those rules mean right now. There are tutorials for all of it on this site. After a while the ones you frequently use become second nature, and the rest you can look up as you need them.
As you can see, the external style sheet utilizes the same format of writing the style rules as an embedded style sheet, only the text is kept in a separate file. It’s just a plain text file with the style rules you want, saved with a .css extension and called into use by linking to it in the HEAD section of the source code.
In the above example, my style sheet was saved as:
sitewide.css
I named the file “sitewide.css” because it contains the styles that are used throughout the site. You can name your linked CSS files anything you like as long as there aren’t any spaces or special characters in the name. However, using sensible naming conventions helps to keep things organized, especially when you have a lot of web sites and/or multiple stylesheets.
About multipe style sheets: You can use as many external style sheets as you need. For example, if you had a sports site and had one directory for football, one for baseball, and so on, you could have a style sheet that covered the whole site, and seperate style sheets for each directory that had styles that only apply to that directory. Just link to each style sheet in the HEAD section of the pages it's relevant to and you're good to go.Speaking of going, I'm outta here, but feel to to stay and look around as long as you like. I'll leave the light on for ya.
