David Weliver

CSS for Bloggers
How to Make Your Blog Look and Convert Better
(Without a Designer)
David Weliver, MoneyUnder30.com

What is CSS?
CSS – or cascading style sheets – is a coding
language used to format HTML. It gives most of
today’s Websites their unique look, feel and
functionality.

What You
Can Do With
CSS
With basic CSS you can
change link colors, fonts
and sizes, background
colors and more.
As you learn more you can
style tables and menus or
style useful widgets that can
increase conversion and
make your blog look more
professional.
Another use for CSS is to
make your blog display
better on mobile devices.

Why CSS Exists
Without CSS

With CSS

You can use HTML tags
like <strong> to make
font bold or <bgcolor> to
set a background color.

CSS enables you to
separate code from
content.

But you must insert this
code on every page and
every time you want to
change the format.

CSS saves work: You
define a style once, then
apply it anywhere its
needed.

This extends the amount
of HTML necessary and
adds a lot of code to your
content.

How CSS Works
In a style sheet (.css file), you define the
following:
h1 {font-size: 12px; color: blue;}

Wordpress makes your blog and the HTML looks like
this:
<h1>I Like Money, Don’t You?</h1>

Your reader sees this:

CSS Syntax
For each selector (i.e., h1 for headers), you define the value for
each property of the selector. Here, the h1 color is blue and the fontsize is 12 pixels.

Now, any text on your blog between the <h1> and </h1> tags will be
blue and 12 pixels in size.

Image source:
http://www.w3schools.com/css/css_syntax.asp

Where to Edit CSS Code
CSS lives in your theme’s style sheet (.css file). Edit this by
going to Appearance  Editor in Wordpress. Make a
backup first!!

Some Wordpress themes provide a custom.css
file where you can put CSS that will override the
default styles. This is easier for small changes.

Although not ideal, you can also define CSS
inline.
<p style=“font-size: 12px; color: blue;”>Debt is bad,
mmmkay?</p>

Or, in the <head> section of an HTML page.
<html>
<head>
<style type="text/css">
h1 {font-size: 12px; color: blue;}
</style>
</head>
</html>

CSS Selectors
Common global CSS selectors include body; p
(paragraphs); h1, h2, h3, etc. (headers); and a
(links).
To further customize your site, you define IDs or
classes for the elements on your website.
Elements are defined in HTML by the <div> tag.
<div class=“red”>Debt is bad, mmmkay?</div>
<div id=“blue”>Debt is bad, mmmkay?</div>

CSS ID and Class
ID

Class

Used to define single,
unique elements

Used to define groups
of elements

Defined with a “#”

Defined with a “.”

#red {font-size: 12px; color:
red;}

.blue {font-size: 12px; color:
red;}

<div id=“red”>Roth
IRA!</div>

<div class=“blue”>Roth
IRA!</div>

CSS ID and Class
IDs are more specific than classes
If an element has both a class and an ID, the ID
takes precedence
.post {font-size: 12px; color: blue;}
#red-post {font-size: 12px; color: red;}
<div class=“post”>Roth IRAs are awesome!
<div id=“red-post”>You should open one.
</div>
</div>

CSS Properties
Learning a few common CSS properties
will give you lots of control over your site’s
appearance.

The CSS Font Property
Font style and size may be defined in a few
ways.
The font property
p {font: arial,sans-serif;}

can define just the font:

Or additional elements like size:
p {font: 12px arial,sans-serif;}

Or even more elements like style and line height:

p {font: bold 12px/30px arial,sans-serif;}

Colors in CSS
The color property defines text color using color
names or hex codes.
p {color: #d10000;}

The background-color property defines the
background color of an element:
p {background-color: #efefef;}

Links
Applying CSS to links can be useful to create
compelling calls to action. An example of a global link
format:
a {color: red; text-decoration: none; border-bottom: 1px dotted
#000;}

To give a particular link special formatting, we create
an ID:
a#action {color: #fff; background-color: red; padding: 5px;
border-radius: 5px;}

Margins, Borders &
Padding
Margins

Padding

Control the outside
spacing of an element

Control the inside
spacing of an element

Margins are transparent

Padding shows an
element’s background
color

Margins, Borders &
Padding
The following adds a 10 pixel margin on all four
sides:
.box {margin: 10px;}

This adds 10 pixel padding on the top and left
only:
.box {padding-top: 10px; padding-left: 10px;}

This adds 10 pixel padding on the top, 5 pixel
padding on the left and right, and 20 pixel padding on
the bottom:
.box {padding: 10px 5px 20px 5px;}

Margins, Borders &
Padding
When adding a border, you must define the border
size, color, and width. For example:
.box {border: 5px solid #000;}

Looks like this:

.box {border: 1px dashed blue;}

Looks like this:

Margins, Borders &
Padding
When defining different margin/padding values for
different sides of an element, list the values
clockwise:
.box {margin: TOP RIGHT BOTTOM LEFT;}

The following element has a margin of 10px on top,
20px left and right, and 5px on bottom:
.box {margin: 10px 20px 5px 20px;}

The following element has a margin of 10px on top
and 20px left and right:
.box {margin: 10px 20px;}

Floats
•
•
•

CSS enables elements to “float” to one side or the other.
With floats, you can create columns without being confined to an
HTML table or you can wrap text around an element such as an
AdSense block.
Floats are tricky!

Image source: http://css-tricks.com/all-about-floats/

Responsive
Design
With CSS, you can improve how your blog
appears on mobile devices

Responsive
Design
•

•

Certain elements (like
floats) don’t display well on
small screens.
You can use CSS to change
how certain elements
display on mobile (or hide
them altogether using
display: none;).

CSS Tools
Programs and features that make working
with CSS easier

Inspect Element
With Inspect Element you can
click on an element to see its
CSS. You can edit the CSS and
immediately see how the
browser will display the altered
code.

Inspect Element
Chrome & Firefox: Right-click on target and click Inspect
Element
Internet Explorer: Access the Developer Toolbar (F12) then
CTRL+B

Advanced
Text Editors
For Mac: BBEdit (Free trial;
$50)
www.barebones.com/product
s/bbedit
For PC: Notepad ++ (Free)
http://notepad-plus-plus.org
More:
http://sixrevisions.com/webdevelopment/the-15-mostpopular-text-editors-for-

Experimentin
g with CSS
1.

2.
3.

Create an HTML file with
CSS defined in the
<head> section.
Code your CSS.
View the file in a browser
and use Inspect Element
to play around.

Cool CSS Tricks
A few examples of what CSS can do

Rounded Corners
Use border-radius: PIXELS;
Element does not require a border; will also work with
background color.

Gradients
Assigning the linergradient() value to the
background-image
property will display a
gradient in newer
browsers.
Here’s a generator:
www.colorzilla.com/gra
dient-editor

Inline Lists
Styling unordered and ordered
lists is tricky, but the effects can
be powerful.
A beginning trick is to learn to
use display: inline to transform
vertical lists into horizontal
ones.

Conditional Table Rows
Like any programming
language, you can create
rules with CSS that apply
styles conditionally.

Where to learn
more
Resources for learning CSS

CSS Resources
Learning CSS
W3 Schools
www.w3schools.com/c
ss

Code Academy
www.codecademy.com/
courses/css-codingwith-style
HTML Dog
www.htmldog.com/guid
es/css/beginner

Writing CSS
CSS Validation
Service
http://jigsaw.w3.org/css
-validator
Clean CSS (Code
Compression Tool)
www.cleancss.com
CSS Generator
http://css3generator.co
m

David Weliver

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Destacado

Destacado (7)

Similar a David Weliver

Similar a David Weliver (20)

Más de Philip Taylor

Más de Philip Taylor (20)

Último

Último (20)

David Weliver