Need help? Complete the enquiry form for a quote.

ENQUIRY FORM

To extend your use of CSS, you need to have a basic understanding of CSS Classes and Element Selectors. This is a tutorial for those new to CSS and beginner bloggers.

Quickly discover the fundamentals of CSS by reading my other post, Getting Started With CSS On Your Blog.

Busy? Save a link, or my Pinterest Pin, for later.

Notice: This is a general guide, based on my personal experience and/or opinion. It may not be suitable for everyone, and should not be taken as advice. Please seek a professional if required.

What Are CSS Classes?

HTML elements have an assigned name that can be used when using CSS. For example, a paragraph has the name ‘p‘.

So if I wanted to style paragraphs on my website, in my CSS editing box, I’d start a new line with:

p {}

Now I can add my styling options within the brackets {}.

What about Header titles?

For the second header on each post, I’d start my new line of CSS code with:

h2 {}

SUBSCRIBE TO MIYBLOG

What Are Element Selectors?

The ‘p‘ and ‘h2‘ are Element Selectors – They are the official names for the element, and can be used to identify the elements when they appear on your blog.

Element Selectors are used to identify elements for styling with CSS.

Common Element Selectors I use are:

h2, h3, h4, img, a and p.

Img can be used to style images on your website, such as giving them a border, or shadow.

There are also Selectors which have been defined by your Theme or website source code. For example, a common Selector is:

.site-description

This Selector lets you target the site description for CSS styling. In my case, I have the following styling applied to my site description:

.site-description { color: grey; } – Simply changing its colour to grey.

For a list of standard Selectors, check out w3schools.

What Are CSS Equality Selectors

These are elements which have been assigned a specific value. That can include Classes you have created yourself.

As mentioned in, Getting Started With CSS On Your Blog, you can group elements yourself, using Equality Selectors.

How? By adding a short piece of code in the HTML of the post (or page) you’re editing. The code required to create a Equality Selector is:

Class=”YourNewClassNameHere” (Note, there is no ‘.’ dot before the name when naming your new Class Selector).

Now, when you go to your CSS editing area, you can style all elements you have assigned the Class to.

For example:

.YourNewClassNameHere {text-align: center; font-style: italic; background-color: MediumPurple; color: white;}

(Note, there is a ‘.’ dot before the name when editing your CSS code.)

Hopefully, this post has explained the basic principles of CSS Classes and Element Selectors.

Leave a Reply

Your email address will not be published. Required fields are marked *