This is the first session of a series I'll be delivering to my design team, crafted to introduce CSS in an approachable way. I'm by no means an expert on the subject, just passing along what knowledge I do have for the overall betterment of my team. My hope is to peak designer's interest and basic understanding of CSS, motivating all to learn more robustly on their own.
I do not intend to explain each CSS property in detail, as there are countless great references out there for just that purpose. These sessions will cover CSS from the very basics of what it is and why it was initially created, through to using grid systems, advanced selectors and responsive web design practices. Let's get started!
Why Should Designers Understand Code?
Working directly with code outside of a simulated Photoshop environment will strengthen your understanding of web design. Similar to an architect benefiting from understanding the properties of the materials used to construct their buildings; designers should understand the underlying building blocks of their creations.
Coding your own designs can inspire more interactivity in your work. You will begin to think about how the website functions and you will be interacting with it in the browser, not just looking at a static representation of the site.
Having a strong, working knowledge of both HTML & CSS will begin to speed up your design process. Building up our designs in the browser environment inspires quicker iterations and design decisions.
Lastly, as you develop your skills you’ll have a new powerful communication tool to reference when working with developers. For example; instead of suggesting, "Can you move the button to the left a bit?." Communicate more effectively by inspecting their code in-browser, then asking "Can you increase the left padding on the .button div by 0.250ems?".
Getting Started with CSS
Cascading Style Sheets (CSS) is a language used to describe the visual look of a web page. While HTML is the structure of a page’s content, CSS is the presentational code that tells web browsers how the HTML should be rendered visually. These two languages have very different and specific syntax. They become associated by writing CSS rules that reference HTML elements or defined classes and ids.
CSS was developed to help designers separate code used solely for the presentation of content from the content and markup of a website. It allows us to declare a rule once and use it on multiple pages or multiple times on the same page without having to re-declare the rule every time you use it.
CSS Syntax
A CSS rule has two main ingredients: a selector, and one or more declarations. Selectors can be HTML elements, classes/ids or a combination of the two.
Writing Readable CSS
Remember this may be a computer language, but you & your team will be the ones working with it; so be diligent with the organization of your code! The community as a whole and anyone who takes over your projects/works with your code will thank you for it. To make CSS more legible to the human eye, you can add white space and/or line breaks. For example:
p {
color: blue;
margin-bottom: 1.000em;
padding: 0.625em;
}
is easier to read at a glance than:
p {color:blue;margin-bottom:1em;padding:0.625em;}
Comments can also be a powerful organizational tool in your CSS. Comments are ignored by browsers and invisible to the average visitor on your website. Someone viewing your source code an see CSS comments, unless you use a minifier tool that will strip these out of your production code. Many people use comments to organize sections of their style sheets. To write a comment, use the following code:
/* organize or annotate your code with comments */
Adding CSS to a Webpage
- External Style Sheet (best practice)
This is the preferred method for linking CSS files to an HTML document (or many documents). Multiple pages can reference this one file containing all of your styles. Link to file in the head of document like so:
<link href="style.css"> - Internal Style Sheet
This method is primarily used when a single webpage has unique styles from the rest of a website. It's also commonly seen on smaller one page websites. Write your CSS right in the <head> of a webpage using a <style> tag:
<head><style>
p {color:#999999;}
</style></head> - Inline Styles
This method mixes structure with presentation (Boo! Hiss!). I recommend that you use this sparingly or not at all.
<p style="color:#999999;">This is a paragraph.</p>
The Cascade & Inheritance
To put it generally; the cascade in CSS refers to how styles literally compound and cascade upon one another. The most recently read style will be obeyed by the browser, meaning styles can and will override one another according to their specificity in your style sheets. The cascade order obeyed by browsers begins with browser defaults. Next are external style sheets, internal style sheets and finally inline styles. It can get very technical here as each level is assigned a certain value by the browser; 1, 10, 100, or 1000. These points determine the weight at each of these levels of each style.
Inheritance is a way of propagating property values from parent elements to their children. Some CSS properties are inherited by the children of elements by default. This allows for many redundant styles in your code to be eliminated, as styles are inherited; unless specifically overridden.
Basic Selectors, ID & Class
In addition to targeting HTML elements, you can create your own selectors.
The ID selector (#) is used when you’re trying to target a single, unique element. You may only apply an ID to one element per page. IDs are commonly used to create anchor links within a page, though the second type of selector, class, is far more important and prevalent in the language.
The Class selector (.) is by far the most common selector used in CSS due to it's versatility. With it, you can target multiple elements on a page.
Note: selectors cannot begin with a number!
User Agent Style Sheets
Each web browser has a set of default styles that are applied to a web page’s HTML elements; unless you override them with specific CSS. There are an increasing number and variety of browsers, each with their own default styles. There are two ways to approach this problem, a CSS reset or normalize.css.
A traditional CSS reset will neutralize all defaults, effectively "zeroing out" all browser imposed styles. This has been the preferred method for a good part of CSS's history. A popular and powerful reset is the Eric Myer's CSS Reset.
Normalize.css is a more modern method to remedy the varied browser default styles. Instead of eliminating defaults, like a reset, normalize seeks to make all styling consistent. It is HTML5 ready and preserves some useful default styling in your markup. In addition, it fixes some common browser bugs, is very well documented and is written in a modular way.
That's all we had time for in my first two hour session. During the next session I'll finish up with the basics of CSS, then push forward into more advanced concepts such as layout, positioning, advanced selectors and much more. Cheers!