I put together some notes from our General Meetup last month. Thanks for everyone who braved the cold and came out. I had a blast putting this together and am looking forward to Nile’s presentation later in December.
Box Model
First, let’s talk about the Box Model. The best way to approach CSS is to understand that all it does is apply rules to the boxes that make up our webpages.
All HTML elements are containers or boxes. I demonstrated this by using the 3D view in Firefox. (Right-click on any webpage, and select “Inspect element”. The 3D view is the cube icon in the top right of the inspector pane.
CSS, or Cascading Style Sheets, allow you to define the style of those boxes. Everything from the fonts being used inside, to images, borders, padding, margins, colors, even how text behaves alignment, size, orientation, etc.
Rules
You make these changes this by defining ‘rules’ to those boxes or elements in your CSS.
So let’s say we have an element. It’s a simple div and I want to give it some rules.
<div>
<p>Some text inside that’s a paragraph.</p>
</div>
First give element a name – either an ID or a class.
That element name is called a selector in CSS parlance. We’re saying, for each element named X select
<div class=''demoDiv">
<p>Some text inside that’s a paragraph.</p>
</div>
I can apply rules to that selector in a few different ways.
Three ways to define CSS (There are more, say with JS)
Here they are from worse to best
Inline
<div class=''demoDiv" style="background-color:green;">
In the <head>
In a separate file (also referenced in the head)
<link rel="stylesheet" media="all" href="demoStyle.css">
Why is this the best? You separate the presentation from structure (HTML) from content (in the case of WordPress, what’s in your database). You also can have both documents open side by side. You also don’t have to scroll up and down and up and down. And most importantly, because of CASCADING!
Here’s two examples of valid CSS rules being applied to a class and an ID respectfully.
.demoDiv {
rule:options;
rule:options;
}
#demoDiv {rule:options;rule:options;}
Difference between a class and an ID
See that “.” and that “#” – that tells us if something is either a class or an ID.
Does it make sense to identify multiple elements by the same ID? I think not. That’s what classes are for – to classify similar elements.
Cascading
The name Cascading is important! It’s how the browser determine which rules to actually apply. There are many factors at play, and that’s ok. There’s some logic to it al.
We’re going to talk about specificity and inheritance
At this point I’m going to let someone far smarter than I explain it. Check out this article on Smashing Magazine.
The order you put your elements and their styles in your style.css don’t matter.
However it’s best practice to do high-level or ‘global’ settings at the top of your sheet, and put comments in as you go for the various sections.
At the top have global attributes like body, p, a, h3, etc.
Then sections:
- header
- navigation
- sidebar
- etc.
Order does matter in your rules!
One thing that does matter is the last rule of a type will over ride the previous.
Example:
background-color: #000;
background: #FFF url(image.jpg) 0 0 no-repeat;
The color (should the image fail to load) will be white because it came last in this set of rules
Ok, what about WordPress!?
Let’s take a look at a CSS file from a theme like Twenty Fourteen
First, inspect and find an element in the stylesheet (using Chrome dev tools)
Child Themes
Even if you want to do nothing but tweak a few styles to an existing theme, USE A CHILD THEME. It’s easy.
If you assume you’re using Twenty Fourteen:
- Make a folder in your wp-content/themes/ directory. Give it a unique name.
- Create a file called “style.css”
- Edit header info to reference the parent theme.
- Activate your child theme.
- Edit CSS in that child theme’s style.css file to change (overwrite) the parent theme’s rules.
CSS Preprocessors
CSS Preprocessors were touched on at the very end of the night. Basically things like SASS and LESS allow you to define variables to your rules. When you’re ready to publish the preprocessor will render valid CSS from those variables.
Example:
@col-red: #f00;
@col-blue: #00f;
@font-family: Arial, sans-serif;
@font-s: 12px;
@font-m: 14px;@font-l: 16px;
h1 {color: @col-blue;
font: @font-l @font-family;}
.blockQuotes {color: @col-blue;
font: @font-m @font-family;
}
Preprocessors also allow for math functions to compute sizes across your entire stylesheet.
@base-size: 10px;
.small {
font-size: @base-size;
}
.medium {
font-size: @base-size * 1.2;
}
.large {
@_large: @base-size * 1.5;
font-size: @_large;
line-height: @_large + 4;
}
A few good reference articles:
- http://alistapart.com/article/why-sass
- http://blog.millermedeiros.com/the-problem-with-css-pre-processors/
- http://blog.blakesimpson.co.uk/read/37-less-sass-the-advantages-of-css-preprocessing-explained
Additional Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS
—
Photo by Mikel via Flickr – Licensed under Creative Commons
