list

TOP RIGHT SQUARE CORNER

This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.

TOP LEFT SQUARE CORNER

This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.

BOTTOM RIGHT SQUARE CORNER

This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.

BOTTOM LEFT SQUARE CORNER

This is the place to put your descriptive text. The three curved corners and one square corner box requires no extra markup, just a standard definition list with three background images.


Default font families Adobe Dreamweaver cc styles

  • ‘Franklin Gothic Bold’, ‘Arial Black’, Gadget, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "'Franklin Gothic Bold', 'Arial Black', Gadget, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


  • Cambria, ‘Hoefler Text’, ‘Liberation Serif’, Times, ‘Times New Roman’, serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Constantia, ‘Lucida Bright’, ‘DejaVu Serif’, Georgia, serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Baskerville, ‘Palatino Linotype’, Palatino, ‘Century Schoolbook L’, ‘Times New Roman’, serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, ‘DejaVu Sans Condensed’, Helvetica, Arial, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Gotham, ‘Helvetica Neue’, Helvetica, Arial, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, ‘DejaVu Sans’, Verdana, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Segoe, ‘Segoe UI’, ‘DejaVu Sans’, ‘Trebuchet MS’, Verdana, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Impact, Haettenschweiler, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Impact, Haettenschweiler, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Consolas, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, Monaco, ‘Courier New’, monospace
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • Franklin Gothic Bold’, ‘Arial Black’, Gadget, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "Franklin Gothic Bold', 'Arial Black', Gadget, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  • ‘HelveticaNeue-Light’, ‘Helvetica Neue Light’, ‘Segeo UI Light’, Avenir light, sans-serif
  • ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
  • p {
    font-family: "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Segeo UI Light', Avenir light, sans-serif;
    }
  • Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Font2

Franklin Gothic Bold’, ‘Arial Black’, Gadget, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Franklin Gothic Bold', 'Arial Black', Gadget, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Cambria, ‘Hoefler Text’, ‘Liberation Serif’, Times, ‘Times New Roman’, serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Cambria, 'Hoefler Text', 'Liberation Serif', Times, 'Times New Roman', serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Constantia, ‘Lucida Bright’, ‘DejaVu Serif’, Georgia, serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Constantia, 'Lucida Bright', 'DejaVu Serif', Georgia, serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Baskerville, ‘Palatino Linotype’, Palatino, ‘Century Schoolbook L’, ‘Times New Roman’, serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, ‘DejaVu Sans Condensed’, Helvetica, Arial, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Gill Sans', 'Gill Sans MT', 'Myriad Pro', 'DejaVu Sans Condensed', Helvetica, Arial, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Gotham, ‘Helvetica Neue’, Helvetica, Arial, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, ‘DejaVu Sans’, Verdana, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', 'DejaVu Sans', Verdana, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Segoe, ‘Segoe UI’, ‘DejaVu Sans’, ‘Trebuchet MS’, Verdana, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Impact, Haettenschweiler, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Impact, Haettenschweiler, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Consolas, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, Monaco, ‘Courier New’, monospace

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Consolas, 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', Monaco, 'Courier New', monospace;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Franklin Gothic Bold’, ‘Arial Black’, Gadget, sans-serif

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "Franklin Gothic Bold', 'Arial Black', Gadget, sans-serif;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

‘HelveticaNeue-Light’, ‘Segeo UI Light’, Avenir light,

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
p {
    font-family: "'HelveticaNeue-Light', 'Helvetica Neue Light', 'Segeo UI Light', Avenir light, sans-serif; font-weight:100;;
}
Lorem ipsum dolor sit amet, consectetur adipisici elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Fonts


Cambria, ‘Hoefler Text’, ‘Liberation Serif’, Times, ‘Times New Roman’, serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Constantia, ‘Lucida Bright’, ‘DejaVu Serif’, Georgia, serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Baskerville, ‘Palatino Linotype’, Palatino, ‘Century Schoolbook L’, ‘Times New Roman’, serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


‘Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, ‘DejaVu Sans Condensed’, Helvetica, Arial, sans-serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Gotham, ‘Helvetica Neue’, Helvetica, Arial, sans-serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘Lucida Sans’, ‘DejaVu Sans’, Verdana, sans-serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Segoe, ‘Segoe UI’, ‘DejaVu Sans’, ‘Trebuchet MS’, Verdana, sans-serif;

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Impact, Haettenschweiler, sans-serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Consolas, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, Monaco, ‘Courier New’, monospace

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


‘Franklin Gothic Bold’, ‘Arial Black’, Gadget, sans-serif

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz



Helvetica Neue Light’, ‘Segeo UI Light’, Avenir light

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Helvetica Neue Thin’, ‘Segeo UI Light’, Avenir light

ABCDEFGHIJKLMNOPQRST
abcdefghijklmnopqrstuvwxyz


Post div inside WordPress post

width, height, float, display, margin

Reference Article w3.org
Reference Article for rounded corners
Backgrounds and Borders Specification W3C

<div style="width: 200px;
	height: 200px;
    padding: 9.5px;
    border: 1px solid #CCC;
    margin: 0px 0px 10px;
float: left;
    display: block;
    background-color: #d3d3d3;
    border-radius: 4px;
    box-shadow: 3px 3px 5px; #000;"></div>


Box with a Gradiant, Text drop shadow and box drop shadow
<div style="width: 150px;
height: 100px;
padding:20px;
border: solid 10px #C3DEF0;
color: white;
text-align:center;
text-shadow: 2px 2px 2px black;
background: -webkit-linear-gradient( #C3DEF0, #6B87A1);
border-radius: 10px;
box-shadow: 5px 5px 5px #c2c2d6">Box with a Gradiant, Text drop shadow and box drop shadow</div>


Box with individual corner radius
 <div style="width: 150px;
	height: 45px;
	padding:20px;
	color: white;
	text-align:center;
	text-shadow: 2px 2px 2px black;
	background: -webkit-linear-gradient( #C3DEF0, #6B87A1);
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	box-shadow: 5px 5px 5px #c2c2d6;
	float: left;">Box with individual corner radius </div>
<hr>

<div style="width: 100px; height: 100px;
	border: 12px solid blue; background-color: orange;
	border-top-left-radius: 60px 90px;
	border-bottom-right-radius: 60px 90px;
	box-shadow: 64px 64px 12px 40px rgba(0,0,0,0.4),
            12px 12px 0px 8px rgba(0,0,0,0.4) inset;
            float: left;
            "></div>

Margin, Border, Padding, Content

Margin, Border, Padding, Content
Margin, Border, Padding, Content


float: none, left, right, initial or inherit

Reference Article w3.org

img  {
    float: right;
}
Value Description Play it
none The element is not floated, and will be displayed just where it
occurs in the text. This is default
Play it »
left The element floats to the left Play it »
right The element floats the right Play it »
initial Sets this property to its default value. Read about initial Play it »
inherit Inherits this property from its parent element. Read about inherit

10-css-selectors-you-shouldnt-code-without

Link

*
The * selector may be the one you remember most easily but it’s often underused. What it does is style everything on the page and it’s great for creating a reset and also for creating some page defaults like the font family and size you wish to have.

* { margin: 0; padding: 0; font-family: helvetica, arial, sans-serif; font-size: 16px; }

A + B
This selector is called an adjacent selector and what it does is selects the element that is immediately after the first element. If you wanted to select the first div after our header you would type:

header + div { margin-top: 50px; }

A > B
This selector will only select the direct children unlike A B that will select any level children of A. This selector is recommended for when you are working with first level children of a parent element. For example if you want to select the first level list items in an unordered list that looks like this:

<ul> <li>List Item With ul <ul> <li>Sub list item</li> <li>Sub list item</li> <li>Sub list item</li> </ul> </li> <li>List Item</li> <li>List Item</li> </ul>

You would use this selector because the usual A B selector will also selected the list items inside the nested unordered list

ul > li { background: black; color: white; }

A[HREF*=”EXAMPLE”]
This is a really good selector for when you want to style a particular link in a different way, whatever is in quotes will be matched against the href of the link. For example to style all links to facebook with the color blue you would use:

a[href*="facebook"] { color: blue; }

There is also a version without the * that matches the exact url that you can use for exact links.

A:NOT(B)
This selector if particularly useful because of it’s negation clause that allows you to select any group of elements that do not match what you place in B. If you want to select every div except the footer you just need:

div:not(.footer) { margin-bottom: 40px; }

A:FIRST-CHILD / A:LAST-CHILD
The first-child and last-child allow us to select the first and last child of the parent element. This can be a great help when it comes to list items and removing the margin-right or borders. To remove the border in the first list item and the margin in the last list item you need:

ul li:first-child { border: none; } ul li:last-child { margin-right: 0px; }

A:NTH-CHILD(N)
The nth-child is a simple way for you to select any child of an element by its order. If for example you wanted the third list item in an unordered list this would be the way to go:

ul li:nth-child(3) { background: #ccc; }

We can use nth-child to select every multiplier of a number by using the variable n , for example if we put 3n it would select the list item number 3, 6, 9, 12 and so forth.

A:NTH-LAST-CHILD(N)
The nth-last-child works like the nth-child but instead of counting form the first list item it starts counting from the last , so if you use it with the number two it will select the list item that comes before the last one and its usage is just like the nth-child selector:

ul li:nth-last-child(2) { background: #ccc; }

A:NTH-OF-TYPE(N)
This selector does exactly what you think it does; it sees what type of element you placed on it and it selects, for example, the third element on your page that matches what you typed. For selecting the third paragraph in a div you would use:

div p:nth-of-type(3) { font-style: italic; }

A:VISITED
Ever noticed that when you search for something on google the pages you have already seen appear in a different color ? That is exactly what visited does. This is a great addition for the users but it’s sometimes forgotten and by my experience it’s comes in handy every time I search google.

a:visited { color: blue; }

FINAL THOUGHTS
In my experience using these kinds of selectors when coding can save us a lot of time and also avoid the need for a lot of ID’s cluttering up our markup. And this is just the beginning of CSS selectors, there are plenty more selectors that are really handy but sometimes forgotten.


Codes for WordPress postings

WordPress.com allows the following HTML code in your posts, pages, and widgets:

Link to article


address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var

Tag Discribtion
address Contact information
a The <a> tag defines a hyperlink, which is used to link from one page to another.
abbr
acronym
area
article
aside
b
big
block quote
br
caption
cite
class
code
col
del
details/td>

dd
div
dl
dt
em
figure
figcaption
footer
font
h1
h2
h3
h4
h5
h6
header
hgroup
hr
i
img
ins
kbd
li
map
ol
p
pre
q
s
section
small
span
strike
strong
sub
summary
sup
table
tbody
td
tfoot
th
thead
tr
tt
u
ul
var