Customize Using CSS

Thesis allows you to customize your website exactly to your needs using a future-proof CSS file named, custom.css

What is CSS?

The Cascading Style Sheet has been around since 1997 and allows us to change and customize elements on an HTML web page by use of presentation semantics. In other words, it’s the paint on the car.

Did you know that FireBug is the single most popular CSS inspection tool for both Firefox and Chrome? Download it today and get a jump on mastering CSS!

Basic Syntax

CSS, to me, is easier to understand than PHP functions or filters. Regardless of the programming launguae (PHP, ASP, HTML5 etc…) the CSS syntax has remained largely unchanged since it’s inception.

selector {
    property: value;
}

Selector = The element you want to style. This could be a box, some text, or even an image. Often they begin with a # or a . HTML Elements such as: body a p h1 and h2 do not require a # or .

Property = Defines the part of the selector you want to edit. There are a set number of properties available in CSS. They look like this: font-family or background or text-decoration. (see a list of CSS properties)

Value = Sets the property. This could be as simple as make bolding font or changing it’s size–to adding a border or some padding.

Color Values = These 3 or 6 digit numeric codes define colors. #000000 = black and #FFFFFF = white (Read more)

Here are the different types of selectors

– HTML Element

– #ID Selector

– .Class Selector

– :Pseudo Selector

Here is how HTML Elements look in HTML:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<a href="http://google.com">This is a link to Google</a>

Here is how an #ID selector and .Class selector, and HTML Element w/ CSS look in HTML

<div id="box">This is a box</div>

<div class="text">Some Text</div>

<p class="text">This is a paragraph with a class attached to it</p>

Basic Examples – HTML Element

HTML Elements are inherit to every HTML page. Based on the doctype , a modern web browser will apply a default set of styles–even if you don’t define them in CSS!

This will change our website’s background to black:

body {
    background: #000000;
}

Now let’s add some padding:

body {
    background: #000000;
    padding: 10px;
}

Pretty easy huh? Let’s style some headlines:

h1 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 24px;
    font-weight: bold;
}

h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    font-weight: bold;
}

How about the font inside a paragraph?

p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
}

Links?

a {
    color: #00F;
    text-decoration: underline;
}

Let’s throw in a pseudo-class called :hover

a:hover {
    text-decoration: none;
}

Basic Examples – #ID Selectors

Now that you’ve got the basic syntax down, let’s work on #ID selectors. The #ID selector is used to specify a style for a single, unique element. The #ID selector uses the id attribute of the HTML element, and is defined with a “#”.

#footer {
    font-size: 12px;
}

You can add HTML Elements to an #ID selector:

#footer a {
    color: #333333;
}

What you’ve just done is tell a web browser, “Hey! Inside the #footer selector, make all text size 12 pixels and turn the links gray!”

Basic Examples – .Class Selectors

The .Class selector is used to specify a style for a group of elements. Unlike the #ID selector, the .Class selector can be used on more than one element on a single page. This allows you to set a particular style for any HTML.

Let’s say, you’ve created several HTML links and I wanted them all to be the color red:

<a href="http://google.com" class="red_link">Google</a>
<a href="http://yahoo.com" class="red_link">Yahoo</a>
<a href="http://bing.com" class="red_link">Bing</a>

.red_link {
    color: #FF0000;
}

What this does is, anytime I create a link with the class="red_link" will turn the link red!

How do I customize Thesis using CSS?

Once you’ve installed Thesis, chances are you’ll want your website to stand out amongst the crowd. To make this happen, you have to style it differently than anyone else!

To get started, we’ll be making changes to the file located in /wp-content/themes/thesis_18/custom/

There are two ways to make changes to this file, either by using the Custom File Editor in Thesis or via FTP.

Thesis puts a .custom class in the HTML Element <body class="custom"> when you style things using custom.css the syntax would be:

.custom a {
    color: #FF0000;
}

.custom #content {
    padding: 10px;
}

Basically, you’re telling the browser “whatever starts with .custom is most important”