CSS Classes, CSS Tutorial
CSS Classes, CSS Tutorial
|
|
Learn Cascading Style Sheets to devlop your skills and optimize your web site with w3c … Grouping elements with class in CSS …
Similar Posts
CSS Positioning Elements, CSS Tutorial
Learn Cascading Style Sheets to devlop your skills and optimize your web site with w3c … CSS Tutorial will guide us now CSS Positioning Elements, we can …CSS Text, CSS Tutorial
Learn Cascading Style Sheets to devlop your skills and optimize your … property makes it is possible to add different decorations … CSS Text …CSS Color & Background, CSS Tutorial
Learn Cascading Style Sheets to devlop your skills and optimize your web site with w3c … CSS background color property is as under. Syntax: background-color: …Quick CSS
… day course to learn Cascading Style Sheets (CSS) to improve your Web pages … In this free class, you will learn how to add CSS styles to your HTML, your Web …Cascading Style Sheets (CSS) Interview with MicroAssist CSS Class …
Interview on Cascading Style Sheets (CSS) with MicroAssist Austin CSS Class Instructor, Scott Allen … your students learn from your Introduction to CSS Class? …CSS Positioning Elements, CSS Tutorial
… your skills and optimize your web site with w3c standers using CSS, it is well organized and easy to understand the basics of … CSS Absolute Positioning …CSS Text, CSS Tutorial
… skills and optimize your web site with w3c standers using CSS, it is well organized and easy to understand the basics of … text, have a line through or above …CSS Class – Online
Learn the basics of separating style from structure within an HTML document. … Class Name. Introduction to Cascading Style Sheets …Experimental Css design: tutorial – pseudo selectors
… do with Css (Cascading Style Sheets). This is my quest to learn new and exciting ways to use CSS, i’ve taken … The state of that anchor is the pseudo-class. …5 Ways To Optimize Your CSS
Recently I have been working on a social networking site that was experiencing downtime due to the amount of stress its users were putting on the server. I spent a good amount of time looking for ways to improve the speed of the site, and one of this was through CSS optimization.
Structure your CSS and HTML elegantly
“CSS” Stands for Cascading Style Sheets. Notice the first word, “Cascading”? The power of this language is readily available, and it is up to you, the designer, to maximize its use. It is an interesting concept that is not too difficult to grasp. Try to find instances wherein this can be applied.
For example, the code below:
<p class="someClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
Can be rewritten this way:
<div class="someClass">
<p>First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
But what if our code looks like this:
<p class="firstClass">First</p>
<p class="someClass">Second</p>
<p class="someClass">Third</p>
<p class="someClass">Forth</p>
<p class="someClass">Fifth</p>
We can take advantage of CSS by rewriting HTML this way:
<div class="someClass">
<p class="firstClass">First</p>
<p>Second</p>
<p>Third</p>
<p>Forth</p>
<p>Fifth</p>
</div>
Then, cascade rules defined in “firstClass” to overwrite styling principles in “someClass”.
This is just one simple example, and I hope you understand what I’m trying to get at. Just keep in mind the concept of cascading rules and it won’t be long before things like this become second nature and automatic.
Re-structure your CSS
I am a huge fan of single line CSS style. Not only does it save up space, it is also more readable. The readability bit is debatable, though. Simply put, I find it easier to locate relevant tags if the tag names are all on the same left-hand side and I do not have to scroll so much to find what I need to change. After all, designers are only concerned with CSS selectors, not the rules that are applied to it.
Optimize Your CSS
Some time ago, I wrote an article about improving website performance using CSS optimizers. I still use CSS Optimiser up to this day. For very large CSS files it is a quick and easy way to rewrite things that may otherwise prove too time-consuming to optimize manuallyt.
Use CSS Shorthand Rules
When I was still learning CSS, I found shorthand rules to be quite daunting and confusing at times. But I strived to learn the shorthand syntax for every rule simply because I am lazy and do not want to bother typing the same thing over and over not to mention having to memorize all the rule names.
Compare the example longhand its equivalent shorthand below.
Original longhand:
#someid {
background-attachment: fixed;
background-color: #000000;
background-image: url(images/image.png);
background-repeat: no-repeat;
background-position: left bottom;
}
Shorthand version:
#someid { background: #000 url(images/image.png) no-repeat fixed left bottom; }
The folks over at SitePoint has a good introduction to the art of CSS Shorthand that I can recommend to anyone who’s willing to learn.
Server-side Compression
Server-side compression techniques have long been put to use by large scale applications for two main reasons. First, bandwidth is precious and expensive. Second, it does not require having to modify code for it to work. What it does require, however, is supported server software (or hardware). Hence the term “server-side”.
One such solution can easily be deployed on Apache servers. Once again SitePoint has written an introduction to server-side compression using Apache and mod_gzip.
The drawback to this is increased CPU load. Indeed, server-side compression is a double-edged sword, but usually the pros far outweigh the cons.