What is CSS?
Cascading Style Sheets commonly abbreviated as CSS is a ubiquitous front-end language used by many web developers and designers to design the visual components of websites.
CSS is typically used in combination with HTML and JavaScript to create vivid, stunning web pages.
CSS3 is the latest upgrade on CSS 2.1 which had become a staple in the industry over a 9-year period.
CSS3 New Features
CSS3 features many new improvements over CSS 2.1 and other older versions.
The main difference is that the latest version has been broken down into smaller “modules” which implement a particular function.
The following elements are split into modules developers/designers can use to design their websites:
– Selectors
– Media queries
– Aural style sheets
– Grid template layout
– Page floats
– Transitions
– Text effects
– Backgrounds and borders
– Shadow effects
– Grid layouts
– Device adaptation
– Intrinsic and extrinsic sizing
– Cascading variables
– Gradients
– Multi-column layout etc.
A basic knowledge of CSS is all you need to catch up pretty quickly with CSS3.
Adding custom CSS to your WordPress website
Support for custom CSS was introduced after the release of WP 4.7. Although CSS3 is backwards-compatible, custom CSS is impractical with older versions.
To add CSS to your WP site, you can either use the ‘Themes’ option in the admin section or add it to a Plugin.
The main difference between the two methods is when adding CSS using the Theme Customizer, any changes you make will apply only to your current theme. However, if you add custom CSS to a WP plugin, any changes you make stays the same across the board.
Using WP Theme Customizer
- Click Themes > Customize. This takes you to the WordPress theme customizer
- Click on Additional CSS tab on the left. It should open up a box where you can enter your CSS code. If you’ve entered a valid code, you should see the effect in your website’s Live Preview
- Click on “Save & Publish” to save changes
Using a Plugin
Adding CSS to a WP theme is the best way to implement new designs without modifying your current theme.
To add custom CSS to your WP site using a plugin:
- Install and activate Simple Custom CSS plugin
- Click Appearance > Custom CSS on the options pane on the left. It should open up a box where you can enter your CSS code
- View the effects of any changes made by doing a live preview of your website
- Click on Update Custom CSS button right below the text box to save your styling
Responsive web design
According to Google, having a responsive website is critical factor for your website to rank higher in search results.
You can create a responsive mobile menu by installing ShiftNav.
ShiftNav Features include:
– Multi-skin colours
– Touch-enabled
– Configurable
– Automatic integration
– Native app-style menus like Facebook and Gmail
– Mobile-friendly animations using CSS3 transitions
After installing ShiftNav, you can add a custom CSS code.
Simply add this code to ShiftNav:
@media only screen and (max-width: 1024px) {
.your-css {
/* All your styling goes here */
}
}
Tweaking your WP website
Now that’s done, let’s take a look at 3 great ways to revamp your WP website.
Creating awesome Hover effects
Image Hover Effects for WordPress enables you to create awesome hover effects for images on your WP site. It’s easy to use and free.
Features of Image Hover Effects include:
– Image upload from media including live preview option
– Ajax-based
– Fully responsive
– 40+ Hover effects
– Animated
– Easy to use
To create a Hover effect on your images, simply:
- Go to dashboard > plugins
- Select ‘add new’
- Search for ‘Image Hover Effects’ and click to install
- Go back to Dashboard > Image Hover Effects
- Save options
- Use the Shortcode button to get a short code
- Use the short code in Post, Custom post or Page
- View the effects of any changes made by doing a live preview of your website
Adding custom CSS3
To add CSS3 to your style sheet for Hover effects:
– Go to Dashboard > Appearance > Editor > styles.css
– Find @media and insert the following code at the bottom:
.effect .color, .effect:hover .bw { display: none; }
.effect:hover .color { display: block; }
– Save the style.css and refresh your website to see your new hover effect.
Applying Transitions
CSS3 Transitions for WordPress is a plugin that automatically adds CSS3 transitions to your website.
CSS3 transitions can be applied to visual elements like links, buttons, images, and list tags that have a hover selector specified.
To apply transitions:
– Go to Dashboard > Plugin
– Install the WordPress plugin adder; or
– Download the .zip file and upload it while unzipped to /wp-content/plugins/directory
– On the plugin menu, click to activate the plugin. CSS3 transitions will automatically be added to your website.
Here’s a simple code to transition background colour over duration of 1 second:
div {
transition: background-color 1s ease;
background-color: red;
}
div:hover {
background-color: green;
}
Adding a progress bar
A progress bar is a good way to inform a website user on the progress of a task in progress. It shows them that a command they made is actually being carried out and informs them about how long they will have to wait.
The simplest way to add a progress bar is by using a plugin, but you can also add a progress bar using a simple CSS3 code.
To add a progress bar to your WP site add this line of code into your theme customizer:
.progress-bar {
background-color: #FFF;
height: 25px;
padding: 5px;
width: 400px;
margin: 5px 0;
border-radius: 5px;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
float: left;
height: 100%;
border-radius: 3px;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
transition: width .4s ease-in-out;
}
.blue span {
background-color: #FFA500;
}
.orange span {
background-color: #FF0000;
}
.progress-text {
text-align: right;
color: white;
margin: -25px 0px;
}
Getting rid of CSS clutter
Having a bulky CSS code – one with redundant rules can bog down your website and slow down page speed marginally because it gives a web browser handling your page more elements to parse before loading up fully.
Fortunately, there are a few tools out there that go a step further than just minifying your CSS code. They help you to find and eliminate any unused CSS rules embedded in your website.
Last words
Customizing the visual components of your website to create an immersive user experience is one of the joys of web development/design. However, be sure to clean up any clutter in your code to keep it running at optimum levels.
