Cvramen’s Guide to CSS, Part 1
I have recently been doing a lot of work related to CSS files recently at my Web Designer job at NAVAIR. There seems to be some confusion about what CSS is and what it does. Very few documents exist that explicitly and unambiguously state what CSS does. Doing a few search engine searches, I could not find any documents at all that explain CSS with a level of specificity that is to my satisfaction, so I am stepping forward to post my thoughts on the topic.
A chicken salad sandwich. This is something that CSS could stand for, but has nothing to do with today's topic.
If you want to know how to build a good website with CSS, some common tips and tricks for making pretty websites with CSS, or the history of CSS, that kind of stuff is already covered elsewhere on other sites rather well, so I will not be discussing that.
CSS files are essentially just files with a bunch of code in them (just like an HTML file); simple files that can be altered in any plain text editor. CSS files can be used in conjunction with a few different types of files, but are most commonly used in conjunction with HTML files, therefore that will be the context within which I will talk about them.
What a CSS looks like. Yup, that's about it. Just plain lines of code. No embellishments here. That's all it is.
Allow me to inform you of some misconceptions:
- CSS is not an all-encompassing “look and feel” solution for websites. If a web designer is given the task of editing an already-existing website and making major changes to it, he will most likely need to edit more than just the CSS files. CSS does not change the design elements of a website; it is simply a tool a web designer can use to assist in changing the design elements of a website.
- CSS is not a proprietary software package or content management system.CSS is simply a type of file. There are no limitations on what it can do, other than how the browser interprets the code.
- CSS does not add new elements to a web page’s layout.I cannot emphasize this enough. CSS cannot make things (it also can’t destroy things). It only alters the properties of what’s already there. You can’t make new things; you can only make changes to the things that already exist. The “things” in a web page’s layout are created in the HTML file. After they are created, then their properties can be modified by a CSS file.
- CSS is not mandatory. A website does not have to have CSS files in order to function. Some websites don’t have any CSS files or CSS code of any kind and some utilize other means for controlling the visual appearance of the website.
That’s it for now. I’ll post part 2 tomorrow!
5 Responses to “Cvramen’s Guide to CSS, Part 1”
Comment from negzero
Time July 23, 2010 at 11:41 am
I don’t think you know what your talking about.
1. CSS is not an all-encompassing “look and feel” solution for websites.
– This is completely false. CSS is an all ecompassing solution for look-and-feel. You can change a website entirely with a single css file. For an example of this check out http://www.csszengarden.com/ where people can upload 1 css file to alter the site. Take a look at some of those and see how drastic css can be.
4. CSS is not mandatory.
– CSS is mandatory if you are building a standards compliant site. If you are using deprecated tags in your HTML (i.e. ) then you should stop. These tags are outdated and will be phased out.
You should really be careful how you word/direct these articles, new designers/developers could be sent done the wrong path.
Comment from cvramen
Time July 24, 2010 at 4:20 pm
Thanks, negzero. It’s great to have feedback on my article.
“I don’t think you know what your talking about.”
This is not a good way to disagree with someone. It’s clear we have a disagreement here; insulting people that have different opinions does nothing to get them on your side.
“You can change a website entirely with a single css file.”
You can do a lot of things with a CSS file. As you have demonstrated with the link you provided, you can make a website look radically different simply by altering its CSS file. This we do not disagree with. However, there are some things you can’t do by editing a CSS file.
With CSS Zen Garden, the implication seems to be that a web page can be altered exclusively by changing the CSS file. They’ve posted examples. They say, “The only thing that has changed is the external .css file.” This is clearly not true. Sure, these people are good designers, and they significantly changed the way the page looks, but they had to do more than just edit the CSS files. There are a bunch of .JPGs and .GIFs that were introduced in order to accomplish what they wanted with the new design.
CSS doesn’t make .JPGs and .GIFs.
I would refer to #3 on my list of misconceptions to clarify what I meant when I said “CSS is not an all-encompassing ‘look and feel’ solution for websites.” The CSS file doesn’t make things, it only alters the things that are already there. If my customer asks for me to add a new div (or table cell) to a page, I can’t do that by changing the code in a CSS file. If the customer says to change the size of the h3 text, I can’t really do that with CSS if there’s no h3 text in the page to begin with. I would have to go into HTML (or whatever files are generating the page) and add the new divs or add the new h3 tags.
“CSS is mandatory if you are building a standards compliant site.”
Depends on what kind of standards you’re talking about. If it’s a standard that requires an external CSS file to exist on a server, then I guess so. However, you can write a simple HTML page that’s just a bunch of text and maybe some h1, h2, and table tags that has no styling applied to it all, and it would be standards compliant. Yes, it might be a very boring looking page, but it would be standards compliant. Therefore, your statement is not factually correct.
There are ways to accomplish the same things a CSS file does without having any CSS files stored on the server, especially if you have some knowledge about dynamic web pages, content management systems, and the programming languages used to create them.
I did not advocate using deprecated tags.
“You should really be careful how you word/direct these articles, new designers/developers could be sent done the wrong path.”
Consider them a word of warning to those who are just getting into web design or would like to have someone modify or build a website for them. There’s a lot information about CSS out there, and it would be a shame if people thought that CSS is a magic bullet that solves all their problems or that CSS does things that it, in fact, doesn’t do. I have had experiences in the past involving CSS. On a few occasions, people have asked me to edit CSS files on their site, thinking that CSS can do things that it doesn’t do, but it turned out that the requirements of the project were beyond what could be done with CSS.
From my experience that seems to be how most things in life work: there is no, one, exclusive, universal solution.
Comment from negzero
Time July 26, 2010 at 9:12 am
Images should generally be applied with CSS and not inserted into a page. Again, coding practices should be followed by keeping presentation and business logic separate.
And the site you have described with just header tags and a table, that’s not a real website, that’s just text on a page. Anyone making something like that as a production website should be fired, or just take their site down.
And there aren’t different standards applied to sites, just different levels of validation. Current sites should be striving to meet xhtml 1.0 strict or at least transitional. Your site is set to strict but fails validation:
http://validator.w3.org/check?uri=http%3A%2F%2Fcvramen.com%2F&charset=%28detect+automatically%29&doctype=Inline&group=0
Standards are in place to keep the web as accessible as possible to everyone and therefore are very important in the web world.
And I’m not sure what you mean by CSS not being a magic bullet. As far as site layout and design, CSS can do all. It fulfills every need you should have concerning them. If you are referring to image manipulation, that is not part of coding and therefore is not included.
CSS is the universal solution, I’m not sure why you say it’s not. There is no alternative available anyway (standards compliant alternative anyway). You can use JavaScript to make it do some fancy effects or data manipulation, but that’s not presentation logic so to speak so it doesn’t matter.
Perhaps you could elaborate on your past experiences that you are referring to for any beginners reading and fully understand what you are talking about.
Comment from cvramen
Time July 27, 2010 at 9:23 pm
“And there aren’t different standards applied to sites, just different levels of validation. Current sites should be striving to meet xhtml 1.0 strict or at least transitional. Your site is set to strict but fails validation:”
I was unaware of that lone div tag. Thanks for bringing that to my attention.
We could debate about the importance/validity of some aspects of the test and maybe even really go into some minutia. However, most of the errors the test came up with for my website don’t make a lick of sense and I would chalk up to an error in the system the test uses.
“And there aren’t different standards applied to sites, just different levels of validation.”
There *are* different standards. In addition, which standards one should abide by is a matter of opinion. I’m not sure how you could deny that. I’ll give you the benefit of the doubt and just assume I misunderstand what you’re saying. Ever heard of the internet standards for Section 508?
You can say that being able to play video without a flash plugin is a web standard. Firefox is one of the most commonly-used browsers and well known for being state of the art. Up until very recently, it did not play HTML 5 video. Was Firefox not standards-compliant?
It seems to be that you’re fixated on W3C. Saying that “web standards” always refers to W3C, would be kind of like saying that a person who’s talking about basketball is exclusively referring to the NBA (and that there’s no other context in which he could be talking about basketball).
“And I’m not sure what you mean by CSS not being a magic bullet. As far as site layout and design, CSS can do all.”
I have already demonstrated that CSS *can’t* do it all. CSS can’t add new elements to a page. If you are given the task of changing the layout of an already-existing website, and you need to add a new column, div, hr, etc. CSS isn’t going to do that for you.
If a customer says, “Add a section at the top of the website that has a photograph of one of our products and rotates a new random image every time the page is loaded.” That isn’t going to be written into existence with CSS.
Example: I am currently working on a website. I was told to make a new design that is significantly different from the current design (along with some specific things the new design needed to have). They just threw the CSS files and me and said, “Here, fix it.” (No this is not literally what they said, but you get what I mean). I had to create new backgrounds, graphics, and and completely change the structure of the files with parent/child elements, divs, table cells, etc. I couldn’t just change some CSS code and give the website back to them. They needed something radically different that required me to edit more than just the CSS files.
This guide is for those unfamiliar with CSS who have misconceptions, have no idea what it is, or have been misled by CSS evangelists.
Image manipulation is often a very important part of web design. I wouldn’t downplay how vital it is to the design of millions of websites out there.
“And I’m not sure what you mean by CSS not being a magic bullet. As far as site layout and design, CSS can do all. It fulfills every need you should have concerning them. If you are referring to image manipulation, that is not part of coding and therefore is not included.”
I guess we’ll just have to agree to disagree on that.
Comment from Janaya Bracewell
Time June 15, 2010 at 8:42 am
+1