Styles

HTML presents the document content, that is, it mainly displays the text and the images. Styles are used to declareDeclaration

A declaration contains an element name and the values the properties of that element will have. Properties are assigned their values with a colon (:). An example of stylesheet declaration for an <h1> tag might be:
h1 {color:blue; text-align:center} or modify the attributes or properties of that content, that is, a style formats the appearance of the text and images, defining how content should rendered in a browser. For instance, you would use a style to change color, font, font-size, background image, alignment, and layout.

In HTML, an element is everything between a start and an end tag, including its content, any tag attibutes, and any attribute values. Attributes are tag properties, such as color, font-size, font-weight, height, width, or text-align... These attributes can be given values such as blue, 36px, or center... Each attribute has a name and is given a value, following a colon (:). When multiple attributes are used, each attribute is separated by a semi-colon (;).
An example of an inline style element is:
<h1 style="color:blue; font-size:36px; font-family: Arial">

Inline Styles are used "inline" or inside tags used in a page, such as the <body>, <h1>, <p>, <table>, <div>, and <span> tags. They should be the least commonly used styles on a site. (External Cascading Stylesheets are where almost all style definitions should take place.) However, because inline styles are closest to the actual content, inline styles will override both internal stylesheet settings and external stylesheet settings (which are discussed below).

Two important tags must be introduced when describing styles: <div> and <span>. Unlike tags such as <body>, <h1>, <p> and <table>, the div and span tags do not specifically define objects on a page, instead they are used to logically organize objects and content within a page. The <div> tag is used to define a division or a section in an HTML file, such as the MastHead or LeftColumn or Footer. This is usually done so this section can be consistently formatted with the same styles. A div is a block element. The <span> tag is used to set a style to a small selection, such as for a phrase or a term. A span is an inline element.

Below are examples of inline styles within the <body> tag of a sample Web page that you can copy and paste into a practice page, and experiment with:

<body style="background-color:#FF9">
or
<body style="background-image:url(images/myHeader.jpg)">
<div style="width:600px; margin-left:10px; border:2px solid blue">
  <h1 style="font-family:Arial, sans-serif; color:blue">Title</h1>
  <p style="font-size:20px; text-align:justify">This is demo text</p>
  <p>This is <span style="font-size:1.4em; font-weight:bold">important</span></p>
</div>
</body>

Notice the syntax rules above:
1. An inline style is declared inside an existing tag and begins with style="
2. Each attribute is assigned a value with a colon (:), for example: color:blue
3. Multiple attributes are separated by semicolons (;), for example: font-size:20px; color:blue

There are three types of SelectorsSELECTORS

A CSS selector either names and modifies the properties of an existing HTML tag (type), or it declares a custom defined class or custom defined ID element in a stylesheet. Once the selector has properties assigned to it, those properties can be displayed for those particular elements on all pages linked to the stylesheet. used with styles and stylesheets: Type or existing tag selectors, ID selectors, and custom class selectors. They use this syntax: Selector {Property:Value}

1. Examples of HTML Type Selectors, which are used with existing tags, as defined in a stylesheet:
body {width:1000px; margin:auto; background-color:yellow}
h1 {color:blue; text-align:center}
p {font-size:18px; font-weight:bold}
Once they are defined in a stylesheet, if there are multiple <h1> or <p> tags on a Web page, they will all display the same property values (color, size...) declared in that stylesheet.

2. ID Selectors name and set styles for divisions or sections on a page, These sections use the <div> tag within the <body>. ID selectors start with a # when defined in a stylesheet. Some examples of ID Selectors are shown below:
Stylesheet ID example definition 1:
#masthead {background-color:#99FFCC}
Stylesheet ID example definition 2:
#container {margin-left:10px; color:blue}

Below is an example of code, placed within the <body> tags, showing how to reference an ID which was defined in a stylesheet.
<div id="container">
Add several paragraphs or image content here
</div>

3. Custom Classes Selectors or custom named and defined styles start with a period (.) when defined in a stylesheet. Some examples of Class Selectors are shown below:
Stylesheet class example definition 1:
.topic {font-family:Arial, Helvetica, sans-serif; color:blue}
Stylesheet class example definition 2:
.important {color:red; font-weight:bold}
Below is are examples of code placed within the <body> tags using classes defined in a stylesheet:
<h2 class="topic">Section 1</p>
<p class="important">Notes</p>

An Internal Stylesheet is used to give consistency to the layout, format, and tag properties on a particular Web page. For instance, you could declare the default font-family and color of all <h1> tags on a page or the default font-size and text alignment of all <p> tags on a page. An internal stylesheet is placed inside the <head> tags. It begins and ends with the <style> tag. Copy and paste the internal stylesheet example below within the <head> tags of a practice Web page; then add text and tags to the body of the new document. Notice how the <body> tag and every <h1> and every <p> tag on that page will have the properties shown below:

Note 1: Each attribute is assigned a value with a colon (:). Example: margin-left:10px;
Note 2: Multiple attributes are separated by semicolons (;). Example: margin-left:10px;border:2px solid blue;
Note 3: Attributes are enclosed in curly brackets or braces { }

An External Cascading Stylesheet (CSS) is used to give consistency to the layout, format, and tag properties for an entire Web site. For instance, you could declare the default font-family and color of all <h1> tags on a site or the default font-size and text alignment of all <p> tags on a site. External Cascading Stylesheets should be the primary place to set virtually all of your style definitions.

An external cascading stylesheet is saved as a separate file. Its file extension is .css. There are only style declarations in an external stylesheet, and no HTML tags, not even the <style> tag. If you copied everything between the internal stylesheet shown above (without the <style> tags) and pasted it into a separate document, and saved it in the same folder as your Web pages, with the name yourSite.css, you will have created an external CascadingCASCADING

"Cascading" because a single change on a cascading stylesheet such as a new background color, can cascade down to every page on a site. Stylesheet. Then you could link the same external cascading stylesheet to every page on your site if you add the following statement inside the <head> tag to every page on your site:

1. Create at least two simple practice pages and link them to yourSite.css.
2. Modify the styles and see how they affect your pages
3. Experiment and learn. Stylesheets are perhaps the most powerful and important feature in Web page development. External Cascading Stylesheets are covered in a separate tutorial.

For more HTML code samples see: www.w3schools.com
For other resources and tutorials see: quackit.com and htmlquick.com
ValidateValidate

Validation checks the syntax of your file, looking for both errors and possible issues when viewing your page in a browser. Some of the problems reported are missing end tags, missing characters, invalid attributes, incorrect nesting of elements... your file, see: http://validator.w3.org

Review Assignment Learning Project: 10 Practice Review Steps

Intro to Styles