COM271, Week 3

Bringing Styles to Web Pages:
Inline, embedded, and external styles

Syllabus | Table of Pages | Assignments | References and Useful Links

Four Ways to Create Style

HTML style attribute: Within any tag, a style attribute can be used to apply one or more styles to the element or its contents. Styles are applied by naming a style attribute and an associated value. The following would render the contents of a paragraph in red:

<p style="color:red;">This type will be red</p>

HTML style element: The html style element—entered within the head element of a page— can contain one or more rules; each rule includes a selector and a block of one or more declarations, each declaration pairing a style property with a value.

selector { property-1 : value-1 ;property-2 : value-2 ; [...etc....]}

—http://www.w3schools.com/css/css_syntax.asp

(Note the use of colon and semi-colon in each declaration: css property : css value ;

The entire element and its contents is the "style sheet." Here is a style sheet with a rule that makes all paragraphs to display as white type on a blue background using arial type:

<style>
p { color : white ; background-color : blue ; font-family : arial; }
</style>

External style sheet with <link>: When a style sheet has many rules, and when the same rules are meant to be applied to many pages within a site, it is most common to save the rules as a separate file and to bring the file onto a page using a link element. The external file consists of the list of rules (without the enclosing tag. The link refers to the file and clarifies that this is a style sheet reference:

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

Note that we've used the file extension .css (you can use .htm as well) and that the style sheet is a file inside a folder named css, which we chose to organize our site. All other pages may share the same styles by including the same link. If we then have 100 pages with the same style sheet, a single change in the style file will alter the appearance of 100 pages with no further work.

@media: Smaller sets of files can be added to the beginning of a style sheet by using @media. We won't be doing this, but here is more information explaining the difference between @media and link, and why to use either.

As a developer, your task is to begin learning how to write selectors, and to develop a rich array of memorized css properties and their relevant values. We'll go over a few more fundamentals for writing selectors and declarations to prepare you for in-depth practice through the Eric Meyer on CSS hands-on-training projects.

Reference