Need help? Complete the enquiry form for a quote.

ENQUIRY FORM

CSS is a computer language which can be used to change the way your blog looks. You can move the location of your title, add a border to a picture, or make content fit on a mobile screen.

Thankfully, CSS is simple and easy to learn. In this post I’ll explain how to add CSS code to your blog, and show you how a few lines of code can improve your site.

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.

CSS For Beginners

CSS stands for Cascading Style Sheets. You write the code into a text file, which is then loaded with your blog, when viewed in an internet browser.

Most blogging platforms have a place to input CSS. For example, in WordPress.org, you can find it here: Appearance/Customize/.

This is what my CSS editing box looks like:

Example Of CSS Editing Box WordPress Org

You write your CSS code into the box, hit publish, and the effects should appear on your website. Tip: Not working? Try clearing the cache.

Be sure to backup your blog before making any big changes.

Predefined CSS Selectors

Elements on your blog already have a code-name for them. For example, a paragraph is assigned the value: ‘p‘.

An example of a HTML paragraph

See the opening ‘<p>’ in the HTML?

and later, the closing ‘</p>’

If I wanted to edit all paragraphs on this website, I would write the following in my CSS box:

p {background-color: red; color: yellow;}

background-color: red; changes the background colour to red.

color: yellow; changes the text colour to yellow.

But how do you change multiple paragraphs in isolation? You create a new Class group that you name yourself.

SUBSCRIBE TO MIYBLOG

CSS Example – How To Modify Text With A CSS Class

As mentioned above, to modify text with CSS you can either select a predefined grouping of text, say Paragraphs for which you would use the ‘p‘ Selector, or you can create a grouping which you identify with a name you give to them.

Identifying a group in this way creates a new ‘Selector’ for the group. There are many different ‘Selectors’ available in CSS, but this version is called: Equality.

For this example, I will give a name to this paragraph, so that it can be selected by my CSS. Let’s call it: CSSText

Do to this, I’ve assigned a Class to the paragraph by simply adding – class=”CSSText” – after the opening p in the HTML:

An example of assigning a CSS Class Selector HTML

Now we’ve assigned the paragraph above, we can add the following CSS code to our CSS editing box:

An example of CSS applied to a text class

CSS Example – Code Explanation

Line-by-line, this is what that short bit of CSS is doing:

.CSSText is identifying the Class for editing. Note the ‘.’ (dot) before the Class name. Now within the brackets {} we have the code.

text-align: center; positions the text centre page.

font-style: italic; sets italic as the font style.

background-color: MediumPurple; changes the background colour.

color: white; selects the font colour.

font-size: 150%; calls for the font size to be 50% above the standard.

Why Not Just Use HTML Inside The Post?

The great thing about CSS is, it’s applied to every identified group on your blog. All you have to do is identify an element, and the CSS code will apply every time it appears.

It’s an easy way to format large sections of a blog with one piece of code. It also means, if you change your mind on a design, you won’t have to change every single page, you can just update your CSS file.

This was one example of using CSS, there are many other ways you can use CSS to customise your blog, to make it your blog.

To learn more about using CSS, read my next post: CSS Classes and Element Selectors.

Getting Started With CSS On Your Blog

Leave a Reply

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