david weliver
TRANSCRIPT
![Page 1: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/1.jpg)
CSS for BloggersHow to Make Your Blog Look and Convert Better (Without a Designer)
David Weliver, MoneyUnder30.com
![Page 2: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/2.jpg)
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.
![Page 3: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/3.jpg)
What You Can Do With CSSWith 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.
![Page 4: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/4.jpg)
Why CSS ExistsWithout CSS
You can use HTML tags like <strong> to make font bold or <bgcolor> to set a background color.
But you must insert this code on every page and every time you want to change the format.
This extends the amount of HTML necessary and adds a lot of code to your content.
With CSS
CSS enables you to separate code from content.
CSS saves work: You define a style once, then apply it anywhere its needed.
![Page 5: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/5.jpg)
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:
![Page 6: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/6.jpg)
CSS Syntax
Image source: http://www.w3schools.com/css/css_syntax.asp
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 font-size is 12 pixels.
Now, any text on your blog between the <h1> and </h1> tags will be blue and 12 pixels in size.
![Page 7: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/7.jpg)
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!!
![Page 8: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/8.jpg)
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.
![Page 9: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/9.jpg)
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>
![Page 10: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/10.jpg)
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>
![Page 11: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/11.jpg)
CSS ID and ClassID
Used to define single, unique elements
Defined with a “#”
Class
Used to define groups of elements
Defined with a “.”
#red {font-size: 12px; color: red;}
<div id=“red”>Roth IRA!</div>
.blue {font-size: 12px; color: red;}
<div class=“blue”>Roth IRA!</div>
![Page 12: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/12.jpg)
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>
![Page 13: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/13.jpg)
CSS PropertiesLearning a few common CSS properties will give you lots of control over your site’s appearance.
![Page 14: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/14.jpg)
The CSS Font Property
Font style and size may be defined in a few ways.
The font property can define just the font:
Or additional elements like size:
Or even more elements like style and line height:
p {font: arial,sans-serif;}
p {font: 12px arial,sans-serif;}
p {font: bold 12px/30px arial,sans-serif;}
![Page 15: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/15.jpg)
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;}
![Page 16: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/16.jpg)
LinksApplying 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;}
![Page 17: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/17.jpg)
Margins, Borders & Padding
Margins
Control the outside spacing of an element
Margins are transparent
Padding
Control the inside spacing of an element
Padding shows an element’s background color
![Page 18: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/18.jpg)
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;}
![Page 19: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/19.jpg)
Margins, Borders & Padding
.box {border: 5px solid #000;}
When adding a border, you must define the border size, color, and width. For example:
Looks like this:
.box {border: 1px dashed blue;}
Looks like this:
![Page 20: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/20.jpg)
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;}
![Page 21: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/21.jpg)
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/
![Page 22: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/22.jpg)
Responsive DesignWith CSS, you can improve how your blog appears on mobile devices
![Page 23: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/23.jpg)
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;).
![Page 24: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/24.jpg)
CSS ToolsPrograms and features that make working with CSS easier
![Page 25: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/25.jpg)
Inspect ElementWith 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.
![Page 26: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/26.jpg)
Inspect ElementChrome & Firefox: Right-click on target and click Inspect ElementInternet Explorer: Access the Developer Toolbar (F12) then CTRL+B
![Page 27: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/27.jpg)
Advanced Text EditorsFor Mac: BBEdit (Free trial; $50)www.barebones.com/products/bbedit
For PC: Notepad ++ (Free)http://notepad-plus-plus.org
More: http://sixrevisions.com/web-development/the-15-most-popular-text-editors-for-developers
![Page 28: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/28.jpg)
Experimenting with CSS 1. Create an HTML file with
CSS defined in the <head> section.
2. Code your CSS.
3. View the file in a browser and use Inspect Element to play around.
![Page 29: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/29.jpg)
Cool CSS TricksA few examples of what CSS can do
![Page 30: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/30.jpg)
Rounded CornersUse border-radius: PIXELS;Element does not require a border; will also work with background color.
![Page 31: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/31.jpg)
Gradients
Assigning the liner-gradient() value to the background-image property will display a gradient in newer browsers.
Here’s a generator: www.colorzilla.com/gradient-editor
![Page 32: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/32.jpg)
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.
![Page 33: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/33.jpg)
Conditional Table Rows
Like any programming language, you can create rules with CSS that apply styles conditionally.
![Page 34: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/34.jpg)
Where to learn moreResources for learning CSS
![Page 35: David Weliver](https://reader034.vdocuments.net/reader034/viewer/2022052619/555608c7d8b42ae0238b476c/html5/thumbnails/35.jpg)
CSS ResourcesLearning CSS
W3 Schoolswww.w3schools.com/css
Code Academywww.codecademy.com/courses/css-coding-with-style
HTML Dogwww.htmldog.com/guides/css/beginner
Writing CSS
CSS Validation Servicehttp://jigsaw.w3.org/css-validator
Clean CSS (Code Compression Tool)www.cleancss.com
CSS Generatorhttp://css3generator.com