Methods of applying CSS to HTML

There are three methods that can be used to manipulate the design of your page using CSS: Linking the CSS, embedding the CSS or writing the CSS inline (within an HTML element). Each has its own application and advantages.

Writing CSS

CSS follows conventions that are both similar to and unique from HTML. While both specify the appearance of elements with brackets and certain syntax, CSS has two unique elements: the selector and the declaration.

Selector: Code that selects the HTML to manipulate
Declaration: The CSS property or properties that define how the HTML should be manipulated
Value: The expression of how the element should appear

CSS
Many declarations and values may be associated with one selector and sometimes multiple values are possible with a single declaration. Thus, a single selector may contain several lines of code, as we’ll see in a moment.

Inline CSS

Sometimes an individual tag needs to look different than any other instance of the tag on the page or entire site. This requires that we specify the presentation within the HTML of the individual element.

Inline styles affect only that element instance
Inline CSS overrides both embedded, linked CSS
Used only for a unique style that is unlikely to be used again
Often good to avoid because it results in bloated code (and document size) and can be difficult to find within site/code

Example (Always appears within an HTML tag)

<h1 style=“font-size: 24px; color: gray;”>My headline</h1>

Embedded styles

Certain circumstances demand that a single page look unique from other pages and therefore uses unique styles. This is when we embed styles to that page only by writing the CSS in the head of the HTML document instead of linking the CSS. Here are the basics of embedded styles.

Should only be used with a specification that is only used on one page – otherwise place the style in the linked CSS document
Ideal for a single-page design because it is applied to individual HTML page; affects only that page.
Overrides linked styles

Example (Always appears after <head> and before </head>)

<head>
<title>John Doe: Home page</title>
<meta charset="utf-8">
<style>
h1 {font-size: 24px;}
</style>
</head>

Linked styles

The most widely applicable CSS within a site, linked styles are incorporated by linking a separate document with .css extension that is linked to all HTML files in the site.

Employed with multipage sites; contains vast majority of design specifications.
Allows site-wide design changes with the manipulation of only one document.
Link code: <link rel="stylesheet" type="text/css" href="styles.css" />

This assumes your stylesheet is named “styles.css”
This code is placed after <head> and before </head>

These styles are applied to all HTML pages that are linked to the stylesheet
When applied, these styles override the default HTML settings

Example (HTML link)

<!DOCTYPE html>
<html>
<head>
<title>John Doe: Homepage</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

Example (within styles.css)

h1 {font-size: 24px; font-variant: small-caps;}

Beginning a linked CSS document

Most of the CSS we write will be done in a unique CSS document that is linked to our site pages. And like beginning a new HTML file, a new CSS file created with a blank text editor file. Using TextWrangler (or Notepad at home) hit “File > New”.

With your blank document, type the following:

body {
font-family: georgia, “times new roman”, serif;
}

What have you just composed? Simple put, you are telling the browser to apply a black background to the body of the HTML document (which is the entire browser window) and use an available serif font from the list provided here. We will address fonts more in a moment but let’s save this document and link it to our HTML file(s).

Saving and linking a CSS document

Just as with an HTML document, we first select “File>Save As” from our menu and navigate to the appropriate directory. For our purposes, this requires our returning to the folder that contains your first exercise.

With this directory selected, save the file as “styles.css”. The file name does not matter, so long as there are no spaces and it contains a .css extension. You may want to name it “firststyles.css” for your own reference. Remember the file name because we will be referring to it in a moment.

Now that we have a CSS file in the same folder as our HTML files, we have to link the various files. As noted earlier, this is accomplished in the <head> section of the HTML:

<head>
<title>John Doe: Home page</title>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>

This line of code simply tells the browser to connect to a stylesheet named “styles.css”. If you used another file name, be sure to substitute it here. Save your HTML file by selecting “File > Save”.

Open the HTML file in the browser window. Your text should change to a Georgia font from the default browser font (usually “Times New Roman”).

Now click on your internal website links. Notice the font has reverted to the standard browser font instead of Georgia. This is because we have not yet linked the stylesheet to the other pages. These are your next steps before continuing:

Open the other pages in your website.
Copy and paste (or simply type) the code above that links our CSS document to our HTML (in bold).
Save each HTML file and reopen your site in a browser.
Each should have the same font family at this point.

Basics of modifying text

With the last exercise, we established a font family for the entire pages of our earlier site by redefining the body tag. However, the body tag is not unique in this regard: nearly every HTML tag can be manipulated with CSS by simply using it as our selector and declaring appropriate values.

Let’s consider the next tag we experimented with in HTML, the largest header tag <h1> by following these steps:

Open your saved CSS document named “styles.css” (or your chosen alternative).
Beneath the body font-family code, write the following (like in HTML, you are welcome to put elements on the same or separate lines):

h1 {
font-size: 200px;
}

Save your file and refresh your browser window. Your largest headers should be 200 pixels in size -- which is too large for normal use but will reflect a dramatic size change.

Let’s return our header to more common size and add more declarations and values:

h1 {
font-size: 28px;
letter-spacing: 3px;
font-variant: small-caps;
}

Refresh your page and examine the changes. Your header text should now be all caps (done with font-variant) your text should be slightly spaced apart (done with letter-spacing) and it should be red (done with color).

Letter-spacing and font-variant should be used sparingly and usually only with headers.

Lastly, let’s alter the appearance of our paragraphs. Using the same document, add the following below the h1 declarations:

p {
font-size: 11px;
line-height: 16px;
}

Like before, save the document and refresh your page. The differences of text size (font-size), color (color) and leading (line-height) should be immediately evident in your paragraph text.

Methods of applying CSS to HTML

Writing CSS

Inline CSS

Example (Always appears within an HTML tag)

Embedded styles

Example (Always appears after <head> and before </head>)

Linked styles

Example (HTML link)

Example (within styles.css)

Beginning a linked CSS document

Saving and linking a CSS document

Basics of modifying text

jour 355

weekly schedule