Ready to level up your business with a more powerful website?

This CSS tutorial will teach you all the advanced magic stuff, so your website finally screams:
QUALITY AND VALUE!

After reading it you will be able to change every element on your site to your liking, make it awesome and unique.

This tutorial is 100% necessary if you want to create real professional websites that are powerful enough to sell, grow your email list and generate a huge following.

Also make sure to download my CSS CHEAT SHEET, where you can quickly look up all important CSS commands.

Is This CSS Tutorial For You?

Are you an entrepreneur and pretty close to starting your next business?

Or do you run a business already and want to get better results?

Are you familiar with my beginners tutorial and know a thing or two about WordPress?

If you are cool with the basics of WordPress, this CSS tutorial is going to teach you how to upgrade your skills to the next level and be more successful online.

This tutorial won’t be too technical (even though I’m a full nerd) and I will focus on the core parts that make your website the best it can be.

If you have been waiting to get all my magic voodoo stuff to create unique powerful websites, here you go!

Why Do You Need This WordPress CSS Tutorial?

Let’s start with the why.

Why do you need this tutorial?

What are CSS and HTML and why do they help you and your business in the long run?

What you can build with the knowledge of my beginners tutorial or with any other basic WordPress knowledge is very limited.

Often times you will struggle changing this one element on your website the way you want it to be.

Therefore I took the wisdom worth a couple of books and put it into this handy WordPress CSS tutorial plus my top secret cheat sheet.

Wordpress CSS Tutorial

This CSS tutorial will teach you step by step, in the fastest manner possible, how to style your website exactly how you imagine it!

Introduction – Make Design Changes Of Every Pixel On Your Site

Luckily CSS is really easy as soon as you get the hang of it.

The core process is always the same:

  1. Identify or create the element
  2. Change the property of the element

That’s it.

Let’s break this up.

First you have to know which element you want to change. Logical.

Afterwards you change the element to your desired outcome.

If you are already experienced in HTML you can jump right to the CSS section. Otherwise read on.

Basics – The Elements on Websites

Before we dig into the process of identification and changing elements I’ll quickly recap the basics of web design, as they are important if you want to change everything to your liking. (and create powerful websites)

HTML – How your website’s elements are created

Elements on websites, whether they are texts, images or containers (layout helpers) are created with HTML (“HyperText Markup Language“).
HTML is a language which your web browser (like Chrome, Firefox, Safari or Internet Explorer) interprets to construct the visual output for you.

A HTML element is written between brackets: {xhtml}”<“{/xhtml} and {xhtml}”>”{/xhtml}.
The content of an element is written between an opening tag like {xhtml}<p>{/xhtml} and a closing tag like {xhtml}</p>{/xhtml}.
The {xhtml}<p>{/xhtml} html tag marks a paragraph – a block of text.
The whole sequence looks like this:
{xhtml}<p>Here is the paragraph content</p>{/xhtml}
Some elements require additional attributes to work properly.
For example let’s explore a link:
{xhtml}<a href=”http://www.thelinktarget.com” target=”_blank”>The link text</a>{/xhtml}
The href attribute contains your link target. The target attribute contains your link behavior. In this example the target attribute is set to _blank, therefore a new tab will open with your link target.

Here is a list of the most common HTML elements.

A paragraph
<p>A paragraph</p>
A link that opens in a new tab
<a href="http://www.linktarget.com" target="_blank">A link</a>
A simple line of text
<span>A simple line of text</span>
An image that is located at your src (=source) path
<img src="location/of/your/image">
A simple container that does nothing at this state
(because it lacks attributes to tell him what to do -
we will come to that in the next chapter)
<div>A simple container</div>
The most important headline on your page
<h1>The most important headline</h1>
The second most important headline on your page
<h2>The second most important headline</h2>
The third most important headline on your page
<h3>The third most important headline</h3>
The fourth most important headline on your page
<h4>The fourth most important headline</h4>
The fifth most important headline on your page
<h5>The fifth most important headline</h5>
The sixth most important headline on your page
<h6>The sixth most important headline</h6>
An ordered list with two items inside
<ol><il>List Item</il><il>List Item 2</il></ol>
An unordered list with two items inside
<ul><il>List Item</il><il>List Item 2</il></ul>

Below the surface a simple web page looks like this.

<!DOCTYPE html>
<html>
<head>
<title>My Company</title>
</head>
<body>
<h1>This is my site</h1>
<h2>I do great</h2>
<p>Here is some text.</p>
<p>Another paragraph.</p>
<p>Cool more text.</p>
</body>
</html>

The {xhtml}<head>{/xhtml} section contains relevant information about your website which is usually not visually displayed on your site. For example the {xhtml}<title>{/xhtml} is used by Google for displaying your page’s title in the search results.

Inside the {xhtml}<body>{/xhtml} section you place the elements you want to display visually on your site. Like paragraphs, images and so on.

WordPress HTML “Text” Editor

When you are familiar with WordPress and blogging you won’t see these html elements unless you switch into the text editor.

Wordpress Text Editor

Inside the text editor you can see your page’s text with all the HTML tags and can change them to your liking.

Cool! You just learned the basics of HTML! Wasn’t that hard right?

Now let’s dig into CSS and see how you can add CSS to “style” (= design) your HTML elements.

CSS – How Your Website’s Elements Are Styled

CSS which stands for Cascading Style Sheets is the language that styles your HTML elements on your website.

CSS can be directly added to your HTML elements. The following example demonstrates a bold styled text.
{xhtml}<p style=”font-weight: bold;”>This is a bold text</p>{/xhtml}
The parameter style=”” indicates that your paragraph element will have additional styles.
The property “font-weight” determines the thickness of your font.
The semi-colon ; determines that your property is finished.

You can add multiple properties inside the style parameter. The following text will be bold and red.
{xhtml}<p style=”font-weight: bold; color: red;”>This is a bold red text</p>{/xhtml}

Different CSS identifiers

There are 2 main (or easy) ways you can identify and declare (like naming it) an element.
When an element is declared you can easily alter it from your stylesheet – a file where you can store all your CSS styles (I’ll come to that in the next chapter).

  1. CSS IDs: An ID is a unique identifier: Each element can only have one ID. Each ID can only be used one time on each page on your website.
    Pro Tip: IDs are great if you want to make links on your page, so your visitors can jump from one section to another.

    <p id="my-paragraph">Cool paragraph with an ID</p>
    <a href="#my-paragraph">Cool link that jumps to my paragraph</a>
  2. CSS Classes: Classes are more flexible than IDs. You can place multiple classes on one element. Additionally you can have multiple elements with the same class.
    <p class="my-paragraph-class another-class">Cool paragraph with two classes</p>
    <p class="my-paragraph-class">Another cool paragraph with the same class</p>

CSS Stylesheets

Stylesheets are great ways to keep all your elements’ stylings in one place.

Typically they are named like filename.css.

WordPress Css Stylesheet Manipulation

The most important stylesheet in wordpress is your style.css.

Each theme has its own style.css. Many themes also have more stylesheets, but your style.css is your most important CSS file with all the major styling codes.

You can access your theme’s style sheet right in your WordPress Backend.

Go to “Appearance” and click on “Editor”.

Wordpress edit stylesheet

Make sure you have the style.css selected on the right side of your browser.

A plea for WordPress child themes

Ok, we now know that stylesheets are the most important assets to style our website.

This is a good time to get one thing straight: You really want to use child themes for all of your websites.

Setting up a child theme takes a maximum of 5 minutes and has a lot of advantages when working with WordPress.

Let’s talk about the most important one:

If you make a change in your main theme’s style.css and update your theme afterwards your changes are gone.
(Ok, you could manually transfer them but chances are high you forget one time and even if not it costs you a lot of time)

To prevent this you create a child theme out of your main theme. A child team inherits all of your main themes functionalities and styles but is easily extendable and update save!
(When you update your main theme you keep all the changes you did in your child theme’s style.css!)

TL;DR: You really want to make sure you always have a child theme in place!

Change the property of the element

Stylesheets provide an organized way of styling your website.

Remember the classes and ids we used previously?

We can now use them to change our elements right in our style sheet.

A typical stylesheet of a WordPress child theme looks like this:

/*
Theme Name: CreateTopNotchWebsites.com
Theme URI: https://arket.io
Description: CreateTopNotchWebsites.com
Author: CreateTopNotchWebsites.com
Author URI: https://arket.io
Template: Mytheme
Version: 1.0.0
*/
@import url("../Mytheme/style.css");
#my-paragraph{
color: red;
}
.my-paragraph-class{
color: blue;
}
#my-paragraph, .another-class{
font-weight: bold;
}

First we have all the lines that tell WordPress what our child theme is about and what our parent theme is.
After the {css}@import{/css} line our actual styling begins.

We start with the element that we gave the id “my-paragraph” and we change its text-color to red.

Afterwards we address all our two paragraphs that have the class “my-paragraph-class”.

And finally we turn the element with the id “my-paragraph” and also the element with class “another-class” bold.

You can also add styles to all paragraphs on your website using just the {xhtml}<p>{/xhtml} element like this:

p {
font-size: 18px;
}

Some more info on identifiers

Sometimes you want to make sure that you only target this one element of your site.

Especially if you are using themes in WordPress that other Developers designed for you, you have to be careful not to select an element you don’t want to.

You can do this by extending your selectors step by step.

.my-page .my-section .my-paragraph{
/* ... some code ... */
}

This will only select your {css}.my-paragraph{/css} classes that are inside your {css}.my-section{/css} and {css}.my-page{/css} classes.

You don’t have to take each step from {css}.my-page{/css} to {css}.my-paragraph{/css}. In between these classes there could be infinite other classes but generally you want to make sure to write your code as short as possible.

If you want to make sure that only your paragraphs that are directly under your next section are selected you can use the {css}>{/css} operator.

.my-page .my-section > .my-paragraph{
/* ... some code ... */
}

So you will only select the my-paragraphs that are directly under {css}.my-section{/css} but not paragraphs that are in other sub-classes of {css}.my-section{/css}.

Another trick to make sure you only target the right elements is to stack classes (there is no white space between the classes):

p.my-paragraph.color-blue{
/* ... some code ... */
}

This will make sure that you only target following elements: {xhtml}<p class=”my-paragraph color-blue”>…text…</p>{/xhtml}

Important styles to override other styles

Sometimes you want to make sure that the color you just gave your {css}.my-paragraph{/css} is not overwritten by your {css}.color-blue class{/css}.

To do this you can just add important to your property.

.my-paragraph{
color: red !important;
}
.color-blue{
color: blue;
}

The result for following element is a red colored paragraph:

{xhtml}<p class=”my-paragraph color-blue”>…text…</p>{/xhtml}

But what if … 2 classes use !important for the same property?

.my-paragraph{
color: red !important;
}
.color-blue{
color: blue !important;
}

Short answer: the latter one wins! The text is colored blue.

If you want your first one to win you can just add another class. So the property that is written with the longest identifier wins.

.my-section .my-paragraph{
color: red !important;
}
.color-blue{
color: blue !important;
}

The text is colored red again!

That’s it! You just learned the basics of CSS! Wasn’t that hard, right?

Let’s get into all the cool stuff you can do with it.

Usage – Most Common CSS Commands

There are loads of different commands that help you make your website unique and different than the masses. In this section I’m going to give you the basics, the most used CSS commands. Commands that I use every day.

Comments in CSS

First things first: Whenever you write CSS code you can and should use comments to explain the code you are writing. This makes it easier for you to remember what your code was about. Even more it makes it a lot easier for other developers to understand what and why you wrote these lines of codes.

Comments can be declared with the /* and */ markup in your stylesheets.

{css}/* This is a comment that explains my code*/{/css}

Text Basics

Text elements like {xhml}<p>{/xhml} and {xhml}<span>{/xhml} can be fully customized through CSS.

Here is an overview of the most important text styling elements.
Explanations are next to each element in form of comments.

.my-custom-text{
font-size: 16px; /* Determines your font size. Most common units are px (Pixels), 
em (multiplier relative to the font size of the parent element), 
rem (relative to the font size of the root element) */
line-height: 20px; /* The height of the text line, 
which means the white space at the top and bottom of your text */
text-transform: uppercase; /* You can transform your whole text. 
Allowed: Capitalize, Uppercase, Lowercase */
text-decoration: underline; /* Decorate your text with 
underline, overline, line-through */
letter-spacing: 1px; /* Space between single letters. 
Great for headlines for example */
text-align: center; /* Align your text. Allowed values: 
center, left, right, justify */
}

One helpful tool that provides you a good guidance to finding the right sizes for your texts is the golden ratio calculator.

List Basics

Lists are divided into unordered lists (like bullet points) {xhtml}<ul>{/xhtml} and ordered lists {xhtml}<ol>{/xhtml}.

ul.my-unordered-list{
list-style-type: square; /* Determines the form of your bullet point. 
Possible: Circle, disc, square */
list-style-position: inside; /* Determines whether your markers 
should appear inside or outside your text's flow */
list-style-image: url('myimage.gif'); /* Use an image as bullet point */
padding-left: 20px; /* Set your list a bit more to the right, 
so it grabs more attention */
}

The main difference between an unordered list and ordered list is that the latter displays the number count of bullet points.

ol.my-ordered-list{
list-style-type: upper-roman; /* Displays roman letters instead of numbers. 
Also latin letters are possible. 
You can also choose between upper and lower case. */
}

Color Basics

There are 3 different ways that you can set colors in CSS: hex (a hex code looks like #123456), rgb (which stands for red green blue) and rgba (which adds alpha to rgb, so you can make thinks transparent).

p.my-colored-paragraph{
color: #123; /* This is the text color. 
Hex colors can also consist of only 3 digits which is interpreted as 6 digits: #112233 */
background-color: rgba(200,200,200,0.5); /* This sets the background color to a light grey 
and the alpha to 0.5 which makes it 50% transparent */
}

If you need help finding the right hex or rgb code I suggest using hexcolortool.

Shadow Basics

Shadows are great ways to highlight some of your elements.

They are also great if you want to increase the usability of your site.

And you can also use shadows to make your texts more readable if you use background images or colors that make your texts hard to distinguish.

For example lets look at the homepage of createtopnotchwebsites.

Following image is without shadows.

Without CSS Shadow

Following image is with shadows.

Without CSS Shadow

There are two types of relevant CSS shadows: letter-shadows (used in the example above) and box shadows.

.my-text-shadow{
text-shadow: 2px 2px 2px #111; /* From left to right: 
the horizontal position of the shadow, 
the vertical position of the shadow, 
the blur radius of the shadow 
and the color of the shadow */
}
/* HINT: Some CSS properties need additional lines to be fully compatible with 
older IE, Firefox and Opera browsers. Box-shadow is one of such properties. */
.my-box-shadow{
-webkit-box-shadow: 10px 10px 5px 2px #888888; 
-moz-box-shadow: 10px 10px 5px 2px #888888;
-o-box-shadow: 10px 10px 5px 2px #888888;
box-shadow: 10px 10px 5px 2px #888888; 
}
/* Values are the same as with text-shadow. 
However the last pixel property with 2px is the spread 
which is not available for text shadows. */

The further you place the shadow away from your images, the deeper the 3D effect of your element will be.

You can use cssmatic box shadow generator to play around and create your own shadows easily.

Layout Basics

The CSS layout commands have different outcomes depending on how an element is displayed with the {css}display{/css} property.

Behavior of your element – display

There are 3 main ways elements are displayed:

Inline Elements
Inline Elements
Block Elements
Block Elements
Table Elements
Table Elements
  1. Inline: Display elements as inline elements (“in the same line”) just the way <span> works.
    .inline-element{
    display: inline;
    }
  2. Block: Display elements as a block (“or as new line”) just the way <p> works.
    .block-element{
    display: block;
    }
  3. Table: Display an element as a table. Tables have a very unique set of layout rules and I recommend sticking with inline and block at the beginning.
    .table-element{
    display: table;
    }

Additionally you can also use {css}display:inline-block;{/css} to display elements’ inside elements as inline and the whole element as block.

Around your element – border, padding and margin

You have 3 parameters that control your element’s surrounding.

  1. Border: An outline for your element with 3 basic parameters: thickness, type and color.
    .bordered-element{
    border: 1px solid #000; /* A 1 pixel thick solid border with the color black */
    }
  2. Padding: The distance between your element and it’s border.
    .padding-element{
    padding: 5px 5px 5px 5px; /* An element with 5 pixels padding to each side. 
    (clockwise: top -> right -> bottom -> left) */
    }
  3. Margin: The distance between your element’s border and the next element.
    .margin-element{
    margin: 5px 5px 5px 5px; /* An element with 5 pixels margin to each side. 
    (clockwise: top -> right -> bottom -> left) */
    }

Following image visualizes these parameters (it’s taken right out of the web inspector tool which we will be addressing in the next chapter):
Around CSS Elements

The blue box in the middle is the actual element. Values are in pixels.

Positioning your element – position and z-index

CSS positions are great way to align your element in relation to your other elements on your pages.

Sometimes elements are so important that you want to place them at an exact position on your screen, regardless of your other elements’ positions.

You can do that by attaching the CSS property {css}position: absolute;{/css} to your element. This will position the element relative to its positioned ancestor (parent element).

.absolute-element {
position: absolute;
top: 80px;
right: 0;
width: 10px;
height: 10px;
background-color: red;
}

Above element is a 10px square red box which is positioned 80px below the top and on the right side (“right:0”) of its ancestor element.

By default all CSS elements are positioned static {css}position: static;{/css} which means they are not positioned in any special way. Therefore you can’t use top, right, left or bottom properties.

Alternatively you can also position elements relatively {css}position: relative;{/css} which means they are moving away from their “normal” (which means static) position.

There is also the possibility to set elements as {css}position: fixed;{/css} which makes them stay at the same position on your screen, no matter how far you scroll down. This can be used to create cool parallax effects with your backgrounds (your website will appear like it has 3D layers). You might also want to use it for popups like cookie-alerts on your website.

With {css}z-index: 999;{/css} you can set which element should be on top of each other and create an overlay order.

Aligning your element – float, vertical align, text-align

Sometimes you just want to center this one item.

Luckily for us we have a couple of ways to do that.

You can either play with margin for block elements:

img.center-image {
display: block;
margin: 0 auto; /* 0 margin for top and bottom and 
auto margins for left and right which centers the element */
}

Or funny enough you can also use text align to align images inside of text elements.
{xhtml}<p style=”text-align: center;”><img src=”…” /></p>{/xhtml}

Sometimes you want to align an image at the top end of your text:

img.top-image{
vertical-align: text-top;
}

One more interesting option to align elements is float.
Float can be used to wrap text around images and possesses three options: none, left and right.

img.float-image{
float:left;
}

You just went through all the basics CSS commands. YEAH!
Now let’s get on to another top trick pros use every day: The web inspector.

P.s.: If you want a quick way to look up all important CSS properties and stuff, download my handy CSS CHEAT SHEET!

The Web Inspector Tool

Wow, if you read everything above carefully you are already only a step away of becoming a professional web designer.

However if you are like me and working nearly exclusively with WordPress you will have a hard time telling what class or id an element on your website has.

Especially if you are using a theme that you didn’t code yourself.

Luckily for us there is a neat tool in every modern web browser that makes this really easy: The web inspector.

Open your web inspector

In Chrome, Firefox and Internet Explorer/Edge you can open the web inspector by pressing F12.

Alternatively you can also right click anywhere on a website and select “Inspect element”.

The web inspector interface

The web inspector interface can look quite intimidating at first. However if you get into it, it will be your life saver!

Following screenshot shows the Chrome web inspector interface, however they look all pretty much the same (thankfully!)

Web Inspector Interface

  1. Your page’s HTML source code. The whole source code of your current page is written here.
  2. Your console which outputs error and info messages (not that interesting for us at the moment).
  3. The attached styles of the chosen element in (1). We have selected the {xhtml}<p>{/xhtml} element, therefore (3) shows all styles that are applied to this element.

One cool thing about the web inspector is that you can try out chances right inside the tool. For example in (3) we see that the padding-bottom is defined as 1em. You can simply click on 1em and change it to 2em and you will see the result instantly on your opened page.

You also see where this style is defined at (style.css line 173) and which elements it’s applied to (… p { … means to all p’s / paragraphs).

In (1) you can also see the parents classes of this element. So if you want to change the bottom padding of only {css}p{/css} elements that are below of {css}.et_pb_text{/css} elements you can simply add to your style.css {css}.et_pb_text > p { padding-bottom: 2em; }{/css} and all these paragraphs will have a bottom padding of 2em.

One more important thing on the web inspector!

Of course you don’t have to go through the whole source code in (1) to find your desired elements to change. The web inspector makes it really easy for you.

Just hit the following icon in the upper left corner of the web inspector and select the item you want to change directly on your page.

Web Inspector Selection Tool

The web inspector also has some more neat features built in that you will eventually discover but are not that important when you start.

Now let’s go on to another goody I prepared for you, to make it even easier for you to create powerful websites:

My CSS cheat sheet! (which is a CSS Tutorial PDF packed with a lot of commands and explanations)

The CTNW CSS Cheat Sheet Download

That’s it! You are ready to rock! Wasn’t that hard, eh?

If you still have questions, just write them in the comments below!

You can also post websites you built with the help of this tutorial or just say hi!

Cheers,
Arian