This “CSS in WordPress” series has been written by our awesome CSS and coding maestro, Brian. Thanks Brian!
  • Introduction to CSS, – what it is, <style> tags, basic layout / syntax, change font / background colour of body using non hex code.
  • <H> and <p> tags – How to style and when to use them, using hex code colours

 


 

So what is CSS? Why does it exist? Well CSS stands for “Cascading Style Sheet”, and as you may expect, it is a code used for styling. CSS is invaluable for your website to stand out from the crowd. While WordPress themes do most of the work for you, don’t you wish you could change that font here, or maybe make some text a little bigger? Well sure, you can do it in HTML, but say if you wanted to change the text colour of your whole website? Well that’s a massive task if you have many pages. So that’s where CSS comes in!

On a traditional HTML website, you can add the <style></style> tags between the <head></head> tags at the top of the page. And boom! That’s your CSS code. Well that’s where it goes at least. As for what to put in the style, well that’s up to your needs. However we will go over some of the CSS basics in this blog series. Heading tags are very important for a website’s style and Search Engine Optimization. They should always go in order eg.

  • H1
    • H2
    • H2
      • H3
      • H3
    • H2

Styling these is very easy, so long as you correctly format your code. There are a few differences from HTML. For starters, CSS doesn’t use < or > for opening and closing tags, they instead use { and }. Here is an example of what you would write if you wanted to style a H1 tag. Notice the format (or Syntax) changes from HTML.

h1{
color:red;
}

 

Now lets try that on a <p> paragraph of text too, so you can see two objects being styled.

h1{
color:red;
}

p{
color:blue;
}

For everything you want to change within an object, each statement must end with a semicolon (;), so to add more, so:

h1{
color: red;
font-size: 20px;
text-decoration: underline;
}

This isn’t just for objects in a page but also can be for the page itself, like the full HTML body.

h1{
color: red;
font-size: 20px;
text-decoration: underline;
}

body{
background-color: grey;
}

Following this tutorial, you may end up with something like this:

Header in red, pararagh in blue

 

Try these code snippets out in your own .html document and see how it goes for you. Remember that <style> goes between your <head> tags. Stay tuned for more CSS blogs and tutorials!

 
right-track-media-pyramids-150
To find the rest of Brian’s “Adding CSS to your Blog” blogs, click here: Adding CSS to your Blog