TABLE OF CONTENTS
Introduction to HTML/CSS
If you are
the content provider, read HTML. If you are the graphic designer, read CSS. If you are a programmer and want to add dynamic effects to your web page, read JavaScript. But if you operate in OMO (one-man-operated) and are expected to create a reasonably good-looking website, you need to understand HTML, CSS and JavaScript.
This is the reason that I combine both the HTML and CSS in this article as they are inseparable.
To create an OMO website, I suggest that:
Understand HTML, CSS and JavaScript thoroughly.
authoring tool. Use Dreamweaver if you can afford. Otherwise, find a free HTML text editor (such as NotePad++, Sublime). For programmers, NetBeans/Eclipse are good choice for HTML/CSS/JavaScript as they perform syntax checking and provide auto-complete.
Design and organize your page. Decide on the look and feel of your website. How many columns? What are the major sections (e.g., header, navigation menu, main content, sidebar, table of content, footer)? Do you need a navigation menu or panel? What is your theme (colors, fonts)? And so on.
Take a close look at your favorite websites!!! CSS is humongous and complex! You can't invent this wheel! Use Firefox plugin &Firebug& (@ ) or the built-in &Web Developer Tools& to inspect HTML/CSS of your favorite websites.
Alternatively, you can use a CSS framework (I recommend BootStrap) to jump-start your design.
Start with an initial CSS design. Website design begins with CSS, NOT HTML?!. Work on your CSS:
Partition your web page into logical section via &div& (or HTML5' &header&, &footer&, &section&, &nav&), such as header, content, footer. Assign an id to &div& that is unique (e.g., &header&, &footer&. Assign a common classname to sections (non-unique) that share the same style (e.g., &entry&, &side-note&). Write the CSS id-selectors and class-selectors (e.g., #header tag-name,... #footer tag-name,... #menu tag-name,...) for common tags (such as h1, h2, h3, p, a:link, a:visited, a:hover, a:active), in each of the &div&'s. Basically, what I am saying is to design each of the sections by itself - a &divide and conquer& strategy.
Create sub-classes for common styles, such as layout out tables and images and special effects (e.g., &.highlight&, &.underline&, &.center&). They could be used in &div& and &span&.
There are many good and free CSS templates (or web templates) available online (just google &CSS Templates& or &Web templates&). Pick one that meets your taste to model after. You can also look at the CSS of any website that you find interesting. Be aware of the Intellectual Property Right, do not use any images or graphics unless they are in the public domain. It is extremely easy to create one yourself with an imaging tool, such as PhotoShop, Element, Illustrator or even Paint.
Alternatively, use CSS framework such as BootStrap and pick your favorite design from the samples.
Write your HTML pages. You may need to modify the CSS as you go along. The most challenging thing for an OMO web author is that he has to be concerned about both the contents and appearances at the same time, and can lose focus at times!
Repeat the previous steps until you are happy with your page's look and feel, layout, and most importantly, the contents - try not to create yet another insignificant website.
Introduction to HTML
What is HTML (HyperText Markup Language)?
HTML is the language for publishing web pages on the WWW (World-Wide Web, or World-Wide Wait?).
HTML is a Document Description Language (aka Document Markup Language). HTML is NOT a programming language like C/C++/C#/Java, which is used to implement
programming algorithm.
An HTML document is a text document, and it is human-readable.
HTML Versions - HTML4.01, XHTML1.0 and HTML5
Today, the W3C (World-Wide Web Consortium) (@ ) maintains the specifications of HTML and CSS (and many other related web technologies).
HTML has gone through these changes:
HTML Draft (October1991): Tim Bernes-Lee (of CERN) proposed the early HTML for sharing of document in a hypertext system.
HTML 2.0 (November 1995): Published as IETF RFC 1866.
HTML 3.2 (January 1997): Published as W3C Recommendation.
HTML 4.0 (December 1997): Published as W3C Recommendation, with strict, transitional and frameset.
HTML 4.01 (December 1999): Touched up HTML 4.0. The supposedly final HTML specification published by W3C.
XHTML 1.0 (January 2000): W3C considered HTML 4.01 as the final release for HTML, and moved on to develop XHTML 1.0 with stricter rules and syntaxes, followed by XHTML 2.0. XHTML 2.0, although theoretically elegant, is impractical as it is not backward compatible with HTML4/XHTML1.0. A rebel group called WHATWG (Web Hypertext Application Technology Working Group) continued to work on extending HTML with more features in a backward-compatible manner. In 2004, WHATWG released HTML5. By 2007, HTML5 has captured the attention of the developers. W3C decided to abandon
the XHTML 2.0 and embraced the HTML5.
HTML 5 (October 2014): Published as W3C Recommendation.
Today, the prevailing specifications are HTML5 (2014) (@ ). Nonetheless, the most interesting thing about standards is that nobody really follows them strictly. Every browser (Chrome, Firefox, Opera, Safari and Internet Explorer) has its own variations and support the standards to various extents.
Markup Tags
HTML uses markup tags, such as &p& (for Paragraph), &h1& to &h6& (for Heading Level 1 to 6), &img& (for Image), &a& (for Anchor or Hyperlink), to markup a document. HTML markup tags perform these functions:
Layout the documents, e.g., &p& (layout as a paragraph), &h1& to &h6& (layout as heading level 1 to 6), &br& (perform a line break), &hr& (draw a horizontal rule), &table& (tabulating data), &ol& (layout an ordered list).
Provide link (called hyperlink) to another HTML document, via the &a& (Anchor tag). These hyperlinks, a distinct feature in HTML, greatly help the users in navigating the web and enrich the users' experience. Hyperlinks make the HTML popular.
Embed images, audios, videos, programs (in JavaScript, VBScript, Applet, Flash, or MS ActiveX control), and objects within an HTML document. HTML is multimedia! The hypertext document may contain texts, images, audios, videos, and even programs.
Separating Content and Presentation
The purpose of a markup language is to relieve the content provider from worrying about the actual appearance of the document. The author merely indicates (via markup tags) the semantic meaning of the words and sentences (such as paragraph, heading, emphasis, and strong), and leave it to the browser to interpret the markups and render the document for display on the screen. In other words, it allows the separation of content and presentation. The content provider focuses on the document contents, while the graphic designer concentrates on the view and presentation.
Nowadays, HTML should be used solely to markup the contents, while its companion technology known as CSS (Cascading Style Sheet) be used for defining the presentation of the document, so as to separate the content and presentation.
These are the common pitfalls in older HTML documents and you should avoid:
Do not specify &appearance& properties, such as foreground and background color, text alignment, font face, font size, border, margin and padding, in the HTML document. Use an external CSS instead to set the appearance and presentation. Presentation-related tags (such as &font&, &center&) and attributes (such as align, bgcolor, link, vlink, alink) have been deprecated in HTML 4, in favor of CSS.
Do not use nested tables or frame for formatting the document, use &div& and
&span&, or HTML5 new tags such as &header&, &footer&, and &section&.
HTML Authoring Tools
HTML documents can be created by a wide range of tools, from simple plain text editors (such as Windows' NotePad, Mac's TextEdit) to sophisticated WYSIWYG authoring tools (e.g., DreamWeaver).
Let's go thru some HTML examples and the syntaxes. Do not attempt to start designing your website until you understand the CSS.
HTML By Examples
Example 1: Basic Layout of an HTML Document
Let's begin with a simple example to illustrate the basic layout of an HTML document.
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Basic HTML Document Layout&/title&
&h1&My First Web Page&/h1&
&p&This is my &strong&first&/strong& web page written in HTML.&/p&
&h3&HTML&/h3&
&p&HTML uses &em&markup tag&/em& to &em&markup&/em& a document.&/p&
Use a programming text editor to enter the above HTML codes and save as &MyFirstWebPage.html&.
For Windows systems, I recommend NotePad++ (@ ). Choose UTF-8 character encoding when saving the document.
For Mac's TextEdit, select &Format& to &Make Plain Text& and choose &Unicode (UTF-8)& for character encoding before saving your file.
Open the file in a browser (such as Firefox, Internet Explorer, Chrome, Safari, Opera) by double- or drag and drop the f or through the browser's &File& menu &rA &Open File...& &rA &Browse...& and select the file.
How it Works?
An HTML document begins with a Document-Type declaration &!DOCTYPE html&
(Line 1) to identify itself as an HTML document to the browser.
The HTML content is contained within a pair of &html&...&/html& tags. You can specify the default language of your document via attribute lang=&en& (for English) in the &html& opening tag.
There are two sections in the document: HEAD and BODY, marked by &head&...&/head& and &body&...&/body& tags, respectively.
In the HEAD section:
The &meta charset=&utf-8&& element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the UTF-8 character encoding scheme, which is compatible with ASCII code for English alphabets and allow you to include other Unicode characters (such as Chinese, Japanese and Korean) efficiently.
When saving your file, you need to choose &UTF-8 encoding& in the &save-as& dialog menu.
The &title&...&/title& element
(Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window.
In the BODY section:
The &h1&...&/h1& container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from &h1&...&/h1& (largest) to &h6&...&/h6&. Line 11 uses a &h3&...&/h3& (Heading Level-3).
The &hr& standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line).
The &p&...&/p& container tags (Line 10 and 12) mark the enclosing texts as a paragraph. &p&...&/p& is the most frequently-used tag in HTML.
The &strong&...&strong& tags (nested under the &p&...&/p& in Line 10) specify &strong emphasis& for its content - rendered in bold by the browser. Similarly,
the nested &em&...&/em& tags (Line 12) specify &emphasis& - rendered in italic by the browser.
Example 2: Lists
and Hyperlinks
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Lists and Hyperlinks&/title&
&h1&Lists and Hyperlinks&/h1&
&p&There are two types of &em&lists&/em& in HTML:&/p&
&li&Ordered List.&/li&
&li&Unordered List.&/li&
&p&This is a nested unordered list of links:&/p&
&li&Online Validator:
&li&W3C Online HTML Validator @ &a href=&https://validator.w3.org/&&https://validator.w3.org/&/a&.&/li&
&li&W3C Online CSS Validator @ &a href=&https://jigsaw.w3.org/css-validator/&&https://jigsaw.w3.org/css-validator/&/a&.&/li&
&li&Specifications:
&li&HTML5 @ &a href=&http://www.w3.org/TR/html5/&&http://www.w3.org/TR/html5/&/a&.&/li&
&li&CSS3 Selectors @ &a href=&http://www.w3.org/TR/css3-selectors/&&http://www.w3.org/TR/css3-selectors/&/a&.&/li&
How it Works?
The &!-- ... --& (in Line 3) is an HTML comment. Comments are ignored by the browsers, but are important to provide explanations to the readers as well as the author.
There are two types of lists in HTML: ordered list and unordered list. An ordered list is marked by &ol&...&/ol& and di while a unordered list is marked by &ul&...&/ul& and displayed with bullets. Each of the list items is marked by &li&...&/li&.
You can nest a list inside another list, by placing the complete inner list definition inside a list item &li&...&/li& of the outer list.
Hyperlink is marked by &a& standalone tag. The attribute href=&url& provides the destination URL of the link.
Example 3: Tables and Images
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Table and Images&/title&
border-spacing: 5
border-collapse:
border: 1px solid #
padding: 5px 10
&h1&Table and Images&/h1&
&caption&Logo of Languages&/caption&
&th&S/No&/th&
&th&Language&/th&
&th&Logo&/th&
&td&1.&/td&
&td&HTML5&/td&
&td&&img src=&../images/HTML5_Logo_128.png& alt=&HTML Logo& height=&64& width=&64&&&/td&
&td&2.&/td&
&td&CSS3&/td&
&td&&img src=&../images/css3.png& alt=&CSS Logo&
height=&64& width=&64&&&/td&
&td&3.&/td&
&td&JavaScript&/td&
&td&&img src=&../images/js3.png& alt=&JavaScript Logo& height=&64& width=&64&&&/td&
How it Works?
A table, consisting of rows of cells, can be marked via &table&...&/table&.
A HTML table is row-centric. You shall first mark a row via &tr&...&/tr&, and then mark the cells of the row via &th&...&/th& (for header cell) or &td&...&/td& (for details cell).
The &caption&...&/caption& element can be nested under &table& to provide a caption for the table.
Image is marked via the &img& tag. The mandatory attribute src specifies the path (or url) for t alt gives the alternative text if the image cannot be displayed. I used relative path in the src, where &..& denotes the parent directory. You need to find some images, store them and figure out your own relative path.
The &img&'s optional attributes width and height specify the width and height of the image displayed area. They are used here to resize the images for consistent display.
In the HEAD section, I added some so-called style rules under the &style&...&/style& tags, so as to nicely display the table. You could ignore the styles now, which will be covered later in the CSS section.
HTML Template
HTML Document Template
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&&/title&
&link href=&filename.css& rel=&stylesheet&&
&script src=&filename.js&&&/script&
External CSS and JavaScript are often used in an HTML document. Line 6 includes an external CSS and line 7 includes an external JavaScript file.
HTML Document Validator
You can submit your HTML document to the W3C Online Validator (@ ) for validation.
Debugging HTML
Firebug or Web Developer Tools
The Firebug plug-in for Firefox (@ ) is simply a great tool for web development. It supports HTML, CSS, JavaScript, DOM and more. Install and get it started to inspect the web pages of your favorite site.
To debug HTML under Firebug:
Launch Firebug &rA Choose the &HTML& panel to view your HTML codes.
To inspect an element, click on the &Inspect& button and select the HTML element of interest from the browser window. You can check/modify the &Style&, &Layout&, &DOM& and &Events& (on the right panel) associated with the selected element.
Try it out on the earlier examples.
HTML Basics
HTML Tags, Attribute and Elements
An HTML opening tag is enclosed by a pair of angle brackets in the form of &tag-name& (e.g., &p&, &title&), which is associated with a matching closing tag &/tag-name& having a leading forward slash, (e.g., &/p&, &/title&). The tag-name shall be in lowercase.
Tag's Attributes
Attributes, in the form of name=&value& pairs can be included in the opening tag to provide additional information about the element.
Example 1: In &html lang=&en&&, the attribute lang=&en& specifies the natural language for this document.
Example 2: In &meta charset=&utf-8&&, the attribute charset=&utf-8& specifies the character encoding scheme.
Example 3: An &img& (image) tag may contain these attributes:
&img src=&logo.gif& alt=&logo& width=&50& height=&30& /&
The attribute &src& specifies the source-URL &alt& specifies an alternate text, if the image &width& and &height& specify the width and height of the image displayed area.
Some of the attributes are mandatory (e.g., the &src& and &alt& attributes of the &img& tag); while some are optional (e.g., the &width& and &height& attributes of the &img& tag, which are
used by browser to reserve space for the image an but browser can figure out the width and height after the image is loaded).
Multiple attributes are separated by space, as follows:
&tag-name attName1=&attValue1& attName2=&attValue2& ...& ... &/tag-name&
Attributes are written in the form of name=&value& pairs. The value should be enclosed in single or double quotes for XHTML/XML compliance (although HTML5 does not enforce it).
HTML Elements
An HTML element consists of the opening and closing tags, and the content in between, e.g., &p&A for apple&/p&, &strong&Caution!&/strong&.
There are two types of elements:
A container element has an opening tag &tag-name& that activates an effect to its content, and
a matching closing tag &/tag-name& to discontinue the effect. In other words, container elements apply formatting
to their contents. For example:
&h1&The h1 tags enclose a heading level 1&/h1&
&p&The p tags is used to &em&markup&/em& a &strong&paragraph&/strong&.&/p&
A standalone element does not enclose content but is used to achieve a certain effect, e.g., &hr& is used to dr &br& to introduce a manual line- and &img& for embedding an external image.
In XHTML, you need to end a standalone element with a trailing '/' in the opening tag. For examples:
&img src=&logo.gif& /&
Alternatively, you can also close a standalone element with a matching closing tag. This is cumbersome but consistent in syntax to the container element. For example,
&img src=&logo.gif&&&/img&
HTML5 no longer enforces this rule.
Today, most developers omit the trailing '/' for simplicity, e.g., &br&, &hr&.
Nesting Elements and the Document Tree
An HTML element can be nested within another element, e.g., &p&This is my &em&first&/em& web page!&/p&. It is important to properly nest the elements, e.g., the sequence &p&...&em&...&/p&...&/em& is invalid.
A valid HTML document exhibits a tree structure (called DOM or Document Object Model), with the element
&html& as the root element of the
document tree, with two child elements: &head& and &body&.
[TODO] Draw the DOM tree for the example.
Rendering HTML Pages
Browsers follow these rules when rendering HTML documents:
In HTML5, the tag-names are NOT case sensitive. I recommend using lowercase, as it is easier to type and XHTML compliance. (XHTML/XML is case sensitive.)
Blanks, tabs, new-lines and carriage-returns are collectively known as white spaces.
&Extra& white spaces are ignored. That is, only the first white space is recognized and displayed. For example,
extra white
line-breaks
browser.&/p&
produces the following single-line output on screen with words separated by a single space:
extra white
line-breaks
You need to use the paragraph tag &p&...&/p& to or insert a manual line-break tag &br& to break into a new line. In other words, you control the new-lines via the mark-up tags. The &p&...&/p& leaves additional space while
&br& does not.
To get multiple whitespace, use a special code sequence & (which stands for non-breaking space). For example,
&p&This is a
paragraph.&/p&
&p&Another paragraph&br&with a line-break in between and more spaces &&& before this.&/p&
paragraph.
Another paragraph
with a line-break in between and more spaces &&& before this.
Document Skeleton
The &html& Element and its Child Elements &head& and
An HTML document has the following skeleton:
&!DOCTYPE html&
&head&...&/head&
&body&...&/body&
The &html&...&/html& container element defines the extent of an HTML document.
There are two sections: HEAD and BODY:
&head&...&/head& container element defines the HEAD section, which contains descriptions and meta-information of the HTML document. Browsers interpret these descriptions to properly display the body content.
&body&...&/body& container element defines the BODY section, which encloses the content that users actually see in the browser's window.
The HEAD Section and the &title&, &meta&, &link&, &script& Elements
The HEAD section may contains these elements: &title&, &meta&, &link&, &script&, &base&.
The &title&...&/title&
container element encloses the title for the page. You should use a meaningful title because:
The title shows up at the title-bar of the browser window.
The title shows up in bookmarks and history lists (the URL is stored if there is no title).
Titles are used by search engines' to index your page.
The &title& element is mandatory in HTML5.
The &meta& element contains meta-information, for use by browser to properly render the document. For example, &meta charset=&utf-8&& specifies the character encoding scheme for the document.
You can use a &link& element to add an external CSS Style Sheet (and &style&...&/style& element for internal styles):
&link href=&filename.css& rel=&stylesheet&&
Note: HTML4/XHTML1 require an additional attribute type=&text/css& in the &link& tag.
You can use a &script&...&/style& element to define programming scripts. For example, to add an external JavaScript file:
&script src=&filename.js&&&/script&
Note: HTML4/XHTML1 require an additional attribute language=&JavaScript& in the &script& tag. Also take note that the closing &/script& tag is needed, even though there is no content within &script& and &/script&. We usually place the JavaScript after CSS, as the JavaScript may use the CSS.
The &body& Element
The &body&...&/body& element defines the BODY section of an HTML document, which encloses the content to be displayed on the browser's window.
The &body& tag has the following optional presentation attributes. All of these presentation attributes are concerned about the appearance instead of the content, and have been deprecated in HTML 4 in favor of style sheet. However, many older textbooks present them in Chapter 1. Hence, I shall list them here for completeness. BUT do not use these attributes. I shall describe how to control the appearance of &body& using CSS very soon.
text=&color&: color of body text.
bgcolor=&color&: background color.
background=&url&: URL of an image to be used as the
background.
link=&color&: color of un-visited links.
vlink=&color&: color of visited links.
alink=&color&: color of active (clicked) links.
For example:
&body text=&blue& bgcolor=&lightblue& link=&green& vlink=&red& alink=&yellow&&
&p&Hello&/p&
&a href=&&&Google&/a&
The foreground color (of the texts) is &blue&, on background color of &lightblue&. You can set different colors for the three types of links via attributes &link& (for un-visited links), &vlink& (for visited links), and &alink& (for active link - the &alink& color shows up when you click on the link).
HTML Comment &!-- ... --&
HTML comments are enclosed between &!-- and --&. Comments are ignored by the browser. You
need to look into the HTML codes (via &View Source&) to read them. Comments are extremely important in programming to explain and document a section of programming codes and logic. HTML documents are textual and self-explanatory, comments are less important (but still nice to have) to describe the various part of the documents.
Comments are also useful in temporarily disable a certain part of the HTML codes during development.
Block Elements vs. Inline Elements
Elements can be classified as:
A block element (such as &p&, &h1& to &h6& and &div&) starts on a new line, takes the full width, and ends with a new line. It is rectangular in shape with a line-break before and after the element.
An inline element (such as &em&, &strong&, &code& and &span&) takes up as much space as it needs. It does not force a line-break before and after the element, although it can span a few lines.
In brief, a block element is always rectangular in shape, while an inline element spans a continuous run of characters.
Block Elements
Paragraph &p&...&/p&
Function: When the browser reads a &p& tag, it breaks to a new line, and skips some white spaces. For example,
&p&This is a paragraph of texts.&/p&
Older HTML documents often omit the closing
&/p&, which is a bad practice, not recommended, and disallowed in XML/XHTML.
To create an empty paragraph, you need to use &p&&&/p& which encloses a non-breaking space. This is because browsers typically ignore &p&&/p&.
Line Break &br& (or &br /&)
Function: Instruct the browser to break to
a new line, without skipping white spaces as in &p&.
Note that the line breaks in the HTML codes are treated as white spaces and do not translate to new lines in the display.
Hence, you have to insert the &br& manually. For example,
paragraph&br&with a
line-break
in between.&/p&
paragraphwith a
line-break
in between.
Heading Level 1 to 6 &h1&...&/h1& to &h6&...&/h6&
Function: Establish six levels of document headings.
&h1& is the highest (with the largest font size) and &h6& is the lower. Headings are usually displayed in bold, have extra white spaces above and below. For example,
&h1&This is Heading Level 1&/h1&
&h2&This is Heading Level 2&/h2&
&h3&This is Heading Level 3&/h3&
&h4&This is Heading Level 4&/h4&
&h5&This is Heading Level 5&/h5&
&h6&This is Heading Level 6&/h6&
&p&This is a paragraph&/p&
Horizontal Rule &hr& (or &hr /&)
Function: Draw a horizontal line (or rule). By default, the rule is full width (100%) across the screen, 1 point in size, and has a shading effect for a 3D appearance. For example,
&h1&Heading&/h1&
&p&Discussion begins here...&/p&
Pre-Formatted Text &pre&...&/pre&
Function: Texts enclosed between &pre&...&/pre& container tags are treated as pre-formatted, i.e., white space, tabs, new-line will be preserved and not ignored.
The text is usually displayed in a fixed-width (or monospace) font. &pre&...&/pre& is mainly used to display program codes. For example, my favorite Java's &Hello-world&:
&pre&public class Hello {
public static void main(String[] args) {
System.out.println(&Hello&);
public class Hello {
public static void main(String[] args) {
System.out.println(&Hello&);
Without the &pre& tag, the entire program will be shown in one single line.
Quote &blockquote&...&/blockquote&
Function: Mark out a block of quote. Browsers typically indent the entire block to the right. For example,
&blockquote&Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.&/blockquote&
Division &div&...&/div& and Span &span&...&/span&
The &div& block elements (together with its inline counterpart &span&) are extensively used in the modern web pages to mark out a rectangular block (or span of text). The &div& and &span&, by itself, does not do anything. Unlike elements such as &h1&, &p& and &strong&, which possess certain visual properties, &div& and &span& do not have any inherent visual properties. They are simply markers and to be used together with CSS for applying custom formatting style. We shall describe them later in the CSS section.
HTML5's New Semantic Block Elements
Before HTML5, we rely on the all-purpose generic container &div& elements to structure a document into various sections and apply the formatting style, For example,
&div class=&header&&
&div class=&content&&
&div class=&footer&&
This is less than desirable, as &div& elements do not provide semantic information about the sections.
HTML5 added many semantic block elements, which extends &div&, to structure a document. They are: &header&, &footer&, &nav&, &section&, &article&, &summary&, &details&, &aside&, &figure&, &figcaption&, and &main&. You are encouraged to replace some of the &div&'s with these more descriptive semantic elements. Nonetheless, it is important to note that NOT all browsers (notably older IE versions) support these new elements.
Header &header&...&/header&, Footer &footer&...&/footer& and Section &section&...&/section&
The &header&...&/header& and &footer&...&/footer& elements can be used to markup the header and footer of a web page, in place of the less semantic pre-HTML5 &div id|class=&header&|&footer&&.
The &section&...&/section& element can be used to markup each content section in a document (such as each chapter of the book). (HTML5 does not define a &content& element!) For example,
&/section&
&/section&
Article &article&...&/article&
The &article&...&/article& element is used to markup
an independent and self-contained article such as a news story, which could have its own header, footer and content sections.
Figure &figure&...&/figure& and Figure Caption &figcaption&...&/figcaption&
You can markup a figure via &figure&...&/figure& and &figcaption&...&/figcaption&, e.g.,
&img src=&....& alt=&...&&
&figcaption&......&/figcaption&
You can remove the alt attribute from the &img& tag, as &figcaption& typically provides better description.
In a web page, figures are typically float alongside the text. For example, you can apply the following style rules to &figure& and &figcaption& to float the figure to the left:
margin-left: 0
margin-top: 0
margin-right: 20
margin-bottom: 0
figcaption {
font-size:
font-style:
margin-bottom: 5
Sidebar &aside&...&/aside&
The &aside& element can be used to introduce related contents, typically formatted in a floating sidebar alongside the main texts.
Navigation Menu &nav&...&/nav&
The &nav&...&/nav& element wraps a set of links into a navigation menu. For example,
&h1&....&/h1&
&li&&a href=&...&&......&/a&&/li&
&li&&a href=&...&&......&/a&&/li&
You can place the &nav& under an &aside& if the navigation menu is to be shown in a sidebar (or side panel).
Which Element to Use?
The HTML5 Doctor provides a nice flowchart for you to decide which HTML5 element to use @ .
Summary &summary&...&/summary& and Details &details&...&/details&
The &summary& and &details& elements are meant for showing the summary and details, typically in a collapsible box. You can use the following JavaScript to show/hide the box:
var box = document.getElementByID(&...&);
box.style.display = &none&;
box.style.display = &block&;
However, the browser supports for these two tags are poor, and it is best to avoid them.
Main Content &main&...&/main&
The &main& element (introduced in HTML5.1) marks the main content of a web page, excluding the header, footer, and navigation menu. There shall NOT be more than one &main& element in a document. For example,
&header&......&/header&
&article&......&/article&
&section&......&/section&
&section&......&/section&
&article&.......&/article&
&footer&......&/footer&
The &main& element shall NOT be a descendant of an &article&, &aside&, &footer&, &header&, or &nav& tags.
Providing Backward-Compatibility
Chrome, Firefox, Safari and Opera have no problems with these HTML5 tags, so does IE (Internet Explorer) 10. However, IE 9 and IE 8 may have problems rendering these tags.
To provide compatibility to older browsers, you could:
Add a CSS rule to render these tag as block element (does not work for IE 8):
article, aside, figure, figcaption, footer, header, main, nav, section, summary {
Use the HTML5 Shiv (@ ), which contains JavaScript to create these elements.
Use Modernizr (@ ) - a JavaScript library that detects HTML5/CSS3 features.
Inline Elements - Logical Style vs. Physical Style
Logical-style formatting tags specify the semantic meaning (e.g., strong, emphasis, code); whereas physical-style formatting tags define the physical or typographical appearance (e.g., bold, italic, teletype). Logical styles should be used instead of physical styles. This is because physical styles deal with the appearance, which should be defined in style sheet, so as to separate the content and presentation.
Logical-Style Formatting Tags
The logical style character-level (inline) tags are:
Logical-Style Tag
&strong&...&/strong&
strong emphasis (bold)
&em&...&/em&
emphasis (italic)
&code&...&/code&
program code (fixed-width monospace font)
&q&...&/q&
quotation (enclosed in curly double quotes)
&ins&...&/ins&
&del&...&/del&
&def&...&/def&
definition (bold or bold-italic)
&cite&...&/cite&
citation (italic)
&kbd&...&/kbd&
Keyboard (fixed-width monospace font)
&samp&...&/samp&
sample text (fixed-width monospace font)
&abbr&...&/abbr&
abbreviation (dotted underline, with title as tool tip)
&acronym&...&/acronym&
acronym (dotted underline, with title as tool tip). Recommend using &abbr& instead.
&address&...&/address&
&var&...&/var&
variable (fixed-width or italic)
The commonly-used tags are: &strong& (displayed in bold), &em& (displayed in italics), and &code& (use monospace font for programming codes).
&p&Lorem &q&curly quoted&/q&, consectetur adipisicing elit, sed do &cite&citation&/cite& incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis &samp&sample&/samp& exercitation ullamco laboris nisi ut &code&code&/code& ex ea &kbd&keyboard&/kbd& consequat. Duis aute irure dolor in reprehenderit in velit esse cillum dolore eu fugiat nulla pariatur.Excepteur &ins&insert&/ins& occaecat &del&delete&/del& non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.&/p&
Lorem curly quoted, consectetur adipisicing elit,
sed do citation incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis sample exercitation ullamco laboris nisi
ut code ex ea keyboard consequat. Duis aute irure dolor in
reprehenderit in velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur insert occaecat delete non proident,
sunt in culpa qui officia deserunt mollit anim id est laborum.
&abbr& and &acronym&
The contents are shown with a dotted underline. By including an attribute title=&fulltext& to the &abbr& and &acronym& opening tag, the full text will be shown as tool tip, when you point your mouse pointer to the element. HTML5 supports &abbr&, but does not support &acronym&.
For example,
&p&Lorem &abbr title=&abbreviation&&abbr&/abbr& dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor &acronym title=&Hypertext Markup Language&&HTML&/acronym& ut labore
et dolore magna aliqua.&/p&
Lorem abbr dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor HTML ut labore
et dolore magna aliqua.
The title=&tooltip-text& attribute is actually applicable to almost all of the HTML tags (e.g., &p&, &h1& to &h6&, &img&).
Physical-Style Formatting Tags
All the physical-style character-level tags are deprecated in HTML 4, as they deals with presentation and should be done via CSS. I list them here for completeness, in case you need to read some old HTML codes.
However, theHTML5 restores the &b&, &i&, &small&, &sup&, &sub&, &u& tags. The &big&, &tt& remains unsupported.
Physical-Style Tag
&b&...&/b&
&i&...&/i&
&u&...&/u&
&big&...&/big&
large font
&small&...&/small&
small font
&sup&...&/sup&
superscript
&sub&...&/sub&
&tt&...&/tt&
teletype (typewriter, in monospace font)
Span &span&...&/span&
Similar to its block-level counterpart &div&, &span& elements are extensively used in the modern web pages to mark out a run of texts, primarily for applying style.
HTML5's New Semantic Inline Elements
HTML5 puts back the &b&, &i& and &small& elements (that were deprecated in HTML4/XHTML1), but not the &u& element. It also added
more semantic character-level elements for text: &mark&, &time&, &wbr&. These elements are hardly used due to poor browser support, but presented here for completeness.
DateTime &time&
For marking up date, time, or datetime.
Word Break &wbr&
Marked Text &mark&
Highlighting certain texts, such as keywords. By default, it is shown with bright yellow background, similar to highlighter's marking.
Entity References for Reserved
& Special Characters
HTML uses characters such as &, &, &, & as markup tags' delimiters.
Hence, these characters are reversed and cannot be used in the text directly. An escape sequence (called entity reference), in the form of &xxx; (begins with & and ends with ; and contain the code xxx) is used for these reserved characters and other special characters.
The commonly used entity references are as follows (there are many many more, refer to the HTML reference - I like the arrows, Greek symbols, and the mathematical notations). Entity reference is case sensitive.
Entity Reference
non-breaking space
& &rA & &hA
& &rA & &hA
& (degree)
& Π & &S & &O
& Π & &S & &O
You need to memorize the first five which are extensively used: & (&), & (&), & (&), & (&) and (&).
Non-breaking Space (&)
As mentioned earlier, browsers ignore extra whitespaces (blanks, tabs, newlines). That is, multiple whitespaces are treated as one single whitespace. You need to use the non-breaking spaces (&) to insert multiple whitespaces.
&p&This paragraph contains special character & &, & and &
and those && words && have &&
more && spaces in between.&/p&
This paragraph contains special character & &, & and &
and those && words && have &&
more && spaces in between.
List-related tags are meant for marking up a list of items. HTML supports three types of lists: ordered list, unordered list and definition list.
Unordered List &ul&...&/ul& and
List Item &li&...&/li&
Function: An unordered list is shown with a bullet in front of each item. The &ul&...&/ul& contains an unordered list. Each of items in the list is enclosed in &li&...&/li&, as follow:
&li&list-item-1&/li&
&li&list-item-2&/li&
&p&An OMO web designer must master:&/p&
&li&Hypertext Markup Language (HTML)&/li&
&li&Cascading Style Sheet (CSS)&/li&
&li&HyperText Transfer Protocol (HTTP)&/li&
&li&Apache HTTP Server&/li&
Output of the example:
An OMO web designer must master:
Hypertext Markup Language (HTML)
Cascading Style Sheet (CSS)
HyperText Transfer Protocol (HTTP)
Apache HTTP Server
You can use attribute type in &ul& tag to choose the style of the bullets:
type=&disc&: a black dot (default).
type=&circle&: an empty circle.
type=&square&: a filled square.
Ordered List &ol&...&/ol& and List Item &li&...&/li&
Items in an ordered list are numbered automatically by the browser. The container tag &ol&...&/ol& contains an ordered list. Each item of the list is contained inside a &li&...&/li& container tag. The syntax is similar to the unordered list.
You can use attribute start=&number& in the &ol& tag to specify the starting number (which default to 1).
You can use the type attribute of the &ol& tag to choose the numbering style:
type=&1&: numbers 1, 2, 3, ... (default)
type=&a&: lowercase letters a, b, c, ...
type=&A&: uppercase letters A, B, C, ...
type=&i&: lowercase Roman numerals i, ii, iii, iv, ...
type=&I&: uppercase Roman numerals I, II, III, IV, ...
Definition List &dl&...&/dl&, Definition Term &dt&...&/dt& and Definition Detail &dd&...&/dd&
Function: &dl&...&/dl& tag contains a Definition List. Each of &dt&...&/dt& and &dd&...&/dd& pair contains a Definition Term and the Definition Detail, as follow:
&dt&term-1&/dt&
&dd&definition-for-term-1&/dd&
&dt&term-2&/dt&
&dd&definition-for-term-2&/dd&
&p&These are some of the commonly-encountered web protocols:&/p&
&dt&HTTP&/dt&&dd&HyperText Transfer Protocol&/dd&
&dt&FTP&/dt&&dd&File Transfer Protocol&/dd&
&dt&SMTP&/dt&&dd&Simple Mail Transfer Protocol&/dd&
&dt&POP&/dt&&dd&Post Office Protocol&/dd&
&dt&PPP&/dt&&dd&Point-to-point Protocol&/dd&
&dt&SLIP&/dt&&dd&Serial Line Internet Protocol&/dd&
These are some of the commonly-encountered web protocols:
HTTPHyperText Transfer Protocol
FTPFile Transfer Protocol
SMTPSimple Mail Transfer Protocol
POPPost Office Protocol
PPPPoint-to-point Protocol
SLIPSerial Line Internet Protocol
The &unordered list& and &ordered list& are used in most of the HTML documents. But I don't find many web pages using the &definition list&.
Nested Lists
You can place a list inside another list (called nested lists), by writing a complete list definition under an &li& item of the outer list. You can nest any types of lists (ordered list, unordered list).
Example 1:
&p&The topics covered are:&/p&
&li&HyperText Markup Language (HTML)
&li&Based on SGML&/li&
&li&Used to create web pages&/li&
&li&Maintained by W3C&/li&
&li&Cascading Style Sheet (CSS)
&li&Used to define presentation style for web pages&/li&
&li&Also maintained by W3C&/li&
Output of Example 1:
The topics covered are:
HyperText Markup Language (HTML)
A markup language based on SGML
Used to create web pages
Maintained by W3C
Cascading Style Sheet (CSS)
Used to define presentation style for web pages
Also maintained by W3C
Example 2:
&li&XML: Extensible Markup Language
&li&Based on SGML&/li&
&li&Maintained by W3C&/li&
&li&DOM: Document Object Model&/li&
&li&SAX: Simple API for XML&/li&
Output of Example 2:
XML: Extensible Markup Language
Based on SGML
Maintained by W3C
DOM: Document Object Model
SAX: Simple API for XML
Table-related tags are meant for tabulating data. (Older HTML documents tend to use &table& for formatting the document to divide the document into columns/sections, which should be avoided. Use style sheet for formatting instead.)
The basic unit of a table is a cell.
Cells are grouped into row. Rows are grouped to form the table.
This corresponds well to the &row-centric& approach in the display.
The essential tags used by table are:
&table&...&/table&: contains the entire table.
&tr&...&/tr&: contains a row.
&th&...&/th& and &td&...&/td&: contain a header cell and a data (detail) cell respectively.
Additional tags are:
&caption&...&/caption&: specifies a caption.
&thead&...&/thead&, &tbody&...&/tbody&, and &tfoot&...&/tfoot&: for marking out the table header, body and footer.
&colgroup&...&/colgroup& and &col&...&/col&: for applying styles to column group and column respectively.
For Example:
&caption&Price List&/caption&
&th&Fruit&/th&
&th&Price&/th&
&td&Apple&/td&
&td&$0.50&/td&
&td&Orange&/td&
&td&$0.65&/td&
Price List
Table &table&...&/table&
Function: Set up a table, consisting of rows of cells.
Three optional presentation attributes, border=&n& (specifies the width of borders, in pixels), cellspacing=&n& (specifies the spacing between cells, in pixels), and cellpadding=&n& (define the spacing between the content of the cell and its boundaries, in pixels), are often used in older HTML pages but now deprecated. The now-preferred approach is to use CSS (again! but coming soon!).
Table Row &tr&...&/tr&
Function: Set up a row inside a table, consisting of cells.
Table Header Cell &th&...&/th&, Table Data Cell &td&...&/td&
Function: Set up each individual cell of a row (of a table). &th&...&/th& defines a header cell (usually displayed in bold with center alignment) and &td&...&/td& defines a body cell.
An empty cell is typically marked as &td&&&/td&.
Cell Span: Attributes &rowspan& and &colspan&
On a &td& or &th& cell, we can use the attribute rowspan=&numOfRows& or colspan=&numOfColumns& to span the cell to occupy multiple rows or columns. The subsequent &td& or &th& cells will adjust their positions accordingly.
Example 1:
&td&11111&/td&
&td&22222&/td&
&td&33333&/td&
&td&44444&/td&
&td rowspan=&2&&55555&/td&
&td&66666&/td&
&td&77777&/td&
&td&88888&/td&
Example 2:
&td colspan=&2& rowspan=&2&&11111&/td&
&td&22222&/td&
&td&33333&/td&
&td&44444&/td&
&td&55555&/td&
&td&66666&/td&
Table Header &thead&...&/thead&, Table Body &tbody&...&/tbody& and Table Footer &tfoot&...&/tfoot&
Function: Used to define a header, body and footer sections for a table. Browser may duplicate the header or footer when breaking the table across multiple pages (in print-out). They can also be used to apply styles to each of the sections.
Column Group &colgroup&...&/colgroup& and Column &col&
An HTML table is row-centric. It consists of rows of cells. Nonetheless, you can also identify the columns via &colgroup& or &col&. But the features are really limited. Only a few properties could be applied on columns: border, background, width and visibility.
Function: &colgroup&...&/colgroup& can be used to group a set of columns, so that styles can be applied to all the columns in the group. Similarly, &col& can be used to identify a column for applying styles.
The attribute span=&numOfColumns& specifies the number of columns belonging to this &colgroup& or &col& declaration.
A &col& not nested under &colgroup& is automatically wrap under a &colgroup&.
Example 1:
&colgroup span=&3& style=&background-color:lightgrey&&&/colgroup&
&colgroup span=&1&&&/colgroup&
&td&Col 1 is in the group&/td&
&td&Col 2 is in the group&/td&
&td&Col 3 is in the group&/td&
&td&Col 4 is NOT in the group&/td&
&td&Col 1 is in the group&/td&
&td&Col 2 is in the group&/td&
&td&Col 3 is in the group&/td&
&td&Col 4 is NOT in the group&/td&
Col 1 is in the group
Col 2 is in the group
Col 3 is in the group
Col 4 is NOT in the group
Col 1 is in the group
Col 2 is in the group
Col 3 is in the group
Col 4 is NOT in the group
Example 2:
&colgroup&
&col style=&background-color:lightyellow& /&
&col style=&background-color:white&
&/colgroup&
&colgroup style=&background-color:lightgrey& &
&col span=&2& /&
&/colgroup&
&td&Col 1 in the group 1&/td&
&td&Col 2 in the group 1&/td&
&td&Col 3 in the group 2&/td&
&td&Col 4 in the group 2&/td&
&td&Col 1 in the group 1&/td&
&td&Col 2 in the group 1&/td&
&td&Col 3 in the group 2&/td&
&td&Col 4 in the group 2&/td&
Col 1 in the group 1
Col 2 in the group 1
Col 3 in the group 2
Col 4 in the group 2
Col 1 in the group 1
Col 2 in the group 1
Col 3 in the group 2
Col 4 in the group 2
Read &A Complete Guide to the Table Element& @ .
Anchors and Hyperlinks
A hypertext-link (or hyperlink, or link) allows users to:
navigate to a different document.
navigate to an &Anchor Point& (or bookmark) in the current document or another document, or
request other web resources (such as e-mail).
The anchor element &a&...&/a& can perform one of these two functions:
It can be used to set up a hyperlink, where user can navigate to the target document by clicking the link.
It can also be used to set up a &named anchor point& (or bookmark) within a document, to be targeted by other hyperlinks.
This function is hardly used, as we nowadays use the id attributes as targets.
Setting up a Hyperlink &a href=&url&&...&/a&
Function: to set up a hyperlink pointing to the url in &href& (hypertext reference) attribute.
&a href=&http://www.w3c.org&&W3C Home Page&/a&
&a href=&ftp://ftp.faqs.org&&FTP to FAQS.ORG&/a&
Show &a href=&../images/logo.gif&&LOGO&/a&Image
&a href=&mailto:&&Email Help&/a&
&a href=&news:soc.culture.singapore&&Singapore News&/a&
Link's Target Window/Frame &a href=&url& target=&...&&...&/a&
Instead of displaying the targeted page pointed to by href in the current browser's window. You can use the attribute target=&targetName& to display the new page in another window.
target=&_blank&: opens the linked document in a new tab or window. Take note that some people consider this as annoying and disruptive (hence, it was deprecated in HTML4.01, but supported in HTML5).
target=&_self& (default): opens the linked document in the same window/frame.
target=&_parent&: opens the linked document in the parent frame.
target=&_top&: opens the linked document in the full body of the window.
target=&frame-name&: opens the linked document in the named frame.
[Note: The target attribute has been deprecated in HTML 4.01 and XHTML 1.0. But it seems to be back in HTML5.]
Setting up a Link Targeting a Specific HTML Element via the id Attribute
You can setup a link to target a specific HTML element (typically a heading &h1& to &h6&), similar to bookmark, via:
Define an id=&idName& attribute for the targeted element. The id attribute is applicable to ALL HTML elements, including &h1& to &h6&. The id-value is supposed to be unique in the document (i.e., no two elements shall have the same id-value). An anchor name (or bookmark) called idname will be set up automatically on the element. You can refer to the anchor point via #idName, by prefixing with a # sign.
Setup a link targeting the anchor point, i.e., &a href=&#idName&&...&/a& for the same document, or &a href=&url#idName&&...&/a& for the anchor point in another document identified via url.
For example,
&h1 id=&ch1&&Chapter 1&/h1&
&h1 id=&ch2&&Chapter 2&/h1&
Jump to &a href=&#ch1&&Chapter 1&/a&
Jump to &a href=&#ch2&&Chapter 2&/a&
URLs (Uniform Resource Locators)
A URL uniquely identifies a piece of resource over the Internet. A URL is made up of 4 parts as follows:
protocol://hostname:port/path_and_filename
Protocol: e.g., http, ftp, mailto, file, telnet and others.
Server's domain name (e.g., www.w3c.org) or IP address (e.g., 127.0.0.1). The DNS (Domain Name Service) translates a domain name to an IP address.
Port number (optional): the TCP port number on which the server application is running. The default TCP port number is used if port number is omitted from the URL. For example, default TCP port number 80 will be used for HTTP, 21 for FTP.
Directory path and file name: Unix-style forward-slash '/' is used as the path separator (instead of Windows-style back-slash '\').
Directory path and filename of the URL are case sensitive.
Examples of URLs are:
http://www.w3c.org/css/index.html
:8080/default.html
ftp://ftp.faqs.org
news:soc.culture.singapore
Absolute vs.
Relative URLs
An absolute URL is fully qualified, e.g., /abc/index.html. A relative URL is relative to a base URL.
For example, suppose that the base URL is /abc/index.html, the base path (excluding the filename) is /abc/.
The relative URL &test.html& refers to /abc/test.html.&.
The relative URL &../home.html& refers to /home.html, where the double dot &..& denotes the parent directory, and single dot &.& refers to the current directory.
Always use relative URLs for referencing documents in the same server for portability (i.e., when you move from a test server to a production server). Use absolute URLs only for referencing resources from a different server.
Internal Links vs. External Links
Internal links points to resources in the same website (including anchor point in the current page). External links point to another website.
It is important to use relative URL for all the internal links.
Link Checker
You can use the W3C Online Link Checker (@ ) to check all the links in your document.
Authoring tools like DreamWeaver also provide built-in Link Checker.
Defining a Named Anchor &a name=&anchorName&&...&/a& (Not Supported in HTML5)
In HTML 4.01, you can use the name=&anchorName& attribute of the &a& tag to define a named anchor, which can then be targeted via #anchorName. This is similar to the implicit anchor name
setup via the id attribute described earlier. The &a&'s name attribute is not supported in HTML5, preferring the simpler id attribute.
For example,
&h2&&a name=&eg_1&&Example 1&/a&&/h2&
&h2&&a name=&eg_2&&Example 2&/a&&/h2&
Jump to &a href=&#eg_1&&Example 1&/a&
Jump to &a href=&#eg_2&&Example 2&/a&
Image Tag &img&
Function: Embed an image inside an HTML document. The syntax is:
&img src=&imageUrl&
alt=&alternate-text-if-image-cannot-be-shown&
width=&pixels|n%&
height=&pixels|n%&
title=&tooltip-text& /&
&img src=&logo.gif& alt=&Logo& title=&Logo& width=&200& height=&100&&
Attributes:
src=&imageUrl& (required): gives the URL of the image.
alt=&text& (required): alternative text to be displayed if the image cannot be displayed.
width=&n|n%&, height=&n|n%&:
specify the width and height of the image display area (in pixels or percentage).
Browsers use these values to reserve space for the image (before the image is downloaded) and continue rendering the rest of the contents.
You can also use the width and height to scale an image. This is not recommended because scaling-up results in a blur image and scaling-down is a waste of bandwidth.
I recommend that you use the width and height tags for images, so that the browser can reserve spaces for the images. This is more efficient and could avoid a jerky display if you page contains many images. You can find out the width and height of an image easily by checking the &Properties& of the image.
title=&tooltip-text&: the attribute title is applicable to most of the HTML elements for you to provide the tool-tip text.
Using Image as Hyperlink
To use an image as a hyperlink, put the image tag &img& between &a href=&url&& and &/a&. For example:
&a href=&/&&
&img src=&logo.gif& alt=&logo& width=&30& height=&20&&
&p&click the above image to visit us&/p&
Image used as hyperlink anchor automatically gets a border.
The color of the border is given in the link (unvisited), vlink (visited), alink (active) attributes of the &body& tag (or the a:link, a:visited, a:hover, and a:active CSS properties - to be discussed later).
Introduction to CSS
Why Style Sheet?
The original aim of HTML is to let the content providers concentrate on the contents of the document and leave the appearance to be handled by the browsers.
Authors markup the document contents using markup tags (such as &p&, &h1&, &ul&, &table&, &img&) to indicate its semantic meaning (&This is a paragraph&, &This is heading Level 1&, &This is an unordered list&, &This is a table&, &This is an image&). The browsers then decide on how to display or present the contents in the browser's window for the web surfers.
However, HTML has gone out-of-control in the early years. Many markup tags and attributes were created for marking the appearance and the display styles (e.g., &font&, &center&, align, color, bgcolor, link, alink, vlink are concerned about the appearance in font, color and alignment) rather than the meaning of the contents. These tags flood the document and make creation and maintenance of the contents extremely difficult. Furthermore, over the years, we have engaged graphic designers to work on the appearance and leave the content providers to focus on the contents. Hence, there is a need to separate the contents and presentation of the HTML document.
The W3C (World-Wide Web Consortium @ ) responded to the need of separating document's contents and presentation by introducing a Style Sheet Language called CSS (Cascading Style Sheet) for presentation, and removing the presentation tags and attributes from HTML. CSS can be viewed as a companion of HTML. It allows web graphic designers to spice up the web pages, so that the content providers can focus on the document contents with HTML.
CSS Specifications
W3C defines three CSS levels:
CSS Level 1 (December 1996): CSS1 laid the ground work and introduced the selectors and most of the properties.
CSS Level 2 (May 1998) and CSS Level 2.1 (Last revised on June 2011): CSS2 added new features such as targeting devices and printers, and absolute positioning. CSS2.1 (@ )
touches up CSS2.
CSS Level 3: CSS3 is not a single piece of specification. As CSS grows, W3C decided to break it into modules, such as the Selectors module, the Values and Units Modules, the Box Alignment module, and so on. Each module is then developed independently. The CSS3 Selectors module (@ ) and CSS3 Colors module (@ ) were completed in 2011. Other modules are still work-in-progress.
It is important to take note that:
CSS is humongous!!! Most of the browsers today have yet to fully support CSS2/CSS2.1.
CSS is a language with its own syntax, which is different from HTML and JavaScript.
What is a Style Sheet?
A Style Sheet is a collection of style rules that can be applied to a selected set of HTML elements.
A style rule is used to control the appearance of HTML elements such as their font properties (e.g., type face, size and weight), color properties (e.g., background and foreground colors), alignment, margin, border, padding, and positioning. This is the same as the styles in any publishing software like WinWord or LaTex.
The word cascading means that multiple style rules can be applied to the same HTML element.
The browser follows a certain cascading order in finalizing a style to format the HTML element in a predictable fashion.
CSS By Examples
Example 1: CSS
Syntax and Tag-Selectors
Create the following file (using a text editor such as Windows' NotePad/NotePad++ or Mac's TextEdit), and save as &CSSEg1.css&.
font-family: &Segoe UI&, Tahoma, Helvetica, Arial, Verdana, sans-
font-size: 14
margin: 5px 15px 5px 15
padding: 0;
background-color: #
h1, h2, h3, h4, h5, h6 {
font-family: &Trebuchet MS&, &Segoe UI&, Helvetica, Tahoma, Arial, Verdana, sans-
font-weight:
text-align:
font-style:
text-align:
A CSS style sheet provides style rules to HTML documents. You test out the above styles, by creating an HTML document, which references the CSS via the &link& element, as follows:
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Testing CSS Style Sheet&/title&
&link href=&CSSEg1.css& rel=&stylesheet&&
&h1&Test CSS Style Sheet&/h1&
&h2&This is heading level 2&/h2&
&p&Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.&/p&
How it Works?
/* ... */ is a CSS comment. Comments are ignored by the browsers but provide important information to the readers, as well as the author.
A CSS style sheet contains style rules.
A style rule begins with a selector, followed by the list or presentation properties enclosed within {...}.
A property is identified by its name, followed by its value, separated by colon &:&. The name:value pairs are separated by semicolon &;&. A name could have multiple values, separated by commas &,& (e.g., the font-family property).
A selector selects a set of HTML elements to apply the styles. This example uses the so-called Tag-Selector, which select all elements having the tagname. For example, the first rule is applicable to the &body&; the 3rd to &h2&, and the 4th rule to all the &p& elements.
Selectors having the same rules can be grouped together and separated by commas &,&. For example, the 2nd rule is applicable to &h1& to &h6&.
Some of the properties are inherited by the nested elements. For example, the &p& nested under &body& inherits the font-family from the &body&. Some properties are not inherited.
If more than one rules are applicable, the properties are accumulated. But, the last rule will take effect if there is conflict. For example, both Rule 3 and 4 are applicable to &h2&. The &h2& accumulates the properties from both rules. It takes the font-weight:bold from Rule 3 (which is not specified in Rule 4); but uses the color:blue from the Rule 4 (instead of Rule 3).
Style properties:
The font-family list the font faces, in the order of preferences. Browsers search through the list (from the beginning) to an available font face.
color and background-color: specify the foreground and background colors, respectively. Color can be expressed in #rrggbb (hex value), rgb(r, g, b) (decimal value between 0 and 255), or with the pre-defined color names (such as red, blue).
text-align: text alignment of either left, right, justify, center.
font-weight: normal, bold, and others.
font-style: normal, italic, and others.
Take note that CSS is a language with its own syntaxes. CSS syntax is totally different from HTML!
Example 2: CSS Class-Selector, ID-Selector with &div& and &span&
font-family: &Segoe UI&, Tahoma, Helvetica, Arial, Verdana, sans-
font-size: 14
margin: 5px 15px 5px 15
padding: 0;
h1, h2, h3, h4, h5, h6 {
font-weight:
text-align:
#header, #footer {
background-color: #
text-align:
.highlight {
background-color:
We shall use the following HTML document to test the CSS:
&!DOCTYPE html&
&html lang=&en&&
&meta charset=&utf-8&&
&title&Testing CSS Style Sheet&/title&
&link href=&CSSEg2.css& rel=&stylesheet&&
&div id=&header&&
&h1&Test CSS Style Sheet&/h1&
&div id=&content&&
&h2&This is heading level 2&/h2&
&p&Lorem ipsum dolor sit amet, &span class=&new&&consectetur adipiscing elit&/span&, sed do eiusmod
tempor incididunt ut labore et dolore &span class=&highlight&&magna aliqua&/span&. Ut enim ad minim
veniam, &span class=&new highlight&&quis nostrud exercitation&/span& ullamco laboris nisi ut aliquip ex ea
commodo consequat.&/p&
&div id=&footer&&
&p&This page is created with &span class=&new&&HTML5/CSS3&/span&&/p&
How it Works?
In the earlier example, we use Tag-Selectors which select elements based on tagname. Besides the Tag-Selector, there are Class-Selector which selects elements based on class and ID-selector which selects an element based on the id attribute.
An ID-Selector begins with a # sign, followed by an id-name, e.g., #header and #footer, which select element with id=&header& and id=&footer&, respectively. Since id-value is meant to be unique within an HTML document, ID-selector select at most one element.
A Class-Selector begins with a dot &.& followed by a class-name, e.g., .new and .highlight, which select all elements with class=&new& and class=&highlight&, respectively. Unlike id-value that is unique, many elements can have the same class-name.
In the test HTML document, we partition the body into three sections, via &div&. We assign a unique id to each &div&, i.e., &div id=&header&&, &div id=&content&& and &div id=&footer&& to semantically identify their contents, and use the ID-Selectors #header and #footer to apply styles to the &div&'s.
Similarly, we mark texts with &span class=&new&& and &span class=&highlight&&, and use the Class-Selectors .new and .highlight to apply styles to these texts.
Take note that:
&div& is a block element, while &span& is a inline element.
The class attribute can take multiple values, as in class=&new highlight& (Line 18). Both styles are applied.
CSS template
Validating CSS
You can use Online CSS Validation Services such as W3C Jigsaw (@ ) to validate your CSS file.
Try validating the above example using W3C CSS Validator.
Inspecting Element's Styles
Firebug (or Web Developer Tools)
The Firebug plug-in for Firefox (@ ) is simply a great tool for web development. It supports HTML, CSS, JavaScript and DOM. On CSS, you could select (inspect) an HTML element, and it will show you all the cascading style rules that are applied to that elements from all the sources (inline, embedded, external), and how the rules were merged and conflicts were resolved. You can temporarily disable a rule, and edit a rule to check the effect instantly. Get it and start to inspect the web pages of your favorite site.
To debug CSS under Firebug:
Launch Firebug.
To inspect the style of an HTML element &rA Choose the &HTML& panel &rA Click on the &Inspect& button and then select the HTML element of interest from the browser window &rA You can check/modify the &Style&, &Layout&, &DOM& and &Events& (on the right panel) associated with the selected element.
To check/modify the CSS Style rules &rA Choose the &CSS& panel.
Try it out on the examples.
CSS Basics
CSS Syntax
CSS is a language by itself. It has its own syntax, which is totally different from HTML and JavaScript!!! (How many syntaxes you have to know to program the web?!).
The syntactic rules are:
rule consists of a selector which selects the HTML elements it operates upon, and a list of style property name:value pairs enclosed in braces {...}, as follows:
selector {
property-name-1: property-value-1-1, property-value-1-2, ... ;
property-name-2: property-value-2-1, property-value-2-2, ... ;
For example,
font-family: &Segoe UI&, Tahoma, Helvetica, Arial, Verdana, sans-;
font-size: 14
margin: 10px auto 10
padding: 0;
This selector selects the &body& tag. Hence, the defined style is applied to the &body&...&/body& element. Many (but not all) of the CSS properties (such as color, font) are inherited by its descendants, unless they are overridden by other style rules.
The name:value pairs are separated by semicolon &;&. You can omit the last semi-colon
before the closing brace &}&. But I recommend that you keep it, so that it is easier to include new entries without a missing &;&.
name and value are separated by a colon &:& in the form of name:value.
values for the same property name are separated by commas &,& (as in the font-family). However, multiple parts of the same property value are separated by space &&& (as in the margin, which has a value with 4 parts).
Values containing space must be quoted, e.g., &Times New Roman& or 'Times New Roman'.
Extra whitespaces (blank, tab and newline) are ignored.
If the same set of styles is applicable to more than one elements,
the selectors can be grouped together in one single rule (called Group-Selector). The tagnames are separated by commas &,&. For example, the following rule apply to elements &h1& to &h6&:
h1, h2, h3, h4, h5, h6 {
text-align:
font-family: &Trebuchet MS&, &Segoe UI&, Helvetica, Tahoma, Arial, Verdana, sans-
Comments can be inserted inside the style sheet enclosed between /* and */. The end-of-line comment // is not applicable in CSS?!
CSS Syntax vs. HTML Syntax
CSS and HTML have different syntaxes!!! For example, HTML's attributes uses &=& to separate the name and value, in the form of name=&value&;
the name-value pairs are separated by spaces, as follows:
&img src=&logo.gif& alt=&Logo& height=&10& width=&20&&
Inline, Internal and External Styles
There are three places where you can define style rules:
: Included inside a particular HTML opening tag's
via attribute style=&style-rules&. The rules are applicable to that particular HTML element only.
: Embedded i