Learn CSS – Part 1: Where to Place Your Cascading StyleSheet

This is the first of a seven part series where I will discuss how to code using CSS. Each page will fully explain the various tags used with this language with corresponding images. So make sure to stay tune!

Learn CSS: 3 Places to Place Your CSS

My article, What is CSS: Explaining the Presentational Layer of a Webpage, gave some foundational knowledge of cascading style sheets. This article will take you further by describing the different methods used to write the language and where to place it.

Learn CSS – Part 1: 3 Areas to Place CSS Coding

Before I go any further, if you are not familiar with HTML coding, then you might have some difficulties relating to the information below. Take a minute and read my articles What is HTML: Understanding the Content Layer of a Webpage and HTML Tags – Part 1: The Structural Elements in order to have a better understanding of how to merge CSS and HTML together.

Area 1: In-line Styles

Writing your CSS code within an HTML tag is called in-line coding. Below is an example of how to write in-line coding using the font-style CSS command.

<p style=”font-style: italic;”>This paragraph is italicized by using the font-style command.</p>

The line of code says all the copy within this paragraph tag will be italicized. So how does this work, you might be thinking? I’m glad you asked! In order to perform in-line coding, you have to start with an HTML attribute called style. The style attribute allows you to write the cascading style sheet command, font-style, and place its value, italic, inside two double quotes. Below is how this line of code would look:

This paragraph is italicized by using the font-style command.

Area 2: Embedded Method

Embedded CSS allows you to modify all of the tags within your HTML document within the <head> tag. This is done by creating a <style> tag (not the style attribute mentioned above) and choosing the HTML tags you want to modify:

Embedded CSS Example

What this says is all paragraphs within the document will have yellow copy, their background will have a color of green, and be centered. Any HTML tag can have multiple properties attached to them.

 

Area 3: External Style Sheet

Creating an External Style Sheet gives you much more leverage when creating a website. The file that contains the styles will be linked into the HTML document with the <link /> tag. Usually the name of the cascading style sheet is called styles.css or style.css but it can have any name you choose as long as it ends with .css. Below is a snippet of an external file and an HTML document:

External File – styles.css
p {border: 1px solid #000;}

HTML Document

<head>
<link type=”text/css” rel=”stylesheet” src=”styles.css” />
</head>

The <link /> tag tells you what type of document is being used (in this case a text-based css file), specifies the relationship of this document, which is a stylesheet, and lets you know the source or location of the CSS file name, styles.css.

Styles.css can hold as many lines of CSS code as you like to perform various presentational commands for your HTML file. Unless some HTML coding needs to be modified, you will never have to change your HTML document using this method.

Your Thoughts On The CSS Coding Methods

Before you move on to the next article, tell me…

Which method have you used in your projects? Let me know your experience using these three tactics on my Facebook Page.