Every Blogger should have a basic understanding of HTML and CSS – at least a little bit. It makes your life so much easier. Here is a quick cheat sheet for your reference. Before we get started just brush up on a few terms and rules that are great to keep in mind when you get started with code. A missed ” or a missed / will make your life miserable. Also – the biggest problem I find if you style code in your posts – is a missing </div> – it will thrown your entire blog design off kilter. Always check for missing or extra </div> as a rule of thumb when you have weird errors.

The 411 on HTML & CSS

  • Every HTML tag will start and end with < >
  • Open Tags: <TAG>
  • To close a Tag: </TAG>
  • Every Attribute will be nestled in “ATT” parentheses
  • All CSS has to be applied to an element (paragraph, span, div etc)
  • There will always be a Property and a Value in CSS – color is the property and red is the value
  • the property always comes first the value follows a colon and ends in a semi-colon: color: red;
  • An inline CSS definition must always be declared with the STYLE attribute and you can use this where ever you want, here is an example of styling a div within your post: [br]
This is my special div box! Create a box like this using the below code.
[br]
<div style=”border: solid 1px #000; padding: 15px; border-radius: 10px; text-align: center;”> This is my special div box! </div>
 [br]

 

 

The HTML & CSS Cheats:

[br]

HTML LINKS

[hr] [br] <a href=”URL”>YOUR TEXT</a> Link

<a href=”mailto:EMAIL”></a> Email Link

<a href=”URL”><img src=”IMAGE URL”></a> Image Link

<a href=”URL” target=”_blank”>YOUR TEXT</a> Link that opens in new window
[br]

COLORS

[hr][br]

Black: #000000

White: #FFFFFF

Yellow: #FFFF00

Magenta: #FF00FF

Orange: #FFA500

Red: #FF0000

Turquoise: #40E0D0

Royal blue: #4169E1

Medium purple: #9370D8

Green: #008000

Blue: #0000FF

Cyan: #00FFFF

 

 [clearboth][br]

Formatting

[br] [hr] [br] <hl>HEADLINE</hl> Headlines use 1 – 6 in order of size

<b>TEXT</b> Bold Text

<strong>TEXT</strong> Bold Text

<i>TEXT</i> Italic Text

<em>TEXT</em> Emphasis Text

<tt></tt> Typerwriter Style Text

<p>TEXT</p> New Paragraph

<p align=?> TEXT </p> Align the paragraph, left, right, center

<blockquote> TEXT </blockquote>  Wraps your text and indents it

<ol>TEXT</ol> Numbered List

<li>TEXT</li> Wraps around the list item within a numbered or bulleted list

<ul>TEXT</ul> Creates a bulleted list

[br][clearboth]

CSS Cheats:

[br]

This is just for inline CSS code all your CSS within a STYLE attribute of a DIV, P or Span tag – for example:

<div style=”border: solid 1px #000; padding: 15px; text-align: center;”> Start it out with the style=”INSERT CSS” within the element of your choice!</div>

 [br]
text-align: center;
text-decoration: underline;
text-shadow: 1px 1px 1px #000;
font-family: fontname;
font-size: 100%;
font-weight: bold;
color: #000000;
width: 200px;
height: 200px;
background-color: #000000;
background-image: url(image.jpg);
background-position: top left;
background-repeat: no-repeat;
border-width: 1px;
border-color: #000;
border-style: solid;
rgab(0,0,0,0.7);
alignment – left | center | right
decoration – none | underline | line-through
Dropshadow on text horizontal, vertical, blur & color
font, name of typeface – Gerogia, Verdana, serif
font size – 12px, 14pt, 100% etc
weight of font – bold, normal, 100 – 800
color of font – hex code, rgba or color name
width of element – 200px | 100% | auto
height of element – 200px | 100% | auto
background color – hex | rgba | color name
Background image, insert URL of image
Position of image vertical / horizontal – % or px or name
Background repeat – no-repeat | repeat | repeat-y | repeat-x
Width of the border in px
Color of Border Hex, Color Name, RGBA
Style of border solid | dashed | none | double | dotted

RGBA property/replace Hex#, Red, Green, Blue & Alpha Transparency

margin: 5px; margin-top: 5px; margin-bottom: 5px;
padding: 5px; padding-top: 5px; padding-bottom: 5px;

[clearboth]  

 [br]

Steal This Code!

[br] [hr] [br] Box with a Shadow:

<div style="font-family: Baskerville, ‘Palatino Linotype’, Palatino, ‘Century Schoolbook L’, ‘Times New Roman’, serif; text-transform: uppercase; text-shadow: 1px 1px 1px rgba(0,0,0,0.55); background-color: rgba(215,215,215,1.00); color: #000; border: 1px solid #040404; box-shadow: 0px 0px 5px rgba(0,0,0,0.40); padding: 20px;"> The wonderful box with a shadow </div>
[br]

Box with Border Radius:

<div style="border-radius: 5px; text-shadow: 1px 1px 1px rgba(0,0,0,0.55); background-color: rgba(215,215,215,1.00); color: #000; border: 1px solid #040404; padding: 20px; "> Box with a Border Radius </div>
[br]

Box with Background Image:

<div style="border-radius: 15px; font-size: 26px; background-color: rgba(215,215,215,1.00); color: #FFF; border: 1px solid #040404; padding: 30px; background-image: url(https://farm8.staticflickr.com/7143/6479091913_52a21c6777_o.png); background-repeat: repeat;"> Box with a Border Radius </div>