css tutorial

Do you want your customers and/or employees to have a speedy, no-hassle end-user experience when they use your website or server, respectively? Of course you do – because an unsatisfied end-user means lost business – as in the case of a customer – or a really annoyed employee – as in the case of a server.

That’s why Monitis — the 100% Cloud-based, complete, and flexible IT monitoring solution that consolidates back-end monitoring, application monitoring, website monitoring, and cloud monitoring in an all-lin-one, central monitoring service (that was a mouthful) — has put together this collection of tips for optimizing HTML/CSS (Cascading Style Sheets) and images. In order to check the effect of these tips Website administrators can use Monitis’ instant web page load test or use real browser full web page monitoring.

So, here are some ways to speed things up:

Tip #1 – (IMG) Compress Images

(http://www.ampsoft.net/webdesign-l/jpeg-compression.html)

By compressing all images in a website, your portal will load faster and decrease the amount of space used to store that size. Compressing an image involves decreasing the size in bytes for the file without significantly decreasing the quality of the image. Continue reading ‘Thirty Tips to Optimize HTML/CSS/Images for Smooth Web Experience’ »

Overview

Combining external stylesheets into as few files as possible cuts down on RTTs and delays in downloading other resources.

Details

As with external JavaScript, multiple external CSS files incurs additional RTT overhead. If your site contains many CSS files, combining them into fewer output files can reduce latency. We recommend a maximum of 3, but preferably 2, CSS files.

It often makes sense to use many different CSS files during the development cycle, and then bundle those CSS files together as part of your deployment process. See below for recommended ways of partitioning your files. You would also need to update all of your pages to refer to the bundled files as part of the deployment process.

Recommendations

Partition files optimally.

Here are some rules of thumb for combining your CSS files in production:

• Partition the CSS into 2 files each: one CSS file containing the minimal code needed to render the page at startup; and one CSS file containing the code that isn’t needed until the page load has completed.
• Serve CSS of a rarely visited component in its own file. Serve the file only when that component is requested by a user.
• For CSS that shouldn’t be cached, consider inlining it.
• http://css-css.com/avoid-css-import/

Position stylesheets correctly in the document head.

It’s beneficial to position references to external CSS in the correct order with respect to scripts, to enable parallel downloads.

Overview

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.

Details

CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content:

@import url("second.css")

The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

Recommendations

Use the <link> tag instead of CSS @import

Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times:

<link rel="stylesheet" href="first.css">
<link rel="stylesheet" href="second.css">

The Rule: Use this method on a unique element/tag that you want to affect with CSS.

An example can be with a special heading on the page where you want to have a little more padding than you typically do for a heading. Instead of creating a class elsewhere that will only be used on this one occasion, it makes sense to me to just include the CSS inline. I have to stress that inline CSS is something you should rarely if ever use because it can get messy quick.

The Rule: Use this method if you want to override the CSS you have in a linked CSS file or if you only have a one-page web site.

Now that we covered the first method of putting all your CSS code in a separate file and linking to it, the other methods are easy to describe.

CSS stands for (is the acronym for): ‘Cascading Style Sheets.’ I think the words ‘style sheets’ in CSS are self-describing … we know what ‘style’ in style sheets mean. But what is the meaning of ‘cascading’ in CSS?

The heading for this part of the article hints at why you would want to go through the trouble of creating a separate CSS file instead of just typing in the CSS code in the web page itself. Can you guess? Keep trying … times up! Did you get it? I could quote you some nerd centric description that describes the advantage; the problem is that only nerds who already know would understand!

In a nutshell: by keeping the CSS code in its own file, you can link that CSS file to as many web pages as you want. This has two major advantages:

1. You will have much less code in all your HTML pages – makes the pages neater and easier to manage and makes the web pages a little faster on the download. (Although this point is really minor in most cases, and is really over blown in my opinion by some people)
2. It can potentially reduce the amount of work you have to do in a big way. Why you ask? Simple; lets say you have 50 web pages where you’ve set the text to be black and the headline text (text in between the <h3> tags for example) to blue. Then one day you decide you want to change the color of the text. Since the CSS that controls the text color for the 50 pages is in one CSS file, you can easily change the color of your text in all 50 pages by changing one line in the CSS file!

If on the other hand you had decided to include all your font color information in each page, you would have had to change all 50 pages. This would have been even worse if you had been using font tags, or CSS right on each tag, you would have to change the color settings/code on all the <p> and <h3> tags in all 50 pages! I can tell you from experience that that sucks big time!

The rule: If you are going to have more than one web page with the same stylistic properties (that look the same in some way) you should create a separate CSS file and link your web pages to it.

1. With an external file that you link to in your web page:

<link href="myCSSfile.css" rel="stylesheet" type="text/css">

or using the import method:

<style type="text/css" media="all">
   @import "myCSSfile.css";
</style> Continue reading ‘With an external file that you link to in your web page’ »

This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once.

You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements.

You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links.

For more information on CSS, please take a look at our CSS examples and our CSS reference.

Now You Know CSS, What’s Next?

The next step is to learn XHTML and JavaScript.

XHTML

XHTML reformulates HTML 4.01 in XML.

If you want to learn more about XHTML, please visit our XHTML tutorial.

JavaScript

JavaScript can make your web site more dynamic.

A static web site is nice when you just want to show flat content, but a dynamic web site can react to events and allow user interaction.

JavaScript is the most popular scripting language on the internet and it works with all major browsers.

Style HTML Elements With Specific Attributes

It is possible to style HTML elements that have specific attributes, not just class and id.

Note: Internet Explorer 7 (and higher) supports attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower.

Continue reading ‘CSS Attribute Selectors’ »

Image Sprites

An image sprite is a collection of images put into a single image.

A web page with many images can take a long time to load and generates multiple server requests.

Using image sprites will reduce the number of server requests and save bandwidth. Continue reading ‘CSS Image Sprites’ »