March 23, 2009

Two basic CSS Mistakes – CSS

Filed under: Blog Articles — Tags: — Deb Foley @ 11:14 pm

Between Newbies posting here lately and spammers claiming to work for big companies but with absolutely shoddy code, it came to me the most common problems with people using CSS. Right off let me say that for newbies this should not be embarrassing, I suffered this problem as well when I started.

Beginners basically beginners are hesitant to use CSS, so they commonly try to work with it bit by bit. Wrong approach – just do it. This is usually seen when someone uses CSS just to effect fonts. Another form is tables with CSS. Yes you can do so but it defeats the purpose. Take this to heart, don’t go half way, just jump in.

Thinking it is HTML: Forget what you learned about HTML, this in not HTML it is CSS, another language. All to often you see beginners writing CSS like it is HTML. Just replacing the Font tag with a class name on every paragraph or such.

The idea is to use external style sheets. Every page is linked to this sheet, make a change to this sheet and every page reflects the change. By using styles inside of the  tags, you add wasted code and have to make changes on every element on every page. If you merely define the paragraph tag than every paragraph will have that style, no need to ever ad class or ID’s

Do not mix, it just makes things confusing for everyone. I see many spammers with HTML attributes, inline styles in tags next to these with Block styles in the header and even a link to an external style sheet. These are god awful monsters to control. I am Webmaster of a site that is like that, the simplest changes will almost always break the site. Beware and avoid such sites and those who build them.

If you have any CSS, put it all in external style sheets and most any HTML attributes can and should be done in the CSS as well. Remember this is not HTML you are dealing with, do not just replace HTML attributes with styles in the code. If you are going to use CSS it will only bring and advantage if you learn to write CSS as CSS and not as a HTML attribute replacement.

Classes: Beginners always write classes, then you will see a dozen paragraphs with identical class names. Again this is due to this HTML style of writing we learned first and how we had to write fonts into everything. CSS is not that way.

With CSS you can and should use ID’s. Why? Well ID’s for CSS can also be used as reference points for scripts and internal links, you need not name extra elements. Also for instance you name the upper element with an ID  <div id=?content?>, everything in that ID can be defined specifically using that ID. So rather than 5 paragraphs with 5 classes, you need put define what a paragraph within an ID should look like. #content p { } will define any paragraph in a DIV named ?content? to have a specific style, any other paragraph in another section will not use that style as it is not in that ID.


March 21, 2009


Filed under: Blog Articles — Tags: , — Deb Foley @ 6:39 pm

Cascading Style Sheets (CSS) is a style-sheet language used to describe the presentation of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is employed by web page developers to define colors, fonts, layout and other aspects of document presentation. It is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation (written in CSS). This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, and reduce complexity and repetition in the structural content (such as by allowing for tableless web design). CSS can also allow the same markup page to be presented in different styles for different rendering methods, such as on-screen, in print, by voice (when read out by a speech-based browser or screen reader) and on Braille-based, tactile devices. CSS specifies a priority scheme to determine which style rules apply if more than one rule matches against a particular element. In this so-called cascade, priorities or weights are calculated and assigned to rules, so that the results are predictable.

The CSS code specifications are maintained by the World Wide Web Consortium ( W3C).

Top of Page

© | | SoCal Custom Website Design | Website Marketing | SEO