As with my last article 7 Things You Must Know Before Building a Website, I decided to tap into the knowledge of my colleague John Overall, who is a WordPress designer and CSS expert.
According to John here’s what you need to know:
1. “CSS is a relatively straightforward language for the most part but it has a hierarchy that needs special attention.”
“When a page is built, CSS is applied to every element that is displayed. You can apply multiple CSS calls to the same element and that happens across many pages. As an example, there is a default element for, say, the basic font size, such as headlines, but those can be altered by CSS on a per item basis.”
2. “How CSS is applied is with the CSS that’s closest to the item. To elaborate, let’s say you have a headline with an H2 tag, you could also apply a P (paragraph) tag. And if the paragraph tag is closer to the text, then the paragraph tag will override the H2 tag and make the text smaller.”
Note: A great resource for learning CSS is http://www.w3schools.com/
3. Nathan: “Some time ago I looked at my CSS files with Google resources for a Genesis theme and I received a message that it was an error to have so many CSS files, that they should all be one. Can you comment on that?”
John: “Yes, they’re referring to calling different CSS files. That’s a hard thing to avoid with WordPress because while your theme has a CSS file, plugins might also have their own CSS files. While you could combine the files, you would have access each plugin, find the CSS and then paste it into the master CSS file for your theme, but when someone changes the plugin, they will likely change the CSS and your site won’t reflect the updates. Not only that, it could break your site.”
“What Google was telling you is you shouldn’t call more than one CSS file but that’s impossible to do with designs today unless the site is entirely hand coded. Even the WordPress core has its own CSS files.”
Note: One place where you can get information about your site is with Google PageSpeed Insights. With this tool, you can enter in your URL and you’ll receive information about how well your site is performing and if there are any issues, what they are and what must be done to fix them. One common issue that’s come up with my sites is the need to minify the CSS, which we cover later in this article.
Above is some basic information about minifying your CSS files. In addition, you can read more about minifying CSS, JavaScript and HTML here.
4. “One thing that can be done with CSS files is to minify them. Minify means the removal of all white space, because white space is still an actual character in a file and it causes the file to increase in size. Removing the white space will turn the file into one great big block of text and the file will sometimes load faster.”
“The down side with minifying is it causes some things to break because of the way the file is read. Even worse is if you have to edit a minified file down the road. It can be challenging, whereas a normal CSS file is built in a paragraph format, making it easier to sort and read.”
5. “The hierarchy in CSS is about choosing the right things to apply at the right time and this will vary from theme to theme and how you’re building your sites.”
“In CSS there’s a tag called important. What it can do is force this code to be applied to an item and it doesn’t matter where it falls in the hierarchy. It’s often used too much.”
“Sometimes when you go through a CSS file it’s hard to figure out which item is being applied if someone has built a complex CSS structure. What they will do is create a CSS tag and apply it to that specific item and then label it important. So this is always applied, no matter what happens. The problem with doing that is it can cause other things to break throughout the CSS structure. “
“CSS is a structure that is applied everywhere. While you think you are fixing one item, if you’re not paying attention, three pages later in your site where the item is used again and only there, it will break your site. That’s the biggest problem with CSS – figuring out how it’s applied.”
6. “About Classes and ID’s. ID’s are usually applied to an entire DIV section and classes are usually applied to a specific item. A DIV tag is a container. If you look at a typical website, you’ll see blocks.”
“As an example is your home page – http://NathanSegal.info At the top you have your title and your menus over to the right. That whole gray spot up at the top is the header area. That is a DIV tag, or block or a container and you have CSS applied to those areas.”
“You have CSS applied to several places there. You have CSS applied to Nathan Segal which is your headline and then you have a separate chunk of CSS applied to the menu items. Inside those menu items is another DIV that contains the menu items. The menu is built inside a container built inside a container built inside a container. That’s how CSS works. You build a container and you apply CSS to it. Then you need something inside that container so you build another container and you apply CSS to that. And inside the menu container there are separate containers for each of your menu items.”
7. “To keep track of the sections, everything has to have unique names. In your site, someone has done some customization. All of these names are non-standard (OptimizePress theme). They have their own naming convention, which is good. Each theme provider has their own naming convention for their themes. This creates fewer problems. The problem with building sites is many people used to use generic names.”
