• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

AreWeConnected.com

Custom WordPress Websites that Rock!

  • Home
  • About
    • Hire a Tech Dude!
    • Recommendations
    • Add your testimonial
  • WordPress
    • Custom WordPress Website Build
    • The Managed EVERYTHING Website!
    • Making your site “SECURE”
  • FAQ
    • Making Your Site SECURE
  • BLOG
    • Posts about WordPress
    • Guest Post and Comment Policy
  • Contact

Question of the Week: What the heck is CSS?

Wordpress · June 18, 2015

108
SHARES
FacebookTwitterSubscribe

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!

  • Author
  • Recent Posts
Mike Mueller
Connected?
Mike Mueller
VP of Happiness at AreWeConnected.com
A former professional hand model, Mike builds Custom WordPress Websites that rock!


He's an avid hockey fan, rides a mountain bike, sometimes rides a road bike, has a few motorcycles (he had a really fast one, bought a cool orange one, rode a really slow one, and now,a perfect "BDR Weapon"). If that isn't enough, he makes cheese and sourdough bread, loves strong beer and good red wine, and poorly plays the Mandolin.
Mike Mueller
Connected?
Latest posts by Mike Mueller (see all)
  • The Ultimate Guide to Writing the Perfect Blog Post - March 14, 2023
  • 8 Questions Your Web Developer Should Have Asked - April 27, 2021
  • Slack, Chat or Discord? - April 6, 2021
108
SHARES
FacebookTwitterSubscribe
New Comment Policy:
If you see something, say something!
(shamelessly borrowed from Homeland Security but really, let's bring commenting on posts back!)

Filed Under: Wordpress

Previous Post: « LastPass hacked. How secure is your password?
Next Post: Mise en place »

Primary Sidebar

Who runs this Pop Stand?

Mike Mueller
Mike@AreWeConnected.com
PH: (925) 456-4567

Connect

  • Facebook
  • Flickr
  • Instagram
  • LinkedIn
  • RSS
  • Tumblr
  • Twitter
  • YouTube

Look, it’s Just a Newsletter!

  • While I might write a bunch, the newsletter is set to go out only on Wednesdays. That's it!  Just one day a week! Can you handle that?
  • This field is for validation purposes and should be left unchanged.

FREE Downloads

Icon
1843Small Biz Websites Built so far…

Let's Build Yours!

Expert Google Workspace help

Get Started and then hire the right help!

Lighten up!

Search: (anything)

Sign In / Up

  • Account
  • Website Management Subscription
  • The Managed EVERYTHING Website!

Who to host with?

It's the #1 question I'm asked - where to find inexpensive shared hosting. Here's who I recommend.
Data Servers are a HUGE drain on the power grid. Here's a host that sources 300% of it's power from Wind and Solar! On top of that, their service ROCKS!
Check out GreenGeeks

Need more power?

WPEngine has it!

Hacked?

Sucuri Security
Creative Commons License
This site was built, is hosted, and backed up, and maintained by Mike Mueller. AreWeConnected is about the open sharing of ideas without a hidden agenda. Assume any link on this site is an affiliate link, Clicking on affiliate links costs you nothing extra (probably saves you $) and helps support this site.
PRIVACY POLICY

MANAGE YOUR ACCOUNT

...another Custom Wordpress Website by Mike Mueller Hi!