Back
Next
CSS Good Design
based on the appropriate use of Cascading Style Sheet. Here we will look at what might be considered best practices,
or perhaps, good coding habits to get into with CSS. To begin, we will look at removing
any defaults that a browser may add to our elements and then look at how we can
explicitly set the values we want. If you are new to CSS use, you may want to bring
yourself up to speed by reading a series of tutorials and it is the right way
for you to learn CSS with this easiest CSS Tutorial.
Deploying Cascading Style Sheet For The Greatest Impact in webpage.
The beauty of CSS is the control it gives us. If used correctly we can perform
website wide changes
on thousands of pages in seconds. If used incorrectly, CSS is little better than using font tags.
The difference between getting it right and getting it wrong is huge, it really is. The object of
CSS is to separate design from content. The greater the separation, the easier our life becomes,
as we shall see.
We can use CSS in three ways as under.
Inline CSS use.
Inline CSS use is the least flexible of the three options listed above. When applying
inline
Cascading Style Sheet you are styling your elements right inside the code.
You can see an example of inline styling in CSS Tutorial right below:
Example of Inline CSS use.
<p style="margin: 15px;">Sample Paragraph text</p>
The inline style in above is highlighted bold. Why is this method a poor one? The answer to
that is simple, the style we have applied to that p element is only affecting that p element. This
means that every single time we use a p element we will need to write an inline style to force the
15px margin we want to add to our paragraphs.
This situation is further complicated when we need to make changes to our code
in future. Let's say our client
wants to reduce the margins on his paragraphs from the 15 pixels we have set to 10 pixels. The site
may contain 1000 pages, to complete the client's request we would need to find and change every
single instance of that inline style on every page within the site; a job that could take
many hours.
Embedded CSS use.
Embedded CSS use is somewhat of a halfway house between inline styles and an external style
sheet. An embedded Cascading Style Sheet file keeps our styles out of our html code and moves them
into the head of our document. An example of an embedded style sheet can be seen
in below
Example of Embedded CSS use.
<style type="text/css">
p {
margin: 15px;
}
</style>
An embedded style sheet is contained in an opening and closing style tags pair, and it exists
in the head of webpage. The problem here is that it exists in the head of every page. If we
revisit client's required change of reducing the margin on our p element from 15 pixels to
10 pixels, we do have a slight improvement. We would now only need to change the setting once in
each page, from within our embedded style sheet. This is much better than changing many inline style
instances in every page. Better, but still not so great.
External CSS use.
An external CSS use of file is the way to go where we want. An external Cascading Style Sheet file is exactly what it says;
it resides outside the (x)html document. From there it is linked to from within the
<head> of the document in web page, and the link implements those external styles onto the page.
Each page in our web site might carry the same link to the same style sheet, allowing
each element within our pages to adopt its styles from a single CSS file. This is a
major advantage to us, because it means that we only need to change any given selector
in a single location - our external style sheet - and the changes we make to that selector
will propagate throughout all our pages, so long as those pages are linked to the external style sheet.
Example of External CSS use.
<link href="/ourexternal.css" rel="stylesheet" type="text/css" />
The selectors within our external style sheet would be written in exactly the
same way as they would be in our embedded style sheet, the only difference being
that we don't need to include the surrounding style tags in our external CSS
file, as you can see below:
An external style sheet is without a doubt the way to go where we want, and
our aim should always
be to keep your selectors within external style sheet. That is not to say that
inline or embedded style sheets do not
have their uses, they do, but those instances are the exception rather than the norm.
Back
Next
| 
Home 