December’s General Meetup was lucky enough to have Nile Flores present on Custom Post Types. Here’s Nile’s presentation.
December’s General Meetup was lucky enough to have Nile Flores present on Custom Post Types. Here’s Nile’s presentation.
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.
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.
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.
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;}
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.
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.
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:
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
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)
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:
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:
Additional Resources:
https://developer.mozilla.org/en-US/docs/Web/CSS
—
Photo by Mikel via Flickr – Licensed under Creative Commons