Tweaking Your Website With CSS – WPQuickies

/ WordPress Tutorials / By

Due to the virus pandemic, we’ve all moved to online meetups.

I’ve created a new webinar series called #WPQuickies – bite-size WordPress hacks in 30 minutes or less.

Tweaking Your Website with CSS #WPQuickies webinar

Webinar Content

In this webinar I cover the following topics.

What is CSS and what can it do?

Video time code: 9m00s.

In this segment, I discuss how Cascading Style Sheets (CSS) are used to change the style of how HTML page elements display their content.

By styling I mean chaging properties such as shape, colour, position and size. Definitely not the HTML content.

HTML Tags, ID’s and Classes

Video time code: 10m10s.

In this segment, I discuss how to target the HTML with CSS in three ways:

  1. Using an HTML tag such as paragraph <p>, headings <h1> etc.
  2. Using an HTML tag ID e.g. <button id=”checkout-submit>Buy</button> and how ID’s are unique – only one per HTML page
  3. Using HTML tag Classes e.g. <img class=”user-avatar” src=”pic.jpg”/> and how Classes allow styling to be applied to a group of HTML elements on a page. Hence, there may be multiple Classes on a HTML page.

I also explain how to write CSS ID’s, prefixing with a hash # and Classes, prefixing with a period .

Where To Add CSS In WordPress

Video time code: 20m05s.

In this segment, I quickly share a graphic showing that CSS can be added directly into the Customiser using the Additional CSS menu.

Additional CSS in the Customiser

Using Chrome and Firefox Inspectors

Video time code: 21m00s.

In this segment, I jump into a live demo showing how to use Firefox’s Inspect Element tool to locate HTML tags, ID’s and Classes using the selector and the right-click method on a local installation of WordPress using the default TwentyTwenty theme and a sample page.

Watch More #WPQuickies

You can watch more #WPQuickies from the playlist on our WordPress Sydney YouTube channel.

The playlist is also embedded below, click the hamburger menu in the top right of the video to see the others in the series.

Suggest a #WPQuickies Topic

If you have an WordPress topic you’d like to see explained in 30 mins or under, fill out the form below.

https://forms.gle/mMWCNd3L2cyDFBA57

Was this article helpful?
YesNo