The Power of CSS – how it can help your website

Chances are that you saw that title “The power of CSS”… and thought… ‘what?’  How does CSS affect me in any way?

The truth is, it probably doesn’t, at least not direct.  But indirectly, if you have a website, it does.  But this story is a long one, so bear with me.

As of today, all websites use CSS – CSS is ‘Cascading StyleSheets’.  This is the ‘code’ that makes text bold, italic, red, green, large, small, and is in fact what makes the logo at the top of this page, remain where it is.  It’s also what makes the font you are looking at, the way it is.  Apart from this very text, the way you are viewing it, is down to CSS.

But why is CSS powerful?  What is this the ‘Power of CSS’?

This is because sometimes you want to do something on your website that is not part of the theme, the ‘default design capabilities’ of your Content Management System.  Let’s give you a little example, shall we?  You might want to add some icons to a page, and your WordPress theme allows you to add that icon in black, grey, green, purple, Primary Color 1… and so on.  But what if you wanted it a different colour, what if you even wanted it in a gradient – such as light purple to deep purple?  No way could you do that in those default settings – unless your theme had a “gradient” option, which most don’t within the ‘Icons’ tools.

How do you add CSS?

So how do you do it?  CSS is down to a Class.  This is the name given to that section of your page; be it the Row, the column, or the element itself (such as a text box or icon).  If you wanted to assign your custom styling to all icons in that row, then you would assign it to the row.  If you wanted each  icon to have a different custom style then, yep you guessed it, you assign it to the column (or the icon element).

So let’s call the Class ‘row-icon-gradient’, how do you get that to be a fancy gradient.  You need the CSS code that does it – haha!  There are many websites out there that you can find to do this, some that will generate the code in a lovely way, and some that are a little more old fashioned.  We will leave finding such websites to you.  We have a ‘fool proof’ list we have in our armoury!  So if you wanted something really perfect, get in touch.

Where does CSS go?

You have your page and have managed to work out how to set the gradient how you want it.  Then need to find that Custom CSS area of your WordPress website – this can be in Appearance > Customize, but many themes have a Custom CSS section which is frankly easier.  Add just add your Class, pop the generated CSS code in there, save it and see if it works.  We use such methods on many pages here, such as our homepage, our WordPress Support page, and many others.  We once wanted to use our green logo as a round icon, so we made it 3D using this exact process.

But how does this explain why CSS is so powerful?

This is just a foundations exercise.  Let’s say you want your content to be in Arial font, or some other fonts.  You normally set that within the theme, where you state the Google Font you want to use.  Roboto is a similar font to Arial, so if you set your ‘Body Font’ to Roboto and saved it, immediately every paragraph on your website (unless other coding is messing with it) become Roboto.  Now that is powerful!

Shall we get more powerful with CSS?

When you look at an ecommerce website design, 9/10 the shop pages will have filters down the left, and the tiled products on the right.  Sometimes it will be full width, even on bigger screens, sometimes it will be down the middle with some spacing either side.  This is achieved in CSS.  Some themes have the ability to enable or disable this.  We have built CSS from scratch in the past to achieve this look, which is tricky to do, but again, remove the CSS and you have a mess on screen.

A website, most notable for us, WordPress website, is made up of very few core factors:

• The Database: this stores practically every setting and piece of content on your website
• Images: as it says, logos, product photos, icon images and so on
• Files: the CMS platform itself, plus other files like Plugin files and so on
• CSS: the code that makes your site look the way it does – or is layout out the way it is.

As you can see, CSS forms a major part of the site.  Remove it, and you don’t really have a website.  You can build a page with no CSS whatsoever, but it will be plain.  It will have no background colours and your browser’s default font – welcome to 1995!

But today things are different.  Your website has to work on all devices, and this can only be done with CSS.

Why is CSS important for all devices?

Let’s say you have big text as your title, on a mobile phone or a tablet in portrait, you don’t want that text that big.  With CSS you can tell it what to do based on the size of the screen – it’s called a Media Size.  We do this a lot, as sometimes you want something to be wide, but on a phone, you might want it narrow, so again, adjust it based on screen (Media) size.

Before the days of WordPress, we use to create websites wholly from scratch.  Nowadays this is considered a little “old hat” and definitely does not look as good in our view.  But back then, we would have to create every single element you see on screen, including the CSS.  We once had a meeting with a client to show them how the shop looked and they asked how the layout is done.  We showed them the CSS and within the browser you can just remove it to see how it would look – it collapsed.  He was amazing at the power of CSS.  Take it out, and images collapsed, borders disappeared, tiling was gone, the menu was broken.

CSS does way more than you realise.  Having worked personally in CSS for decades, we’ve gotten well use to it, and while still learning, it’s easy to adapt CSS to make it work for you – hence the Gradients topic above.  You find code that is a gradient – just adapt it for your colour scheme.

The Power of CSS – welcome to our world, and getting far better design, bespoke website design, and the best WordPress Support to make your site really pop!