1.The 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 CSSbox model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content.
The box model allows us to place a border around elements and space elements in relation to other elements.
2.Border
A border that goes around the padding and content. The border is affected by the background color of the box
The border-width property is used to set the width of the border.
The width is set in pixels, or by using one of the three pre-defined values: thin, medium, or thick.
Border Properties
border-top *border-bottom *border-right *border-left *border-color *border-top-color
border-right-color*border-bottom-color*border-left-color*border-style *border-top-style*
border-right-style*border-bottom-style*border-left-style*border-width *border-top-width
border-right-width*border-bottom-width*border-left-width.
3.Padding
Clears an area around the content. The padding is affected by the background color of the box
Padding Properties
padding:10px 5px 15px 20px;
top padding is 10px
right padding is 5px
bottom padding is 15px
left padding is 20px
padding:10px 5px 15px;
top padding is 10px
right and left padding are 5px
bottom padding is 15px
padding:10px 5px;
top and bottom padding are 10px
right and left padding are 5px
padding:10px;
all four paddings are 10px
4.Margin
Clears an area around the border. The margin does not have a background color, it is completely transparent
5.Ordered List
the list items are marked with numbers or letters
6.Unordered List
the list items are marked with bullets
7.Link
The link tag defines the relationship between a document and an external resource.
The link tag is most used to link to style sheets.
8.Backgroun Image
The background-image property sets the background image for an element.
The background of an element is the total size of the element, including padding and border (but not the margin).
By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
9.Navigation Bars
There are two ways to create a horizontal navigation bar. Using inline or floating list items.
Both methods work fine, but if you want the links to be the same size, you have to use the floating method.
10.Horizontal Navigation Bar
One way to build a horizontal navigation bar is to specify the list elements as inline
11.Font Properties
CSS font properties define the font family, boldness, size, and the style of a text.
12.Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. Comments are ignored by browsers.
A CSS comment begins with “/*”, and ends with “*/”
13.ID Selectors
ID selectors work like class selectors, except that they can only be used on one element per page.
14.Display Property
CSS allows you to control how a given element is displayed. In particular, whether it is rendered as a block or inline element.
EXAMPLE:
inline :Inline display (horizontally layed out)
block :Block display (vertically layed out)
list-item :Display as a list item
none :No box; element has no effect on layout
dinherit :Inherit value from parent
15.Div Tag
The div tag is a generic way of adding structure to a HTML document. The most important thing to remember is that it is a block-level element.
16.Float
The float property controls where block-level elements are positioned, as well as which way other elements are placed in relation to them.
17.Visibility
The visibility property controls whether or not an element is rendered.
EXAMPLES:
visible: The generated box is visible
hidden: The generated box is invisible, but still effects layout
18.Background Repetition
CSS offers fine grain control over how the background is displayed. With the background-repeat property, you can specify how the background should repeat (if at all) to cover the entire viewing area.
EXAMPLE:
repeat Repeat the background (default)
repeat-x Repeat the background horizontally only
repeat-y Repeat the background vertically only
no-repeat Don’t repeat the background at all
inherit Inherit parent’s repeat setting
19.Hover
The :hover selector is used to select elements when you mouse over them.
20.Aligning Text
CSS also supports horizontally aligning and justifying text.
left: Left align text
right: Right align text
center: Center align text
justify: Double justify text