HTML means HyperText Markup Language it is the code that Webpages are made out of.

In our series of lessons we will cover how to build a webpage by putting together a number of HTML elements to control layout, formatting and to add items like images and multimedia.

Elements are objects that make up a page.
Many elements have a <starting> tag and an </ending> tag but some like the Image Tag <img> only use a single tag. You can think of elements as containers that you put things in. They store items just like you would in a refrigerator.

Think of your Refrigerator as the WebPage and inside you have many containers or Elements to store items.

Within each element (container) there are ways to modify the attributes of the items inside.

<font color=”red”>This is a red font</font>

As you learn how to use more elements on your pages you will also find ways to use them together to make a nice presentation for your visitor.

Although there are many more aspects to building a good website that are outside of basic HTML this is the foundation for every website. It does not matter how big the site is or what super spectacular features they may have when the page is presented on your home computer it is HTML that renders the pages in your web browser.

Now yes there are a few addons that your browser can use like javascript or flash but even those elements rely on some html to get their work done.

So, since this is the first lesson we won’t get caught up with learning complex things but it is a good time to think about how you should learn.

First you should always remember that no site is ever perfect. You can spend hours designing your layouts but if that takes away from your writing content then whats the use. In other words you should try to keep your sites as simple as you can while still adding all the feature that you want.

Don’t worry about being on the cutting edge of web design as long as your site works for you and your visitors. Things will always change and every new version of some browser will add something or end up breaking your pages. Don’t try to please everyone. Read your website log statistics and you will see that most of your visitors will use 1 or 2 browsers so install them on your home computer and view your pages before you make them live.

And here is a clue for the most part unless your site is very specific your visitors will be using either Internet Explorer or Firefox. And within those two browsers you will find most people will be using the newest version after it has been released for about 3 months. However some people never seem to upgrade. After IE and FF you will find a number of visitors probably less then 25% that are split between the 50 other browsers most you have never heard of before. Don’t get caught up in pleasing them all. If you write simple clean code then your site should work for everyone and if not then those people have problems with many sites not just yours.

Take advantage of View Source in your browser.
This is probably the best way you can learn at first and even later down the line when you want to do something special like implementing a new menu that you like on someone else’s site. Now we are not saying that you should steal sites that is a definite (do not do) but it is ok to get ideas from other sites and implement them in your own designs. So, admire, learn from and implement but never make a direct copy of any live site.

Resources
Hopefully this site will be a good resource for learning both basic and advanced skills but you should also think about design.

Free Template Sites
The best places for new design ideas, other then every page you visit, is a free template website. Many developers that build sites professionally will also include free versions of their sites for people to download. They do this for a couple reasons: Advertising of their style so they can build pay sites and also just for fun.

Free Code Sites
Another resource you will need to find is a place to find code samples. Although we will start off with HTML for building your pages you should also learn about a few programming languages like Perl, Java, PHP and other products that work on your server or software like Flash, Java and Javascript that work in your browser.

Free code is always your first and best resource but you may want to invest in specific software packages or in some situations hire someone that will build your website’s code while you handle the layout. The one thing you have to remember about paid software is that you get what you pay for and in this meaning its not about the quality of the code but more the features you can add. If you go with popular open source software you  are likely to find community support and people that write free add-ons that you may need.

So, unless you are doing something really special and specific to your company that no one else in the world needs to do try to stick with open source software or at least paid packages that have a large community following.

Thats basically it … in other lessons we will cover all of the different HTML Elements and try to put them to good use. We will also go over some software packages you should use and in our other lessons we will cover setting up a server, programing languages, website package software and everything else we can think of to help you design the website you always wanted.

<!DOCTYPE> Tells the browser what version of HTML it should expect

<html> Starts the page

<head> Includes non displayed information such as the title and links to other files

<title> Is displayed in the browser title bar

<body> This is where all of the content of the page is placed

The format for these tags is as follows

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=’stylesheet’ href=’http://www.oursite.com/sitestyles.css’ type=’text/css’ media=’all’ />
<title>This is the page title</title>
</head>
<body>
Page Content In Here
</body>
</html>

In the example above you can see that all of the element tags with the exception of LINK and DOCTYPE have a beginning and a ending tag. However you can also see that these two tags use a trailing slash / on the closing > to indicate that the tag element is closed. Like this />

A Link Tag is not one of the mandatory Tags but it is included in the example to show its placement.

To start any page you should include the DOCTYPE In our case the doctype for our page is (XHTML 1.0 Transitional) meaning the browser should understand that it will be receiving html that is compliant with the XHTML 1.0 Standard.

Immediately after the Doctype we have the HTML Tag. This tag will encapsulate the whole page with a start and end tag of <html></html> It tells the browser to begin reading in the page here and end there.

At the top of the page right after the HTML Element we add a <head> area that can contain information about the page such as the title that will show in the viewers browser title bar and other information such as links to files that will add support for the up coming HTML page.

Items that may be included in a header area include:
CSS formatting information or Links to an external file
Javascript commands or links to an external file.

There is no difference between adding css or javascript directly in a file or linking to it other then the fact that if that same information is used on many pages it can be easier to link to the file that way you only have to update one file instead of each page of your site.

The <body> Element Tag is located after the HEAD element tag closes.

The BODY area is where you will place all of the HTML Elements needed to display the content of your page. You will put all of your Text, Links to Images, Multimedia and basically anything you want your visitor to see in this area.

At the bottom of the page you will see the BODY tag Closes then the HTML Tag Closes to tell the browser the page has been downloaded completely.

Make an empty folder to store your files and start a new text file named test.txt and open it in Notepad.

In the file put the following lines of HTML

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html>
<head>
<link rel=’stylesheet’ href=’http://www.mysite.com/sitestyles.css’ type=’text/css’ media=’all’ />
<title>This is my first webpage</title>
</head>
<body>
Hello, This is my first webpage. <br /> I hope you like it.
</body>
</html>

You should see something like this:

As you may have noticed we added another tag on your page. The <br /> or Line Break Tag.

This is an important tag to remember because anytime you need to go to the next line or force an empty line between text or other items you will need to use a BR tag.

Empty lines and repeated spaces in HTML files are ignored. You could add ten pages of spaces and returns in your html file and only the first would be recognized and used.

You should also take note that all of our HTML Element Tags are in LOWER CASE  <br /> is correct <BR /> is not correct. This is part of the new html standards and is important because some advanced html may see tags differently if they are in upper or lower case or have mixed case words. However for now if you make a mistake on the case of the tag eLeMenT your browser should still render the page correctly.

In lesson 3 we will introduce different content to our pages.

When your visitor reads your site they want the text to be presented in a way that is easy to read and is highlighted or styled to bring emphasis and guide the reader.

In lesson 2 we saw that there are basic mandatory tags that must be included in every webpage. As we continue learning we will start off with a HTML file template that contains those basic tags.

We know that within the <body> tag is where we will place all of our text and links and image references but before we get started with laying out a fancy design this lesson will cover many of the ways that you can use basic HTML to be creative. You should also remember that we are learning basic HTML in these beginning lessons and in later ones we will cover the use of CSS style sheets that can perform many of the same tasks and many more advanced formatting commands.

Ok lets start with adding a line of text to our template file within the Body Area.

Code view is on the left and what you see in the browser is on the right.

.

Now lets add a Headline for our Page
As you can see the <H1> header tag makes the font bigger, bold and it also forces a line break between the Headline and the paragraph of text we had already written.

Headline Tags <h1> have a starting tag and an ending tag <h1>stuff</h1> You must always close your tags or the rest of the page will pickup the formatting until the tag is closed or you reach the end of the page.

Headline Tags come in sizes 1 through 6 and the strange thing is the lower the number the larger the Headline. To use a different size you must open and close your text with the number included in the closing tag. Here are some examples:

<h1>HEADLINE</h1>
<h2>HEADLINE</h2>
<h4>HEADLINE</h4>
<h6>HEADLINE</h6>

.

But what if we just want to make something within our paragraph Bold and we don’t want a line break that a <H1> tag will force? Then we can use the <strong> or <b> bold tags

.

To make a Word Italic we can use the <em> tag

.

To underline a word we can use the <u> tag

.

To change font face, color or size of a word we can use the <font> tag

.

Review

Lets cover some of the ways that you can add styling to your text in HTML.

<H> headline tags they are used for headlines that will be separate from the other text and include a forced line break after the headline tag.

<strong>  tags make your fonts bold

<em> tags make your words italic

<font> tags can set color font-family and size

NOTE
It is important to note that the font tag has been deprecated in favor of CSS Styles even so you can use the font tag to insert your local styles or replace it with a <span> tag.

In CSS which we will learn later a <span> tag can be used to style fonts and would look something like this.

<span style=”font-family:times;font-size:16pt;color:#0000ff;text-decoration:underline”>this line of text is blue 16 point high underline in Times Font </span>

this line of text is blue 16 point high underline in Times Font

We will add to our understanding of web design in stages.

More complex tasks will come in manipulation of divs for layout and menu systems but it is important to understand the use of tags and elements before you begin styling them.

Complex tasks are nothing more then a series of easy ones.

For instance baking a cake when you never have before can seem to be complex but each step is pretty simple.

Measure the flour and sugar and water, add your baking powder and mix it up, set the oven to 350F, grease the pan and cook it for 30 minutes and in the end you endup with a cake.

Websites are the same… you learn how to style your fonts (just like measuring flour) and then you will understand that part when you begin making a menu system.

So, what types of images can you use?

Web browsers can understand a variety of media types but for images there are 3 basic file types that you can place or link to in your pages.

Jpeg – This file type is a compressed image able to display 16 million colors in a lossy or dithered image. It is best used for photographic images but it can be used anyplace within your design where transparency isn’t necessary.

GIF – This is one of the very first image file types it has a lower number of colors only 256 that it can use to represent your images so it is not so great for photographs but it is good for graphs, text or images that need transparent areas. It is often used for logos, buttons or corners where you want the background behind the image to show through making round or complex shapes. You can also use Gif Files to create animations.

PNG – This is a relatively new image file type and combines the two properties of GIF and Jpeg image files. PNG has a large number of colors so it is good for photographs. It is also good for images that require transparent regions. In addition to transparent regions that are totally see through PNG can also have levels of transparency. You can overlap a bottom yellow png file with a 50% transparent blue file and endup with green. About 60% of the browsers out there support the full properties of PNG files and this includes most browsers of the latest version however many users still use old browsers because they have not or can not update their browser due to the operating system they use on their computer. Yes people still use Windows 95 but also many other OS’s.

ICO – This is a format that is used primarily for making icons for your desktop applications. When you see a Icon on your desktop that you use to launch your word processor that is an ICO file … The ICO format is also used in websites for the icon that shows up in your browser location bar and when you drag that url shortcut to your desktop. There are websites that will convert your jpeg or gif file to an ICO file and it is best that you use one of these services when you need to generate your favicon.ico file.

Note because of browser incompatibility it is important to double check your site in a variety of browsers and versions of browsers based on your site’s visitor stats. View your weblogs and check what your visitors are using then visit a site like www.browsershots.com and get a preview of what your visitors are seeing. However don’t remake your site into a text only site just because you get 10 visitors a month browsing your site with a WebTv browser.

.

Adding Images to your Content
When you want to add an image within the text of your main content you use the <img> Tag.

This is one of only a few html tags that have no closing tag.

To add an image find the place within your HTML that you want to insert the file.

Then for an image on your local server in your /images/ directory
add <img src=”/images/flowers.jpg”>

For an image that is hosted on another server use http://
add <img src=”http://www.website.com/images/flowers.jpg”>

As you can see in this example we are inserting a <img> tag at the beginning of our text.

<html> <head> <title>Lesson 3</title> </head> <body><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

Here we will apply an alignment to force the image to the right side of the text <img align=”right”>. Alignment can also be placed in your CSS Styles either on the image tag or on a container surrounding it.

<html> <head> <title>Lesson 3</title> </head> <body><img src=”/base/images/cash.jpg” align=”right”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

Here we will wrap the <img> tag with an anchor or hyperlink so if you click on the money you are brought to another page. <a href=”http://www.npsites.com”><img src=”/base/images/cash.jpg”></a>

<html> <head> <title>Lesson 3</title> </head> <body><a href=”http://www.npsites.com”><img src=”/base/images/cash.jpg”></a>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

Most browsers today will ignore the border around images if they are used for a button Hyperlink but you can use the border property in any hyperlinked image to insure that you do not get a blue border around your linked images.

<a href=”place”><img src=”imageurl” border=”0″></a>

.

In this example we will set the background for our page to be an image.

<html> <head> <title>Lesson 3</title> </head> <body background=”/base/images/blkgreen-10x60px.jpg”><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain. </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

To fix the background image and make it only repeat in the x direction and not down the page in the y direction we need to use CSS Styles.
<body Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”>

<html> <head> <title>Lesson 3</title> </head> <body  Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”><img src=”/base/images/cash.jpg”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain.</body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

To complete the green color down the page we can apply a background color.
<body bgcolor=”#98CF40″ Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”>

If the visitors browser isn’t able to use CSS styles they will simply see a solid green background.

Here you can see we also changed the text to white and replaced the cash jpg image with a transparent Gif image so you can see the background through the white area.

<html> <head> <title>Lesson 4</title> </head> <body  bgcolor=”#98CF40″ Style=”background-image: url(/base/images/blkgreen-10x60px.jpg);background-repeat: repeat-x;”><img src=”/base/images/cash.gif“><font color=”#ffffff”>This is a line of text that we are adding to our html file.  As you can see it is pretty plain.</font> </body> </html>

This is a line of text that we are adding to our html file. As you can see it is pretty plain.

.

There are a variety of other uses and methods to include images on your pages menus and in your content. As you can see we are starting to use more CSS Styles to add more features. Some things you just can’t do in basic HTML unless you are willing to go through a lot of work.

You should now understand how to add images into your content and apply images as backgrounds for your pages.

The same methods of adding images as backgrounds can be applied to Tables Divs and other containers.

You can use images as links to other pages within your content or as menus or buttons for forms such as a search form.

There are a variety of uses and the limits are endless if you are willing to understand the basic concepts and apply them creatively.

.

Because we talked about it earlier and it is so simple to do.

Linking to a Favorites ICO file
Favorites icons are linked to in the <head></head> area at the top of your html file

<link rel=”Shortcut Icon” href=”/images/favicon.ico” type=”image/x-icon” />

CSS is a set of page markup definitions that can be applied to HTML documents to define how pages are rendered. This addition to the HTML tag set can be applied by Authors internally in each HTML document or they can reside in a separate server side file that is referenced and applied to the document. The enduser may also define their own Style Sheet that resides on their local system to be applied to all of the documents that they browse.

So, what are the advantages of CSS and HTML over plain HTML? For web site managers the use of an external file containing style sheet definitions means that they can control the formatting of their pages across their site without the need to edit each individual file. This is also very important when pages are generated by databases and CGI scripts.

The use of CSS commands inside a document can provide authors extended formatting features to allow specific information to be presented to the viewer in an exacting method.

For the enduser the use of a client side Style Sheet to modify how all documents are displayed can offer the ability to view information with a consistent style. For users with disabilities CSS can offer readable Font sizes, colors and face choice and in the future it will also add formatting that will instruct how pages are converted to synthesized speech.

What are the drawbacks of CSS?
Browser compatibility must be the most common difficulty. Anyone that has had problems trying to keep their JavaScript compatible across browsers and even within different versions of the same manufacture’s browser knows that making working documents that are consistent often means not using such features. If a Browser is incapable of implementing CSS it should be able to ignore the CSS style selectors and revert to standard HTML. However if you are creating documents for a closed audience, as would be the case in a Corporate Intranet environment, the probability of successful implementation is much greater.

Another factor that Webmasters should be aware of concerning the use of an external file to define CSS Declarations is that the Enduser will have to access 2 files to view their pages. This possible initial lag should be weighted against the overall load that would be placed on the server if every HTML file required additional data to be added to define the CSS information internally. Analysis of Initial lag vs. overall server load would be dependent upon the amount of CSS use across the site.

When designing a large full featured website with many different offerings such as a CMS / Blog, Shopping Cart and User Forms you will want to keep continuity throughout. This is possible by referencing standard styles in a main style sheet file and importing it into all of your different applications. Use a second style sheet to extend and meet the the requirements for specific software applications.

CSS Basics

The application of Styles through CSS is made possible by adding additional formatting controls to the current HTML TAG Elements. When the author wants to take advantage of the additional formatting a Style Selector is made and applied to the HTML element.

Example:

<style type="text/css" >
P { color:#ff0000 }
</style >

In the example above the HTML element <P> has a color declaration and the value is a rrggbb color of #ff0000 . The result would be that all paragraphs would be formatted to be displayed with a font color of red. However the Author could override this Style Declaration Value by using a child element like < font color=”blue” > inside of the paragraph.

Another important note is that where it was once common to leave the <P> tag open Authors should now take care to close it with a </P> to make sure that Style Declarations are properly controlled.

When applying styles to the elements <tags> of your website it is important to understand the hierarchy of how Cascading Styles are applied to elements that are inside of elements.

In standard HTML all pages will start and end with a <html> element tag and the content of the page will be placed inside of the <body> element tag.

When you apply your CSS Styles to a higher element it will be applied to all elements within it.

For example if you were to apply a font style to your <body> tag the whole page would use those settings unless you override them individually.

.body {color:#33ff33}

<body>
<p>This is some text</p>
<p style=”color:#ff33ff”>This Text has an override<p>
</body>

The styles will be applied from the outer most container to the inside container.

What about Enduser Browser CSS Files

Because both the Author and the Enduser have the ability to use and apply their own style sheets, Cascading is used to control which Style Selector will be used and which Style Selectors will be overridden.

Endusers often make changes to a Browser CSS file so they can read your pages better. For low Vision Visitors of your site they may increase the font size or they may apply font colors that allow them to read your pages easier.

Normally if the Author and Enduser apply different values to the same element the author’s settings will override the enduser’s. However because there are situations where the enduser’s settings should have a higher priority the cascading value !important can be used to set a higher weight to a certain Declaration Value.
The Author’s style

<style type=”text/css”>
P { color:#ff0000 }
</style>

The Enduser’s Style

<style type=”text/css”>
P { color:#000000 !important }
</style>

In the example above we see that the use of !important in the enduser’s style sheet is used to override the author’s setting.

The Author can also take advantage of this value to override a previously defined element by applying the !important value directly to the HTML tag.

The Author’s style defined in the head area:

<style type=”text/css”>
P { color:#ff0000 }
</style>

Author’s local override in the HTML tag:

<p style=”color: green !important” >this paragraph is green </p>

Using the !important declaration feature in your CSS can be used to work out bugs in your formatting.  This declaration shown Inline above can also be used in your styles.css file.

Cascading and the Document Tree

When a page is rendered there is a hierarchical method applied to the formatting. When the browser retrieves the page it first collects the all of the style information and sorts the selectors using the cascading order to see which rule will take priority. Then the Document Tree is used to add additional weighted order.

When elements are added to a page parent elements influence the child elements so if formatting is applied to the parent element it will be inherited by the child unless the child element overrides the formatting of the parent element.

<html>
<head>
<title> CSS Document Tree </title>
<style type=”text/css”>
P { color: #ff0000 ; font-size: 18px }
</style>
</head>
<body text=”808080″>
If someone asks your over for dinner.
<p >Don’t eat the <font size=3>chicken</font>.</p>
<p ><font color=orange>Chicken </font> are people too.</p>

</body>
</html>

What it looks like:

In the example above you can see that the first line is inheriting its color properties from the BODY element. Then in the first paragraph the P element overrides the BODY TEXT color and finally inside the paragraph the Font element overrides the P element applying its own font size setting.

When you compare the first and second paragraphs you can see that the Font Element is used to partially override parent elements but where the Child element <font> does not override the parent element it will accept the parents formatting characteristics.

The Font element in the first Paragraph accepts the color attribute but changes the size. The Font element in the second paragraph keeps the size and changes the color.
The Document Tree for this file would be:

         HTML
          |
         BODY
         /  \
 Body Text   Paragraph
                 |
               FONT

Final Note

It is important to remember and map out what parent elements and styles effect lower or internal tag elements. You will find when you first start that applying font information, borders, margins and other settings to parent elements they can throw you off in your design.

To find where to fix the problem work your way from the inside out until you find the style you need to change or override.

Cascading is also effected by the line number of your CSS style.css file.

Elements that appear closer to the top of the CSS file will effect elements below it. This is where the use of the !important declaration will often be used. We will go over this in more detail in a lesson about setting up your CSS style.css file.

Finally if the element is not defined by a CSS Selector the default settings of the enduser’s client are used to render the element.

Link

To define an external Style Sheet to be used to format your HTML you use place a Link element in the Head area of the HTML file.

The basic tag would be:

<LINK REL=stylesheet HREF="mystyle.css">

Where HREF tells the location and file name and REL indicates the file is a Style Sheet.

Additional Declarations include:

Media

Media is used to define the application of the CSS to its end use. If more than one external style sheet is defined with the link element the Media type would set the proper file to be used for the proper use of the page. The Media definition is not implemented in IE4 or NS4.

<LINK REL=stylesheet MEDIA=”screen” HREF=”mystyle.css” TYPE=”text/css”>

You can also define more than one profile with comas between the values.

Media=Print,Screen,Aural

PRINT – For documents viewed on screen in print preview mode.
SCREEN – a continuous presentation for computer screens.
PROJECTION – paged presentation for projected presentations.
BRAILLE – for braille tactile feedback devices.
AURAL – aural presentation, e.g. for a speech synthesizer.
ALL – the default value, the style sheet applies to all output devices.

Title

The Title Attribute can be used to define the type of style sheet. Not using the TITLE tag makes your file persistent meaning the Selectors in a file without a title will always be applied to the document.

TITLE=”default”

If you define more than one Style Sheet to be applied to your document you can use the title attribute to group them.
<LINK REL=”alternate stylesheet” TITLE=”bluepage” HREF=”b-paragraph.css”>
<LINK REL=”alternate stylesheet” TITLE=”bluepage” HREF=”b-tables.css”>
<LINK HREF=”largefont.css”>

TYPE can be used to describe the file type of the Style Sheet.
<LINK HREF=”mystyle.css” TYPE=”text/css”>

Meta Tag

The Meta element can be used on your page to identify to the Enduser’s client that your page includes CSS information.
<META HTTP-EQUIV=”Content-Style-Type” CONTENT=”text/css”>

Style Sheet use by the Enduser

If the Enduser would like to construct their own style sheet they would follow the same method as an author that is constructing an external style sheet. However because the enduser will not be able to prepare style selectors that will override all the possible ID and Class Element Declarations the enduser’s User Agent should be able to ignore server side Style Sheets.

Internet Explorer agents define the client side Style Sheet in the Internet Options – General Tab Under the Accessibility area.

A Selector is the definition of a formatting Style that can be applied to a HTML Element.
The Selector has three basic parts:

Element {Declaration: Value}

The Declaration and Value are surrounded by {} braces and the
Declaration is separated from the value by a colon : and a space.

The Selectors relation to common HTML would be similar to this tag structure that is used to define the color of a font:

< font color=orange >

Where Font is the Element,
Color is the Declaration and
Orange is the Value of the Declaration.

Type Selectors

Type selectors are used set the definition of a certain type of element. If you wanted to assign a property to all of the <H1> elements in your document you would use the following.

<style>
H1 {color: 000fff}
</style>

The syntax is:
Element {declaration: value }

Multiple Declarations

If you would like to define more than property for your Element you can use a semicolon ; to separate Declarations.

<style>
H1 {color: 000fff ;
    font-weight: bold;
    font-size: 12pt
}
</style>

The syntax is:
Element {declaration: value ; declaration: value}

Grouping Elements

If you would like to apply the same properties to different elements you can use a coma , between the elements and use the same Declarations and Values.

<style>
H1, TD, P {color: 000fff }
</style>

The syntax is:
Element, Element, Element {declaration: value }

Parent Child Elements

Contextual elements can be combined to for a selector that will be applied only if a certain element pattern is used in the HTML.

Only works in IE4.

If you wanted all Italic characters to be Blue but only if they were contained inside a H1 headline. You could define the selector like this:

<style>
B ~ I {color: 000fff }
</style>

The syntax is:
ParentElement ~ ChildElement {declaration: value}

The following text would be bold but the Italic (e) would be rendered both Italic and Blue. However Italic text that is not contained inside a Parent B Element will be rendered just plain Italic and not blue.

<B>T<i>e</i>xt</B>

The Result would look like

Text

Sequential Selectors

When you want to define a selector that would be applied only if one element directly follows another element you can use the following format.
Only works in IE4.

<style>
/P ~ I/ {color: 000fff }
</style>

The syntax is:
/FirstElement ~ SecondElement/ {declaration: value}

And would be applied as follows:

<P>Chickens</P>
<I>happy chickens</I>

ID Elements

If you would like to define a declaration and value that you can apply to elements in your document but you do not want to apply this declaration to all tags of one type you can use an ID element and then apply that ID to your tags as you wish.

<style>
#abc123 {color: 000fff }
</style>

<P id=abc123> text </p>

The syntax is:
ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

If you would like to set up optional declarations for a single element you can apply an ID to an element. This will allow you to use varying styles within the same element.

<style>
H1 #abc123 {color: 000fff }
</style>

<H1 id=abc123> text </H1>

The syntax is:
Element ID {declaration: value }

The HTML Tag referenced:
<tag id=ID>

Class Elements

Class Elements are defined in a similar method to ID Elements. They can be applied various to HTML elements in a per element method or they can define a subset class of an element.

<style>
.chicken {color: 000fff }
</style>

<H1 class=”chicken”> text </H1>

The syntax is:
.class {declaration: value }

The HTML Tag referenced:
<tag class=”classname”>

Pseudo-Classes

The ability to change the properties of a element based on the state of the element can be accomplished by using a Pseudo Class Element.

The Anchor < A > element can have different rendering properties applied to it based upon the current state.

The possible variations include:

link – unvisited links
visited – visited links
hover – user hovers
active – active links

<style>
A:hover {color: orange }
</style>

<A href=”file.html> click here </A>

The syntax is:
element:pseudo_class {declaration: value }

Final Note

When defining your Selectors in your CSS file it is good practice to group your selectors based on their use. If you are defining for example your sidebar where ads or other blocks of information will go then group those selectors so you can find and modify them easily.

Defining your Selectors in a CSS File will allow site wide modification from one file but do not dismiss the use of inline CSS within specific elements to localize and limit formatting for specific reasons.

Your CSS File should include General and Non Changing or Specific information about how you want your pages to render. You should not try to load it with every formatting attribute that you need to apply.

A secret may be setting up basic shells that you can apply quickly in your documents.

You may want a variety of font sizes try setting up a list of selectors in your css file that can be used across your site.

#font18px {font-size:18px}
#font18pxBlue {font-size:18px;color#2784b0}

then apply them as such

<span id=”font18pxBlue”>this is 18px blue font</span>

Font family

A font family is a group of fonts that resemble each other. When you are defining your selector to set the font family your text will be rendered in you can use Exact Names that refer to fonts that are installed on the enduser’s system (Ariel, Verdana) or you can define Generic names as a last resort.

Possible Generic Font Family names include:
cursive, fantasy, mono-space, serif and sans-serif.

When you are defining Generic families do not use quotes.

When you define a selector with more than one font you must use quotes to enclose Family names that include spaces and you should use capital letters where necessary.
Example:

BODY { font-family: "Times New Roman", Verdana, serif }

Font Style

The font style variations of normal, italic, or oblique can be defined Normal is the default style if no font style is set.

P { font-style: italic}

Font Variant

The font variant can be used to choose a variation of a font. In the example below the small-caps value is defined.

H3 { font-variant: small-caps }

Font Weight

The font weight refers to the boldness or lightness of a font. Keywords can be used to set the value or you can use a numeric set of values from 100 to 900 in increments of 100 as: 100, 200, 300, 400, 500, 600, 700, 800, 900 .

The keywords bolder and lighter are used to set values that are relative to the parent element’s font weight.

The keyword bold is equal to the numeric value 700.

An example would be:

<style>
  P { font-weight: normal }
  P #12 { font-weight: 900 }
</style>

this is normal

this is very bold

Font Size

The font size refers to the size of the font.

The following types of values can be set:
absolute-size, relative-size, length, percentage .

The absolute-size keywords are a series of font sizes that are set by the enduser’s viewing agent.

The values you can choose from are:
xx-small, x-small, small, medium, large, x-large, xx-large

Relative Sizes are dependent on the parent element. When defining a relative size the resulting font size is chosen from the Font table of the enduser’s agent.

The values you can choose from are:
larger, smaller

Leghth
When you apply a length the value can be either relative to the parent or it can be an absolute value.

Relative values are:

em Elements Mheight
ex Elements Xheight
px pixels

Absolute values are:

pt points
in inches
cm centimeters
mm millimeters
pc picas

Percentage
The percentage value is also relative to the parent element.
The selector would be defined as follows:

<style>
  P #120 { font-size: 120% }
<style>

Here is a simulation of what it would look like:

<P>this is normal<P ID=120>this is text is 20% larger</P> </P>

Helpful Tip

To make your life easier you should begin by setting up a font definition list that you can include in all of your CSS files.

Using IDs you can set up a list of font specs that you can apply in your documents.

#font12px  {font-size:12px}
#font14px  {font-size:14px}
#font16px  {font-size:16px}
#font20px  {font-size:20px}
#font24px  {font-size:24px}

#font12pxRed  {font-size:12px;color:#FF0600}
#font14pxRed  {font-size:14px;color:#FF0600}
#font16pxRed  {font-size:16px;color:#FF0600}
#font20pxRed  {font-size:20px;color:#FF0600}
#font24pxRed  {font-size:24px;color:#FF0600}

Apply the fonts in a <div id=”font16pxRed”> or where ever they are needed.

Setting up a basic list of fonts will allow you to apply site wide colors that match your theme or company colors.

Where Font attributes apply to the character level Text Formatting applies to how the characters are manipulated to makeup words and how words are used to make sentences.

Indenting

The text-indent property will allow you to indent the first line of a block of text.

Values include: length, percentage

 P { text-indent: 3em }

Text Alignment

Defines how a block of text will be aligned within a containing element.

Values include: left, right, center, justify

P { text-align: center }

The text-align attribute can also be used to center a page or container.

Decoration

This property can be applied to text to add additional decorative features.

Values include: none, underline, overline, line-through, blink

Note: Blink does not work with IE and Overline does not work with NS4.

You can also use this declaration to override the default settings of the users agent. The following example will allow you to create links that are not underlined.

Also see Pseudo Class Elements.

<style>
  A:link, A:visited, A:active { text-decoration: none }
</style>

<a href="file.html">Click Here</a>

Text shadows

Allows you to define a shadow effect to your text.
Note: This Text Formatting feature does not work in IE4 or NS4.

<style>
  P { text-shadow: black }
</style>

<P>This is some text</P>

text-shadow has been deprecated in new CSS browsers.

Word Spacing

Word Spacing allows you to define the amount of space between words.
Note: This Text Formatting feature does not work in IE4 or NS4.

Values include: normal, length, auto

  H1 { word-spacing: 1em }

Letter Spacing

Letter Spacing allows you to define the amount of space between letters in each word.

Note: This Text Formatting feature does not work in NS4.

Values include: normal, length, auto

<style>
P { letter-spacing: 0.1cm }
</style>

<P>This is some text</P>

Text Transform Case

Case allows you to change how a block of text will appear. This is an easy way to override the formatting of a block of text that has already been typed and placed in the document.

Values include: capitalize, uppercase, lowercase, none

The values of this property have the following meanings:

capitalize: first character of each word is uppercase
uppercase: all characters are uppercase
lowercase: all characters are lowercase
none: element ignores parent element value

<style>
P { text-transform: uppercase }
</style>

<P>This is some text</P>

White Space

White space is used to define how a block of text will be controlled within an element. White space refers to the spaces between the words.

Note: This Text Formatting feature does not work in IE4 and has only partial support in NS4.

Values include: normal, pre, nowrap

In the example below the H1 element has been given the white-space value of pre or preformatted text. This means that additional spaces between words will be preserved as if the block was preformatted text.

<HTML>
 <HEAD>
  <STYLE type="text/css">
  H1   { white-space: pre }
</STYLE>
<BODY>

<H1>This is     some text </H1>

</BODY>
</HTML>

Note

Proper spacing of characters and words will allow the reader to visually understand the content of your pages.

Too much space can be as bad as not enough and anyone who has had to enter a comment limit word on youtube or to submit a form understands that it is not only size, color and font choice but also how the characters are presented that allows you to read and understand the words quickly.

No one wants to struggle when they are reading a few pages of text so use these style attributes conservatively not creatively.