CSS or Cascading Style Sheets makes life easy. There are two parts, the rules and the cascade. The rules give form to the content. The cascade connects the rules to targeted HTML elements. All the rules for the website are located in one external style sheet making it easy to change the site as a whole.
It’s possible to avoid the cascade by writing all the CSS rules inline. That would be painful. It becomes even more painful if the site is to be revised. Unlike Print, websites are in a continual state of revision. It is possible to embed styles in the head of an HTML document. This is great for writing style definitions once and applying them many times throughout the page. If there are more pages, however, it’s better to separate the styles out of the document into an external style sheet. A link to that stylesheet in the head of the HTML page keeps it in synch with the external style sheet.
Imagine updating your whole site by changing only one rule. That is the power of CSS!
The Bright Side
- Using a single stylesheet is a boon for consistency.
- A reduction in repetition and file size.
- By separating form from content, the content can be repurposed to work on watches, phones, tablets and computer screens. This is called responsive web design.
- Build fantastically complex web pages with relative ease.
- Ease of revisions to the layout.
- CSS allows for better Search Engine Optimization. You can put the most important information first no matter where it ends up being on the page. Content remains readable compared to using tables for layout purposes.
The Darker Side
- The cascade can become confusing as the number of style definitions grow.
- Leave out one character and the whole thing can break down. More usually, only the declaration breaks down but watch out for errors by validating often.
Quick Peek
The browser allows you to apply any inline CSS style to any object just for the page you are looking at. Open up the inspector in Chrome — right-click on the object you wish to investigate and select inspect. Once the new window opens up, navigate to the top of the left sidebar and right below the Filter box you will see: a javascript function that will insert whatever inline CSS style you want on the selected element.
element.style {
}
Here you can add any style to the selected element. This style will disappear as soon as the page is refreshed but it allows you to see what a style would look like. The left column, when looking at elements, provides a detailed description of all the css used to paint this object. You will be exploring this feature the more time you spend coding. The same feature is available in Safari and Firefox.
CSS is Awesome
CSS is hard because its properties interact, often in unexpected ways. Because when you set one of them, you’re never just setting that one thing. That one thing combines and bounces off of and contradicts with a dozen other things, including default things that you never actually set yourself.
One rule of thumb for mitigating this is, never be more explicit than you need to be. Web pages are responsive by default. Writing good CSS means leveraging that fact instead of overriding it. Use percentages or viewport units instead of a media query if possible. Use min-width instead of width where you can. Think in terms of rules, in terms of what you really mean to say, instead of just adding properties until things look right. Try to get a feel for how the browser resolves layout and sizing, and make your changes and additions on top of that judiciously. Work with CSS, instead of against it.
Another rule of thumb is to let either width or height be determined by content. In this case, that wasn’t enough, but in most cases, it will be. Give things an avenue for expansion. When you’re setting rules for how your elements get sized, especially if those elements will contain text content, think through the edge cases. “What if this content was pared down to a single character? What if this content expanded to be three paragraphs? It might not look great, but would my layout be totally broken?”
CSS is weird. It’s unlike any other code, and that makes a lot of programmers uncomfortable. But used wisely it can, in fact, be awesome.