Cascading Style Sheets

What are Stylesheets?

When you design with HTML you will noticed that you will be retyping the same old tags again and again on the same page, leading to bigger HTML files.

CSS came about to have one file that defines all the values that those piles of tags would have done, and then have all your pages check this file and formatting your pages accordingly.
You can therefore leave out most of the formatting tags in HTML and use only nice structural elements (like headings, paragraphs and link) - separating structure and presentation.

In late 1996 CSS (Cascading Style Sheets) became a reality, forged by the World Wide Web Consortium (W3C). Your stylesheet acts as a partner to your HTML code, taking care of the entire layout, fonts, colors and overall look of your site.

If you ever decide to change the look of your site, you can modify that one CSS file and all the HTML pages reading from that file will display differently. This makes maintenance of your design much easier.

Benefits of CSS

• Far more efficient than defining everything in HTML on every page.
• Pages download faster, sometimes by as much as 50%.
• You have to type less code, and the pages are shorter and neater.
• The look of the site is kept consistent throughout all the pages that work off the same stylesheet.
• Updating your design and general site maintenance are made much easier, and errors caused by editing multiple HTML pages occur far less often.

Well-authored CSS also improves the accessibility of web content, allowing access through myriad devices (handheld PDAs for example) and ensuring that web users with disabilities are still able to receive it. It also eliminates the need for browser-specific hacks and tags, which means your site has a better chance of working across all major browsers.

Implementation

CSS files are termed "cascading" stylesheets because of two reasons: one stylesheet can cascade, or have influence over, multiple pages.
Similarly, many CSS files can define a single page.
There are 3 ways to implement css commands into your site:

• Use one CSS file for all your pages. This is the best way to do it.
• Integrate CSS commands into the head of each of your documents.
• Use the style attribute to put CSS code directly into a HTML element.

CSS allows you to use all three of these methods in glorious tandem, inheriting and overriding values as you go.

Below is an example of an external CSS file:

The CSS:

body

{

margin:0;
padding:0;
line-height: 1.5em;

}

b

{

font-size: 110%;

}

.contentText

{

border:1px solid #C2C2C2;
padding-left:1em;
padding-right:1em;
font-family: Arial, sans-serif;
font-size: 11px;
color: #666;
line-height: 1.3em;

}

Fixed layout

Many Web builders prefer using fixed-width page layouts for page design because they produce precise and predictable results. This approach closely mimics print layout, which is a significant comfort factor for designers and visitors alike; it's also the best way to handle content that includes lots of large images and other elements that don't flow well in a liquid layout.

Liquid or Fluid layout

A liquid layout will move in and out when you resize your browser window. Requires a lot of work, time and patience in order to make it compatible with older browsers and grasp all the details that make a liquid css layout perfect.

Style sheet layouts are based on the concept of absolute positioning. That means that every element is perceived as a unique entity that can be placed wherever on the page in relation to its edges.

As users, we often see the monitor screen as a square box which displays information, images etc. We perceive it as a fixed medium, at standard resolution, which never changes. For web designers the monitor screen does not have fixed width or height because these variables change, at times in unpredictable ways. People might have larger buttons, toolbars such as Yahoo or Google, they open the Favorites page on the left, and they have a double task bar and so on. Therefore the width and height of the screen is different from user to user. Liquid design means that the web site adapts itself to the available space, the same way water takes the shape of the glass it is in.

Below is an example of a CSS Fixed-Fluid-Fixed Layout: (This can also be a Fixed-Fixed-Fixed Layout)

 

 

 

 

Advantages of CSS liquid design over other types of layouts

• Decreases the HTML/body text ratio
• Is completely flexible
• Works well on modern browsers and on some older browsers. Proves to be usable on text-only browsers.
• Looks as good if not better than table layouts once it's ready. The misconception that css layouts aren't as visually appealing as standard layouts has no argumentative base.

Call today to discuss a Web Solution for your business at 214-331-1038 or, email us now!

[Top]