How can using CSS help make a web site better or easier?
Asked by
Dog (
25152)
July 22nd, 2009
Never having delved into cascading style sheets I am wondering how they help or do not help make a web site better.
What are the benefits?
Observing members:
0
Composing members:
0
7 Answers
One way they help is by putting all of your formatting, styles, colors, etc in one easily changeable file. You can, for example.. have one file that tells your whole website how to look.. Need a new look for your website? You need only change this one file and viola.. your whole site looks different. Colors of links, text, how big fonts are, what fonts to use, what color to make the background… all sorts of things can be controlled by this one simple cascading style sheet.
See this introduction for more info about it.
CSS is much much much faster than using tables. Its more update with web standards. Using it along site with jquery can make amazing sites.
Its simply the new thing, I have a galleria (literally?) of sites that use CSS to the fullest and are pretty much run by it, i also have tons of cheatsheets for CSS and tutorials, comment if you want :)
It’s what the cool kids do nowadays.
It’s also an important discinction—you have html which is the content of your site—and your CSS determines the style of the site. Why is this important?
Because say you wan tot do a mobile version of your site, or a print version—you just change your CSS file.
CSS helps make websites easier because it helps separate the style from the content. When the CSS is contained in a .css file, you can access the individual stylesheet with many individual HTML pages, thus if you need to change a certain element’s color you only need to change the one CSS file versus each HTML file where the element is called.
This ultimately makes your website smaller in bandwidth consumption – the client downloads the CSS file once then uses it for all the HTML file downloads, versus having to download each HTML page with the style embedded. Does this really matter anymore with our speeds? Not really, but it’s good to know.
CSS can be tricky to master because various browsers (IE) interpret things a bit differently, but there are ways around it and many many tutorials available to help you remedy problems.
The only real alternative to CSS is old-school table-based HTML design. This still has advantages in certain cases, such as HTML emails and cases where you know exactly what resolution the user is using (such as the iPhone). But everything it can do, CSS can do better. As a professional web designer, I do not use table-based HTML design anymore.
It does cool stuff like this
But doesn’t have too much support for old versions of Internet explorer which is used by many people.
I’ll put it simply. It makes your HTML look cleaner. I code HTML and my friend does CSS so I can’t tell you much about it but that is what I have seen it do.
Being able to control your styles centrally is a good selling point for CSS, but the real crux of why CSS is such an important move for the industry is that it allows us to keep styles and content completely separated. Using CSS, you can make the visual appearance of a site behave exactly as you want (in theory, anyway), without putting any thought into the markup of the document beyond making sure that all elements are used in a semantic, meaningul manner.
In the past, your decision in choosing which HTML tag to use to mark up a page heading may have been influenced by how that tag is displayed in your browser. For example, if you didn’t like the look of the H1-H6 heading elements, you might be pressured into the simpler route of wrapping some text in a FONT tag and upping the font size to make the text look like a heading. That’s fine for visual browsers, but others, like Googlebot, don’t understand that big font means heading, and that the bigger the font is, the “bigger” the heading is, i.e., higher level. With CSS, if you don’t like how an element looks, you can change it, and all elements, in theory, behave the same.
While any visual user will see big text and understand that the text is a heading, the fact that you wrapped it in a FONT tag gives it absoutely no logical meaning to screen readers, screen scrapers, crawlers, and anyone who has to read your HTML code. In addition, using HTML in the ways required to influence how the document displays in the browser is a messy art and produces yucky, difficult to maintain code.
Answer this question
This question is in the General Section. Responses must be helpful and on-topic.