CSS Learning Notes

selectors/ Backgrounds/ Borders/ margins/ padding/ Height and Width

CSS Introduction:

• CSS stands for Cascading style sheets
• CSS describes how HTML elements is displayed on screens, paper, or in other media

CSS Syntax

CSS Comments

• A CSS Comment starts with/* and ends with */. Comments can also span multiple lines:

Example

 1   P  { 2   color :  Red ; 3   This is a single-line comment  4  Span style= "color: #ff0000;" > Text-align :  center ; 5 }7  /*   This is  8  a multi-line  9  comment  */ 

CSS Selectors

• The element Selector
• The ID Selector
• The class Selector
• Grouping Selectors

Example

1 /*The element Selector*/2 P{3 text-align:Center;4 Color:Red;5}6 /*The ID Selector*/7 #para1{8 text-align:Center;9 Color:Red;Ten} One /*The class Selector*/ A . Center{ - text-align:Center; - Color:Red; the} - P.center{ - text-align:Center; - Color:Red; +} - /*Grouping Selectors*/ + H1, H2, p{ A text-align:Center; at Color:Red; -}

Three Ways to Insert CSS

• External style Sheet
• Internal style Sheet
• Inline style

CSS Backgrounds

• Background-color
• Background-image
• Background-repeat
• Background-attachment
• Background-position

1> Background Color

A color is very often specified by:

• A HEX value-like "#ff0000"
• An RGB value-like "RGB (255,0,0)"
• A valid color Name-like "red"

2> Background Image

1{2    background-image: url ("bgdesert.jpg");  3 }

3> Background Repeat

Background-repeat:repeat|repeat-x|repeat-y|no-repeat|initial|inherit;

Value	Description	Play It
Repeat	The background image would be repeated both vertically and horizontally. This is default	Play it»
Repeat-x	The background image is repeated only horizontally	Play it»
Repeat-y	The background image is repeated only vertically	Play it»
No-repeat	The background-image is not being repeated	Play it»
Initial	Sets this property to its default value.	Play it»
Inherit	Inherits This property is from its parent element.

4> Background Attachment:

Background-attachment:scroll|fixed|local|initial|inherit;

value	Description
scroll	fixed	the background is fixed with regard to the viewport
local	initial	sets the property to its default value.
inherit

5> Background Position:

Background-position:value;

Property Values:

• [Left/center/right] [Top/center/bottom]
• X y%
• Xpos ypos (any CSS units)
• Initial
• Inherit

6> Background-shorthand Property

1{2    background: #ffffff url ("img_tree.png") No-repeat right top;  3 }

The order of the property values:

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

CSS Borders

1> Border Style

• dotted-Defines a dotted border
• dashed-Defines a dashed border
• solid-Defines a solid border
• double-Defines a double border
• groove-Defines a 3D grooved border. The effect depends on the Border-color value
• ridge-Defines a 3D ridged border. The effect depends on the Border-color value
• inset-Defines a 3D inset border. The effect depends on the Border-color value
• outset-Defines a 3D outset border. The effect depends on the Border-color value
• none-Defines no border
• hidden-Defines a hidden border

Example

1 p.dotted{Border-style:dotted;}2 p.dashed{Border-style:Dashed;}3 P.solid{Border-style:Solid;}4 p.double{Border-style:Double;}5 P.groove{Border-style:Groove;}6 P.ridge{Border-style:Ridge;}7 P.inset{Border-style:inset;}8 P.outset{Border-style:outset;}9 P.none{Border-style:None;}Ten P.hidden{Border-style:Hidden;} One P.mix{Border-style:dotted dashed solid double;}

Result

A dotted border.

A dashed border.

A solid border.

A double border.

A Groove border. The effect depends on the Border-color value.

A Ridge Border. The effect depends on the Border-color value.

An inset border. The effect depends on the Border-color value.

An outset border. The effect depends on the Border-color value.

No border.

A hidden border.

A mixed border.

2> Border Width

• A specific size (in px, pt, cm, EM, etc)
• Three pre-defined values:thin, medium, or thick.

3> Border Color

4> Border-shorthand Property

The property was a shorthand property for the border following individual border properties:

• border-width
• border-style(required)
• border-color

Example

1{2    border: 5px solid red;  3 }

CSS Margins

• The CSS margin properties is used to generate space around elements.
• The margin properties set the size of the transparent space OUTSIDE the border.

Property values

• Auto-the Browser calculates the margin
• length -Specifies a margin in px, pt, CM, etc.
• % -Specifies a margin in% of the width of the containing element
• Inherit-specifies that the margin should is inherited from the parent element

Note: It is also possible to use negative values for margins; to overlap content.

CSS Padding

• The CSS padding properties define the white space between the element content and the element border.
• The padding clears an area around the content (inside the border) of an element.

Property values

• length -Specifies a padding in px, pt, CM, etc.
• % -Specifies a padding in% of the width of the containing element
• Inherit-specifies that the padding should is inherited from the parent elemen

?? Note: the padding is affected by the background color of the element!

CSS Height and Width Dimensions

• The and properties is used to set the height and width of an height width element.

1> width,min-width, max-width

2> Height,min-height,max-height

CSS Learning Notes