     
Website Hosting Tutorials:
Getting Started 301 Redirect and Multiple Domains 301 Redirect Setup Ajax ASP Blogs C, C++ Cascading Style Sheets ColdFusion Domain Registration (free) Dreamweaver Ecommerce Tutorial Editing .htaccess Error Codes Favicon File Transfer Protocol FrontPage Google Sitemaps Hyper Text Markup Language Javascript Perl PHP MediaWiki Multimedia MySQL Outlook Podcasting Robots.txt RSS Feeds Ruby on Rails Shared or VPS Hosting Submitting your Site to Directories Tables in HTML Web Graphics Web Hosting Knowledgebase - new! XML    | |
Website Hosting Guides - Using Cascading Style Sheets, CSSCascading Style Sheets (CSS):On this page:
Cascading Style Sheet or CSS is a great way to change the look, style and feel of your website. It is a simple mechanism or language, designed for specifying the layout or formatting properties of different HTML elements in a web page. As you can separate visual design elements from the structural logic of a web page, CSS gives you control of your page design without sacrificing the integrity of data. The style sheets define how HTML elements should be displayed on the web page. The styles are normally saved in external file with .css extension. You can easily integrate this CSS document into your HTML tags and display your pages as per your wish. How CSS WorksCSS files are just text files that separate page content from its appearance. The content of a page goes into an HTML file while the appearance goes into a style sheet. But how does it appear on the reader’s browser? The style sheets just suggest the web browsers how to draw a page. They give a set of instructions to the browser. However, it depends on the browser if it can support style sheets instructions or not. Information can be divided into two parts – content and appearance. When a user sends request for a page to download, the browser fetches the HTML document, which links to the CSS document. If the browser supports the format described in CSS, it displays the page accordingly. The Parts of CSSEvery cascading style sheet consists of a series of instructions called statements. The statement identifies the elements in an HTML document that it affects and tells the browser how to draw these elements on the web page. The elements in HTML are paragraphs, links, list, and heading and so on, i.e. anything marked up inside HTML tags. CSS is very useful for styling any HTML page. Styles are also called rules and there are two parts of a rule - the selector and the declaration. The part of a statement that identifies page elements is called selector, which selects page elements. The other part, which tells a browser how selected elements should be drawn, is called the declaration. A declaration can contain any number of properties or the individual pieces of style to be applied to the selected element. For example, a CSS statement like the following body {font-family: Arial; means that inside the body of a document the desired font is Arial, the desired text color is black and desired background color is white. However, you can use more complicated rules for controlling placement of images, lines, links etc. Here the selector is body. That means the statement will affect the <body> element of any page linked to the style sheet. The declaration part is having three properties. Whenever any element selected by this selector will be called, three properties will be affected. W3C (World Wide Web Consortium) recommends two standard style sheets CSS1 and CSS2. These two style sheets offer accurate layout and design for websites. However, CSS2 has more screen based presentation properties than CSS1. How to use CSSYou can use CSS from inline styles, embedded styles sheets, and external style sheets. CSS can be defined in two parts:
Inline Styles:You can use these styles to modify the appearance of a single element by specifying the 'style attribute' of a given HTML tag. <h1 style="font: Arial, Helvetica, sans-serif 14px bold; color: red"> Page Heading</h1> Now this heading style appears like this: Page Heading This is a heading style, which has Arial, Helvetica, sans-serif font, font size - 14px, font weight - bold and font color - red. You can edit this style according to your wish. Just change the font face from Arial to Verdana, make font size 18 and change the color whatever you want. Now, see the difference after that. As you finished editing the style appears like this: Page Heading Embedded Style Sheet:Use an embedded style sheet to declare several styles in your document. An embedded style sheet is placed between the <head></head> tags of your HTML document. <style type="text/css"> Now it appears on the page like this:
This is a HTML page, which has a gray background. However, on the top of the page you can see another color, because we have used a gradient background for the page. You can put this effect with image. This page has a heading style in White and bold style. It also has a link style without underline, and the total page content is in black normal style. You can edit this style as per your wish. Just change the background color and the image from your own image folder. Also, you can change the page heading by the same way, can change the color of the link, and can change the link text as an underlined text by only using (text-decoration: underline;). After editing, now it appears like this:
External style sheet:Use an external style sheet when you have many styles and wish to keep your HTML clean and separate. You can link it to your style sheet by placing the following in between the <head> </head> tags of your HTML document. You can link to the same external style sheet from all pages of your website. <link rel="stylesheet" type="text/css" href="Styles/styles.css"> <link rel="stylesheet" type="text/css" href="http://www.YourDomain.com/style.css"> (Absolute path) By this way you have to make page save it on .css extension and link with any html page. On the .css page you can write in this format like:
body { For this external stylesheet, you have to use the class and Id in HTML page. Using classes and ids:Each HTML tag supports class, id, and style attributes. You can use all three at once if you desire. The purpose of class and id is to provide a reference point for similar elements from your embedded or external style sheet. If you want to change any paragraph/words in different style then you should make the code in the embedded or external style sheet like this. .redtext { Write it in embedded or external style sheet. And where you want to change the font style please write there class=” redtext” If you want to use it for a paragraph then write <p class=” redtext”> paragraph content</p>. Or else you can use it for a single/multiple words like this: Then this style will look like this (if it is a paragraph): Page content text Page content text Page content text Page content text Page content text Page content text Page content text Page content text Page content text Or Page content text Order now Page content text. (span style) An 'id' is used to refer a style that is only used ONCE on a page. You use a hash mark to declare an id like this: For Using ID you have to write like this way: #redtext { Note: Write it in embedded or external style sheet. And where you want to change the font style please write there id=” redtext” If you can use it for a paragraph then write <p id =” redtext”> paragraph content</p>. Or else you can use it for a single/multiple words like this: Benefits of CSS Web LayoutCSS was not so popular until recently because of its limited browser support. However, with the advent of CSS 2.0, it is now compatible with 99% browsers. Here are some other benefits of using CSS for web layout:
Smaller page sizeWeb pages using CSS layout have much smaller size than regular pages. Smaller file size means reduced bandwidth costs, which mean enormous savings for high traffic sites. The main reason behind the small size is – information is placed in the external CSS document. This is called up when the home page loads up and then stored on to the user’s computer. CSS can also be used to replace JavaScript image rollover, which results a large reduction in overall page size. Higher search engine rankingCSS web layouts are more search engine friendly, as the pages contain simpler and better-structured HTML code, which is easily accessible to search engines. Important content can be placed at the top of the HTML page and there is a greater density of content than code. So the page is well read by search engines and the possibility of higher search engine ranking increases. Printer friendly pageCSS page layout is printer friendly too. When a user chooses to print a web page, an alternative CSS document can be called up. This document can specify the formatting, images and navigation to disappear and just the page content to appear on the printed version. CSS files are termed “cascading” because of two reasons – one style sheet can cascade, or have influence over multiple pages. Therefore, whenever you like editing, instead of modifying all the web pages, you can change your layout by simply editing one single CSS document. CSS is a breakthrough in web design, for you can control the style and layout of multiple pages at a same time. Just define a style for each HTML element and apply it to web pages as many as you want – multiple styles will cascade into one.
Note: All Content Copyright © Website Source, Inc.
 |
|
   Website hosting customer feedback
Your support team and support program is WONDERFUL! After dealing with error prone, lousy tech support companies like ****.com, your tech support system and techs (Adam and Brodie just to mention a couple of really good guys!) are several steps up. your techs are professional, courteous, and very helpful. As a consultant to small companies, I am always looking for solutions to my clients' problems. Since your tech support is far superior to most of the companies I deal with, I will be recommending your company to my clients for their e-commerce solutions. Robert |
||||||||||
back to top
|
