AreWeConnected.com

Custom WordPress Websites that Rock!

Question of the Week: What the heck is CSS?

Wordpress ·

So I’m working on a website for a client that will be a single page website.
They are kind of popular these days. We identified the need for having 22 distinct areas on the home page (on a single page website there is ONLY the home page).

Pam, Kappy and Maxine have questionsTo create these areas I went into the .php files for the theme and modified them, (four of them).  That created the areas, next I needed to ‘style’ the content that goes into those areas.  That styling all happens in what is called a Cascading Style Sheet – or CSS.

My friends, Pam, Kappy and Maxine all asked, “What the heck is CSS?”.  And that’s how the topic for this weeks post came about. 🙂

CSS stands for Cascading Style Sheet. It’s a file that has a set of rules that basically dictate what happens on the site in terms of ‘style’, simple as that.  Most every website today is made up of a combination of code (in WP that’s .php) some scripts, some html, and CSS to make it all look pretty.  Usually there’s more than one style sheet. Each plugin has it’s own separate style sheet too. They all work in conjunction together.

People always ask about the the cascading part.  The browser starts at the top of the file and works it’s way down. While a particular rule might say, “make the font red” at the top, there might be a rule that says, “make the font blue” below that. The last rule (latest) is the one that wins. That’s the cascading part.

What can you do with CSS?

Like I mentioned you can style fonts.  Styling a particular font might look like something like this:

.site-description {
color: #ffffff;
font-size: 16px;
font-weight: 400;
letter-spacing: 2px;
line-height: 1;
margin: 10px 0 0;
text-transform: uppercase;
}

That’s just a snippet of a section that ‘styles’ the site description of a website.  CSS also styles images and creates buffers and padding around things via what is called “the Box Model“.

the css box model
the css box model

CSS uses terms like ‘element, id, and class”. It has specific rules and shorthand, but once you know and understand them, it’s relatively easy to do.

PRO TIP: If you are going to mess with CSS, don’t mess with your theme’s original style sheet. If and when your theme pushes out an update your modifications will be wiped out.  Instead, use something that virtually ‘adds on’ to the end of your stylesheet. Remember, with competing rules, it’s the last rule is the one that wins.  Jetpack has a fabulous module that does that. There are also plugins in the depository that will do the same thing.

Hopefully, that answers your question Maxine, Kappy and Pam (and everyone else who was wondering)

If you have a question, on any topic, just ask. I’m listening!

Mike Mueller
Connected?

Mike Mueller

A former professional hand model, Mike now builds Custom WordPress Blogs that rock!

He's an avid hockey fan, rides a mountain bike, a few motorcycles (he had a really fast one,bought a cool orange one, and still rides a really slow one), he loves strong beer and good red wine.
Mike Mueller
Connected?

Latest posts by Mike Mueller (see all)