HTML.co.uk

CSS was developed to make a way for Web developers to define their feel and look of their own WebPages in the year 1997. Its main intention was to separate design from content so that HTML performs more functions that was initially based on- the content mark up, without worrying much about layout and design.

Until 2000 CSS didn’t gain much fame, when Web Browsers started using more of color aspects and basic front of CSS. At present all modern browsers support all the levels of CSS like CSS level 1, CSS level 2 and CSS level 3. Web designers who weren’t using CSS for their development and design are becoming the matter of past and it pretty important to understand and learn CSS as it is known to HTML.

CSS- Cascading Style Sheet

Here style sheet directly refers to documents. For document designs, style sheets are in the use for many years. For a layout, these sheets are the technical specifications whether it may be online or print.

Cascading is one of the special parts. The intention of Web style sheets are to cascade through a number of style sheets. Each and every Webpage is affected by one style sheet at least, even if no styles are applied by the Web designer. These style sheets are the user agent sheets (default styles which are used to be displayed if no instructions are provided). If at all a designer gives the other instructions; here the browser should know which of the instructions are in precedence.

Why CSS used?

To style WebPages, CSS is used but there is more to CSS. CSS is also used to style XML and XHTML markup; this means to you that, if anywhere there is XHTML or XML mark up, CSS can be used to describe how it will appear. CSS is used in defining how WebPages should look like, when Webpage is viewed from other media than in a browser.

For example: you will be able to create a print sheet which is styled, which will describe how the WebPages will be printed out and another styled sheet where the Webpage will be displayed on a projector for the purpose of slide show.

Why is CSS vital?

It is one of the powerful tools available. A Web designer must or should learn CSS because as it affects the whole tone and mood of a particular Website. Well, a written style sheets can be quickly updated and allows the site to change what is preceded or without valuing the changes to the XHTML.

Challenge before the person who wants to learn CSS is, there is a lot to be learned but when you start learning it doesn’t seems to be bulky. In CSS level 1 there are 60 properties and in CSS level 2 there are 70 properties. Compared to attributes and HTML tags, learning CSS is a cake walk.

As CSS combines, cascades and the browsers here interpret the directives in a different way, CSS will be little tougher than what is Plain HTML is. Once the power of CSS is utilized you will come to what is CSS?

Today’s internet is lot different from what it initially used to be. With the latest developments such as web standards and the search engine optimisation, it is just not possible to cut the websites the same old way. The W3C lays down certain regulations and guidelines, which have to be followed by all the web designers so as to make their website functional as well as accessible as far as possible. Making the website compatible with standards of W3C ensures that your site is able to achieve its maximum potential across a wide range of systems. But the W3C standards keep on changing on a daily basis. But does this mean that your website will be suffering aesthetically? The simple answer is NO. With the evolution of CSS the web designers have the freedom to do almost anything on web. CSS also has the capability of giving much better usability, foundation for SEO and compliance with the web standards.

From the perspective of web designing, the biggest advantage of CSS is the cross browser compatibility. Almost every web designer would have tested his website on other computers just to ensure that layout is not mangled. The main reason for this is that different versions of the same web browsers as well as different web browsers would always display different websites differently. As a matter of fact, all the web site designers have to forcefully test their websites on as many browsers as possible so as to minimize these unwanted problems. As a web developer, it is virtually impossible for you to control all the variables present in your code but can definitely try to minimize these problems. It’s a well known fact that if the user has the ease and the comfort level on your, he will surely return back to the site.

Though all the website users are conversant with the powers of CSS but surely many of them have never utilised to its maximum capabilities. The cascading feature of CSS is actually the most important part of the web designing, yet it is most overlooked. The designer can easily alter one file, which is the style sheet and the entire site can be modified just by making the necessary changes in one file. CSS is capable of creating the code that is less bulky and cleaner as compared to the other scripting languages. Less code would just imply that the search engine would have a better access to the content of your web site. As a result of this your website will be indexed more effectively and will have more targeted users or clients.

Another great benefit of CSS that cannot be overlooked is its increased efficiency and ease in its use. Once you have successfully attained knowledge about the programming techniques, it is quite easy to control the designs of your website using CSS. For a website to work properly, it is not essential that it should be boring and simple. CSS surely does not limit the designing capabilities of your web site; instead it gives the designers the power of creating fully functional and aesthetically pleasing site.

Cleaning of HTML code is as important as writing of the code for the success of any website. Cleaning of HTML code will firstly reduce the size of your web page, secondly it would make your website very search engine friendly and last but not the least, and it will increase the accessibility to your website. Whenever you start the process of cleaning your HTML code, the first and the foremost thing to be kept in mind is to look for all the extra, excessive or non compliant HTML coding.

This eliminating of excessive and non compliant HTML coding can be cleaned by simply moving the presentation HTML code to the style sheets and keeping only the relevant or compliant code which includes the relevant content of the site in the HTML code. As we all know that a title tag is required by each web page. Therefore it is very important and mandatory that each page should have a different or unique title tag relative to the content of the web page as this will be an important factor from search engine point of view.

Each web page features a description Meta tag and key word Meta tag which can be used by the search engines while displaying their results. Therefore always ensure that each page has a different description Meta tag which should be relative to the content of the web page. The robot Meta tag is only of importance for those who do not have access to the robots.txt file. You should count it out if you have a convenient and easy access to the robots.txt file. Similarly there are numerous Meta tags being used throughout the web where some of them have no value in particular, therefore their use should be forbidden.

The main goal of cleaning the content is to have more area available for the important web content and also ensure fast and quick loading. Excessive paragraph coding, non-breaking-spaces and line breaks should be avoided as far as possible as there are other options available which give the same effect but involve less coding thereby resulting in a clean HTML document. If your HTML code includes font formatting, table formatting or page formatting, this will unnecessary chew up the place and cause unnecessary crowd and hassle. It is always better to move all of these to the stylesheets and make your HTML code cleaner and better readable. It will be a good option to create a class in the stylesheet and apply that class to the element, whose similar look is required repeatedly. This will definitely result in a cleaner HTML code and will also make changes required site wide much easier.

At times there are certain incorrect and invisible characters that get introduced in our HTML code which a browser is not able to recognize, when the code is copied from the word processor. All these characters should be removed or cleaned from our HTML code. Also if there are too many nested tables or the tag is missing or if the rows and columns are not listed properly in the HTML code, it can cause unnecessary problems. Therefore it is very important to clean up the HTML code in order to increase the accessibility and optimization of your website.

Cascading Style Sheets (CSS) refer to the language which is used to design the layout and presentation of a web document created in HTML, DHTML, XHTML or any other type of XML document. Via CSS, the designers can define the fonts, colors, styles and overall layout of a web page. CSS improves the web designing work by reducing the complexity. They provide more flexibility and control over the presentation of characters and their style on a web page.

CSS acts as the base platform which is responsible for the format and layout of an HTML document. It allows the same HTML content to be viewed in different styles for different purposes like for print, for web viewing etc. CSS are very useful when the structure of the HTML document is repetitive. For example; if you are making an HTML document in which you have used <Font color=red face=comic sans ms> a lot, then instead of writing this code again and again a CSS can be created in which you can define the type of font you want. This way all the tags and their attributes which helps in designing the appearance and style of the web page such as background styles, borders, character size, heading styles and many more can be defined using CSS. The main advantage of using CSS is that for a single HTML document, multiple CSS can be used. In this way the appearance and layout of the web page can be changed whenever needed in no time. CSS can be used as a separate document or it can be embedded in the HTML.CSS can be created by different people in different styles. It is prepared by both the web authors and the users. The web author makes the CSS having different styles which can be applied to the HTML document. A user prepares a local CSS which is applied to all the documents of a website. CSS are also created in ‘user agent style’ which specifies the default settings for a web browser to display the web page.

Advantages of CSS:

1) CSS allows us to create templates for the HTML documents in which we can predefine different visual styles and appearances.
2) CSS reduces the structural complexity of HTML documents.
3) CSS separates the designing part and the content part of a web page. This leads to the better management and understanding.
4) CSS can be used with any XML language.
5) CSS really helps in managing large websites having a number of interlinked web pages. It assures consistency in the layout and design.
6) CSS can be used to view a web page in different styles depending upon how you will be using the final output. For example; for viewing on web the layout of the web page is different and for printing purposes another layout may be needed.

Apart from these remarkable advantages, CSS suffers from some disadvantages too. There are some issues which creates hindrance while using them. The most common problem is that not all the web browsers support all types of CSS. There are some other issues regarding the expressions and their usage in CSS. Thus, developers are finding more tools and techniques which can improve the functionality of CSS in future. The World Wide Web Consortium (W3C) maintains all the CSS specifications.

HTML is used to create and design static web pages. It proved to be very useful and easy to understand and soon after its evolution it gained world wide popularity rapidly. But with the growth of internet and its related applications the internet users demanded something more in the websites. Web surfers were vigorously expecting more interactive, entertaining and exciting web content. Thus DHTML was introduced. Some people call DHTML as an advanced version of HTML, but some did not consider it a language or a new specification of HTML. Rather, they perceive DHTML as a new way of controlling the HTML commands and functions. DHTML is basically an amalgamation of four different techniques i.e. HTML, Scripting, Cascading Style Sheets (CSS) and Document Object Model (DOM). Using all these tools we can create more interactive and animated web pages to arrest the attention of the internet users. DHTML is used to insert special effects to a website such as mouse rollover effects, drop down lists, animations, advanced marquee effects etc. It allows you to control the HTML elements and change them.

The four techniques which are harmonically used in DHTML are:

1) HTML: DHTML uses the standard HTML code as its base.
2) Scripting: A client side scripting language such as Java Script is used to control the elements in DHTML
3) CSS: Cascading Style Sheets are also used to define and manage the style and layout of the web pages.
4) DOM: Document Object Model allows you to access any portion of a DHTML document and change its properties.

DHTML adds life to static HTML pages. The user feels that he is interacting with the website in real time. DHTML can add an effect with any event. For example when you click on an image, it background changes. In this the effect is related with the mouse click event. Similarly a lot of events such as mouse rollover, drag n drop, scroll etc. can be associated with one or more DHTML effects.

The four properties of DHTML are:

1) DHTML is used to modify and control the standard HTML tags and their attributes.
2) DHTML gives you real time interactivity with the web page. It can position different objects, images and text dynamically within the web page.
3) DHTML is also used dynamic fonts. Only Netscape Navigator supports this function.
4) Another important feature of DHTML is Data Binding. With the help of this property the web surfer can easily access databases from the websites. This feature is only supported by Microsoft’s Internet Explorer.

It is clear from the above discussion that DHTML has many advantages and some disadvantages too. DHTML is more complex than HTML. The DHTML editors are very costly. Apart from this some of the features of DHTML are browser specific but still DHTML is used worldwide as it has proved itself a great utility to enhance the quality and usability of web pages. Anyone can use DHTML in any form. From a small piece of creativity to large complex codes, DHTML can be used to make web sites better than ever before.

Paragraphs serve the text’s optical construction. When producing HTML files, it is not enough to only add a break in the editor. Internet browsers ignore such breaks.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Defining Text Paragraphs</title>
</head>
<body>
<h1> Defining Text Paragraphs </h1>
<p>A new paragraph begins here, and ends here</p>
<p>A new paragraph begins here, and ends here</p>
</body>
</html>

Explanation:

<p> (p = paragraph) introduces a paragraph of text. </p> ends the paragraph of text and stands at the end of the paragraph.

Take Note:

The </p> end tag is optional in HTML, which means it doesn’t necessarily have to be included. On the other hand, in XHTML it is required. Moreover, it is also good HTML style to include the closing </p> tag. It also makes the meaning of such a tag clearer: It surrounds a block of text – it does not stand for the space in between two paragraphs. If you format the <p> element with style sheets, then that means you already have to write a <p> before the first text block in order for all the paragraphs to have the same formatting.

The <p> element cannot include any block producing elements such as headings, paragraphs or lists. For HTML this means: the paragraph will be implicitly closed (with an internally included </p>) at the first appearance of a tag that is no longer allowed in the current paragraph (such as <ul> or <table>) – an eventually later following </p> will then be alone without any start tag and therefore a mistake. In XHTML the </p> must come before any block producing elements.

The rules regarding the character set, special characters and HTML characters apply to the paragraph text.

Aligning Paragraphs

Paragraphs are aligned left by default. But you can also align a paragraph to the right or centre. Justifying the text is also possible.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Aligning Paragraphs</title>
</head>
<body>
<h1>Aligning Paragraphs</h1>
<p align=”center”>This is a paragraph that has been centred</p>
<p align=”right”>This is a paragraph that has been aligned to the right</p>
<p align=”left”> This is a paragraph that has been aligned to the left</p>
<p align=”justify”> This is a paragraph that has been justified</p>
</body>
</html>

Explanation:

With the align=“center” in the introductory <p> tag you centrally align the paragraph text. With align=“right” the paragraph is aligned to the right. With align=“justify” the paragraph text is justified. With align=“left” the paragraph is aligned to the left as usual.

Take Note:

Not all browsers interpret justifying. Justifying is not suited for small passages of text, because here the relatively large distance between words disrupts the reading flow.

align has been classified as deprecated in the HTML-4 standard. Instead it is recommended to use style sheets in such a manner for example:

<p style= “text-align:center”>…</p>

Formatting Paragraphs with CSS

HTML has no influence on how exactly a paragraph text will be displayed. The browsers use default formats in order to display the texts. However, with style sheets you can format the paragraphs in any way you please. When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html>
<head>
<title>Formatting Paragraphs with CSS</title>
</head>
<body>
<h1>Formatting Paragraphs with CSS</h1>
<p style=”font-family:Arial,sans-serif; font-size:18px; color:blue”>A formatted paragraph </p>
<p style=”background-color:yellow”>Another formatted paragraph</p>
</body>
</html>

Explanation:

Two paragraphs are defined in the example. The first paragraph is defined to be displayed in Arial font, 18 pixel font size, and in the colour blue. The second paragraph will receive a yellow background.

Please use the HTML attributes described here only in the case of justifiable exceptions – this is why we are only touching upon the subject superficially. These attributes have never belonged to the HTML standard and are a typical example of the type of chaos that results when a browser is allowed to do its own thing. You should definitely instead use style sheets to define side borders.

An example:

<html>
<head>
<title> Side Borders</title>
</head>
<body marginwidth= “50” marginheight= “100” topmargin= “100” leftmargin= “50”>
<h1>Text</h1>
A lot of text and so on.
</body>
</html>

Explanation:

The elements for side borders follow after the introductory <body> tag in the HTML file. The leftmargin attribute determines the distance between the left and right window border and the file’s content for Internet Explorer. The topmargin determines the distance in between the upper and lower window border and the file’s content for internet explorer. Marginwidth and marginheight determine the distances for Firefox. All values are in pixels. The left and right borders are always the same size, just like the upper and lower borders.

Take Note:

The defined side borders only apply to the HTML file for which they are defined. If you wish to produce a document from multiple HTML files, with consistent side borders among them all, then you will have to individually set the side borders for each file.

Side Borders with Style Sheets:

Here is another example on how you can achieve the same side borders in the example above using style sheets:

The Example:

<head>
<style type= “text/css”>
body { margin-left:50px; margin-right:50px; margin-top:100px; margin-bottom:100px }
</style>
</head>

Explanation:

You achieve the same effect using the elements above in the HTML file header. These elements are interpreted by Firefox and Internet Explorer. Moreover, the elements have also been standardised by the W3 consortium.

You can determine a colour for the display window’s background. The entire HTML file will then be shown on this background colour.

An Example:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html14/loose.dtd”>
<html>
<head>
<title> File Wide Colour for the Background</title>
</head>
<body bgcolor= “#CCFFFF”>
<h1>text, links, graphic references etc. </h1>
</body>
</html>

Explanation

The elements for the background colour in the HTML file are carried out through the introductory <body> tag.

With text you define a colour for the text.
With link you define a colour for links to already visited sites that have not been visited yet.
With vlink you define a colour for links that have already been visited.
With alink you define a colour for links that have just been activated.

Take Note:

All of these attributes have been classified as deprecated and should be avoided in the future. You will achieve the same effect with the help of style sheets, placed in the file header in between <head> and </head> using the following source text, for example:
<style type=“text/css”>
body { background-color:#663333; color:#FFCC99; }
a:link { color:#FF9966; }
a:visited { color:#FF9900; }
a:active { color:#FFFFFF; }
</style>

The defined text foreground colours should contrast with the background colours. If, for example, you define a dark background colour, then you should choose a bright foreground text (such as white, yellow, light green and light blue).

Additional Possibilities

When using style sheets you must then know how to define CSS formats. Then you will be able to use CSS attributes which we will describe in depth in later sections.