Your SlideShare is downloading. ×
0
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...
What You
Can Do With
CSS
With basic CSS you can
change link colors, fonts
and sizes, background
colors and more.
As you le...
Why CSS Exists
Without CSS

With CSS

You can use HTML tags
like <strong> to make
font bold or <bgcolor> to
set a backgrou...
How CSS Works
In a style sheet (.css file), you define the
following:
h1 {font-size: 12px; color: blue;}

Wordpress makes ...
CSS Syntax
For each selector (i.e., h1 for headers), you define the value for
each property of the selector. Here, the h1 ...
Where to Edit CSS Code
CSS lives in your theme’s style sheet (.css file). Edit this by
going to Appearance  Editor in Wor...
Where to Edit CSS Code
Some Wordpress themes provide a custom.css
file where you can put CSS that will override the
defaul...
Where to Edit CSS Code
Although not ideal, you can also define CSS
inline.
<p style=“font-size: 12px; color: blue;”>Debt i...
CSS Selectors
Common global CSS selectors include body; p
(paragraphs); h1, h2, h3, etc. (headers); and a
(links).
To furt...
CSS ID and Class
ID

Class

Used to define single,
unique elements

Used to define groups
of elements

Defined with a “#”
...
CSS ID and Class
IDs are more specific than classes
If an element has both a class and an ID, the ID
takes precedence
.pos...
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...
Colors in CSS
The color property defines text color using color
names or hex codes.
p {color: #d10000;}

The background-co...
Links
Applying CSS to links can be useful to create
compelling calls to action. An example of a global link
format:
a {col...
Margins, Borders &
Padding
Margins

Padding

Control the outside
spacing of an element

Control the inside
spacing of an e...
Margins, Borders &
Padding
The following adds a 10 pixel margin on all four
sides:
.box {margin: 10px;}

This adds 10 pixe...
Margins, Borders &
Padding
When adding a border, you must define the border
size, color, and width. For example:
.box {bor...
Margins, Borders &
Padding
When defining different margin/padding values for
different sides of an element, list the value...
Floats
•
•
•

CSS enables elements to “float” to one side or the other.
With floats, you can create columns without being ...
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 ...
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 ...
Inspect Element
Chrome & Firefox: Right-click on target and click Inspect
Element
Internet Explorer: Access the Developer ...
Advanced
Text Editors
For Mac: BBEdit (Free trial;
$50)
www.barebones.com/product
s/bbedit
For PC: Notepad ++ (Free)
http:...
Experimentin
g with CSS
1.

2.
3.

Create an HTML file with
CSS defined in the
<head> section.
Code your CSS.
View the fil...
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.
...
Inline Lists
Styling unordered and ordered
lists is tricky, but the effects can
be powerful.
A beginning trick is to learn...
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-styl...
Upcoming SlideShare
Loading in...5
×

David Weliver

317

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
317
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "David Weliver"

  1. 1. CSS for Bloggers How to Make Your Blog Look and Convert Better (Without a Designer) David Weliver, MoneyUnder30.com
  2. 2. 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.
  3. 3. 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.
  4. 4. 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.
  5. 5. 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:
  6. 6. 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
  7. 7. 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!!
  8. 8. Where to Edit CSS Code 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.
  9. 9. Where to Edit CSS Code 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>
  10. 10. 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>
  11. 11. 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>
  12. 12. 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>
  13. 13. CSS Properties Learning a few common CSS properties will give you lots of control over your site’s appearance.
  14. 14. 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;}
  15. 15. 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;}
  16. 16. 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;}
  17. 17. 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
  18. 18. 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;}
  19. 19. 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:
  20. 20. 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;}
  21. 21. 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/
  22. 22. Responsive Design With CSS, you can improve how your blog appears on mobile devices
  23. 23. 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;).
  24. 24. CSS Tools Programs and features that make working with CSS easier
  25. 25. 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.
  26. 26. Inspect Element Chrome & Firefox: Right-click on target and click Inspect Element Internet Explorer: Access the Developer Toolbar (F12) then CTRL+B
  27. 27. 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-
  28. 28. 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.
  29. 29. Cool CSS Tricks A few examples of what CSS can do
  30. 30. Rounded Corners Use border-radius: PIXELS; Element does not require a border; will also work with background color.
  31. 31. 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
  32. 32. 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.
  33. 33. Conditional Table Rows Like any programming language, you can create rules with CSS that apply styles conditionally.
  34. 34. Where to learn more Resources for learning CSS
  35. 35. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×