Selectors/ Backgrounds/ Borders/ Margins/ Padding/ Height and Width

CSS Introduction：

• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in other media

CSS Syntax

CSS Comments

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

Example

  p {

     color: red;

     /* This is a single-line comment */

     text-align: center;

 }

 /* This is

 a multi-line

 comment */ 

CSS Selectors

• The element Selector
• The id Selector
• The class Selector
• Grouping Selectors

Example

 /* The element Selector */

 p {

     text-align: center;

     color: red;

 }

 /* The id Selector */

 #para1 {

     text-align: center;

     color: red;

 }

 /* The class Selector */

 .center {

     text-align: center;

     color: red;

 }

 p.center {

     text-align: center;

     color: red;

 }

 /* Grouping Selectors */

 h1, h2, p {

     text-align: center;

     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 most 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

 body {

     background-image: url("bgdesert.jpg");

 }

3> Background Repeat

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

4> Background Attachment：

background-attachment: scroll|fixed|local|initial|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 body {

     background: #ffffff url("img_tree.png") no-repeat right top;

 }

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

 p.dotted {border-style: dotted;}

 p.dashed {border-style: dashed;}

 p.solid {border-style: solid;}

 p.double {border-style: double;}

 p.groove {border-style: groove;}

 p.ridge {border-style: ridge;}

 p.inset {border-style: inset;}

 p.outset {border-style: outset;}

 p.none {border-style: none;}

 p.hidden {border-style: hidden;}

 p.mix {border-style: dotted dashed solid double;}

Result

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 border property is a shorthand property for the following individual border properties:

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

Example

 p {

     border: 5px solid red;

 }

CSS Margins

• The CSS margin properties are 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 be 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 be inherited from the parent elemen

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

CSS Height and Width Dimensions

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

1> width，min-width，max-width

2> height，min-height，max-height