Rounded corner
.corner { background: #green; width: 300px; height: 100px border: 5px solid #222; border-radius: 20px; } <div class="corner"></div>
Images can be incorporated into your website in various way. They can be aligned and floated to allow the images to be placed in particular location in the page. How you want to display the images will determine whether you will align or float the image.
Aligned images
do not wrap text around them. Aligning images will only position the image left, right, or center with the text following before and after the image. Aligning leaves quite a bit of white space on your site.
A floated image
will allow the text to wrap around the image like a regular book or newspaper would do. Images can also be floated so they appear horizontally on your site. This is good for displaying images like a gallery.
CSS Pseudo Elements
selector:pseudo-element {property: value} p{font-size: small;} p:first-line {font-size: medium; color: #ff0000;}
Type selectors
target elements by their element type. div { ... }
Class selectors
allow us to select an element based on the elements class attribute value.
awesome { ... }
ID selectors
are even more precise than class selectors, as they target only one unique element at a time.
idsel { ... }
Links without border
<style type="text/css"> a {
text-decoration: none;
} a:link { color: #000099; } a:visited { color: #000099; } </style>
Setting height and width
The height and width properties are used to set the height and width of an element. The height and width can be set to auto, or be specified in length values, like px, cm, etc., or in percent (%) of the containing block. Recommended ccs units are: em, px, % for use on screens. div { width: 500px; height: 100px; }

Inline does just what it says -
boxes that are displayed inline follow the flow of a line.


block makes a box standalone, fitting the entire width of
its containing box, with an effective line break before and after it.
doesn’t display a box at all.

display: inline;
display: block;
display: none;

The CSS Box Model

All HTML elements can be considered as boxes.
In CSS, the term "box model" is used when talking about design and layout.

The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders, padding, and the actual content.

box model

Group selectors

To group selectors, separate each selector with a comma.
h1, h5, p
text-align: center;
color: green;
The clearfix - overflow: auto; If an element is taller than the element containing it, and it is floated, it will overflow outside of its container. Then we can add overflow: auto; to the containing element to fix this problem: Example .clearfix { overflow: auto; }