CSS BASICS PART I

CSS Selectors

CSS selectors are used to "find" (or select) the HTML elements you want to style.

Selector                    Example      Description

#id                            #firstname     Selects the element with id="firstname"

.class                  .intro              Selects all elements with class="intro"

element.class          p.intro            Selects only <p> elements with class="intro"

*                          *                Selects all elements

element                  p                 Selects all <p> elements

element,element,.. div, p        Selects all <div> elements and all <p> elements

CSS Backgrounds

The CSS background properties are used to add background effects for elements.

background-color

background-image

background-repeat

background-attachment

background-position

background (shorthand property)

CSS background-repeat

By default, the background-image property repeats an image both horizontally and vertically.

CSS background-position

The background-position property is used to specify the position of the background image.

Example:

Position the background image in the top-right corner:

body {

  background-image: url("img_tree.png");

  background-repeat: no-repeat;

  background-position: right top;

}

CSS background-attachment

The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page)

Use the shorthand property to set the background properties in one declaration:

body {

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

}

When using the shorthand property the order of the property values is:

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

CSS Border Style

The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border

dashed - Defines a dashed border

solid - Defines a solid border

double - Defines a double border

none - Defines no border

hidden - Defines a hidden border

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 Rounded Borders

The border-radius property is used to add rounded borders to an element.

CSS Margins

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

margin-top

margin-right

margin-bottom

margin-left

All the margin properties can have the following 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

 

Margin Collapse

Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two margins.

This does not happen on left and right margins! Only top and bottom margins!

CSS Padding

The CSS padding properties are used to generate space around an element's content, inside of any defined borders.

CSS has properties for specifying the padding for each side of an element:

padding-top

padding-right

padding-bottom

padding-left

All the padding properties can have the following 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 element

CSS Outline

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

CSS has the following outline properties:

outline-style

outline-color

outline-width

outline-offset

outline

Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

CSS Outline Style

The outline-style property specifies the style of the outline, and can have one of the following values:

dotted - Defines a dotted outline

dashed - Defines a dashed outline

solid - Defines a solid outline

double - Defines a double outline

none - Defines no outline

hidden - Defines a hidden outline

The outline property is a shorthand property for setting the following individual outline properties:

outline-width

outline-style (required)

outline-color

Example: 

p.ex3 {outline: 5px solid yellow;}

Text Alignment

• The text-align property is used to set the horizontal alignment of a text.
• A text can be left or right aligned, centered, or justified.
• When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight.

Text Properties

• The text-decoration property is used to set or remove decorations from text.
• The value text-decoration: none; is often used to remove underlines from links:
• The text-indent property is used to specify the indentation of the first line of a text:
• The letter-spacing property is used to specify the space between the characters in a text.
• The line-height property is used to specify the space between lines:
• The word-spacing property is used to specify the space between the words in a text.
• The white-space property specifies how white-space inside an element is handled.
• The text-shadow property adds shadow to text.

This example demonstrates how to disable text wrapping inside an element:

Example:

p {

  white-space: nowrap;

}

h1 {

  text-shadow: 2px 2px 5px red; /*--here 5px is blur value--*/

}

CSS Fonts

The font property is a shorthand property for:

font-style

font-variant

font-weight

font-size/line-height

font-family

Example:

p.b {

  font: italic small-caps bold 12px/30px Georgia, serif;

}