Everything (or almost everything) you need to know to get started with CSS

I decided to revive this post taken from my old blog and put it here. It's always good to have a guide for all the times that agent forgets something in the style sheets.

So let's get to work!

Style sheets can be linked to a document in three ways:

1. Imported or damage occurs;
2. Incorporated;
3. Inline.

External style sheet

A stylesheet is said outside, when CSS rules are declared in a document in the document HTML . The stylesheet is a separate file and html file that has the extension. Css

An external style sheet is ideal to be applied to multiple pages. With an external style sheet, you can change the look of an entire site by changing just one file (the file of the style sheet).

The css file of the external style sheet to be imported or otherwise linked to the HTML document inside the <> tag of the document. Syntax general to link a style sheet called estilo.css is shown below:

The syntax for importing a style sheet called estilo.css is shown below:

The browser reads the style rules estilo.css file and format the document accordingly.

An external style sheet can be written in any text editor. The file should not contain any HTML tags. Style sheets must be "saved" with a. Css
Embedded style sheet or internal

A style sheet is said to be embedded or internal, when CSS rules are declared in the HTML document itself.

An embedded style sheet or internal, is ideal for application as a single page. With an embedded style sheet or internal, you can change the appearance of only one document, one where the stylesheet is incorporated.

The style rules are valid for the document, are declared in the <> section of the document with the style tag <> syntax as shown below:

The browser will read now the style rules on its own page, and format the document accordingly.

Note: A browser normally ignores unknown tags. This means that an old browser that does not support style, ignore the tag, but the contents of the tag will be displayed on the screen. You can prevent an old browser shows the contents

Tag, "hiding it" through the use of HTML markup comment.

Note the inclusion of the symbols (closes comment) in the above code.
Stylesheet Inline

A style sheet is said to inline when CSS rules are declared within the tag of the HTML element.

An inline style applies only to an HTML element. He loses many of the advantages of style sheets because it mixes content with presentation. Use this method in exceptional cases, like when you want to apply a style to a single occurrence of an element.

The syntax to apply inline style is shown below:

Now, the most important properties of CSS:

The property font

The properties for the sources, define the characteristics (values in CSS rule) of the letters that constitute the text within the HTML elements.

The basic properties and sources that discuss this tutorial are listed below:

* Color: ... ... ... ... ... .... Font color
* Font-family: ... ... .... Font
* Font-size: ... ... ... .... Font size
* Font-style: ... ... ... ... font style
* Font-variant: ... ... ... sources case of smaller size
* Font-weight: ... ... ... the darker the source is (bold)
* Font: ... ... ... ... ... ... .. shorthand way for all properties

Valid values for the source properties

* Color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. color name: red, blue, green ... etc
* Font-family:
1. family-name: is defined by source name,
p. eg "verdana", "Helvetica", "Arial", etc..
2. generic-family: is defined by the generic name,
p. eg "serif", "sans-serif", "cursive", etc..
* Font-size:
1. xx-small
2. x-small
3. small
4. medium
5. large
6. x-large
7. xx-large
8. smaller
9. larger
10. length: a measure recognized by CSS (px, pt, em, cm, ...)
11. %
* Font-style:
1. normal: normal font vertically
2. italic: source leaning
3. oblique: source obliqua
* Font-variant:
1. normal: normal font
2. Small-caps: uppercase transforms of smaller size
* Font-weight:
1. normal
2. bold
3. bolder
4. lighter
5. 100
6. 200
7. 300
8. 400
9. 500
10. 600
11. 700
12. 800
13. 900

The text property

At text, defining the characteristics (values in CSS rule) of the text inserted into the HTML elements.

The properties for the text are listed below:

* Color ... ... ... ... ... ... ... color of the text;
* Letter-spacing ... ... .. letter spacing;
* Word-spacing ... ... ... spacing between words;
* Text-align ... ... ... ... .. text alignment;
* Text-decoration decoration of the text ... ...;
* Text-indent ... ... ... ... retreat from the text;
* Text-transform .... ... Shape of the letters;
* Direction ... ... ... ... ... direction of the text;
* White-space ... ... ... how the browser handles the blanks;
Valid values for the properties of text

* Color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. color name: red, blue, green ... etc
* Letter-spacing:
1. Normal: the default spacing
2. lenght: a measure recognized by CSS (px, pt, em, cm, ...) are valid negative values
* Word-spacing:
1. Normal: the default spacing
2. lenght: a measure recognized by CSS (px, pt, em, cm, ...) are valid negative values
* Text-align:
1. left: align text to the left
2. right: align text to right
3. center: align text in the center
4. justify: force the text to occupy the entire length of the line from left to right
* Text-decoration:
1. none: no decoration
2. underline Puts underlined in the text
3. overline: puts an overline in the text
4. line-through: places a line over the text
5. blink: makes text blink
* Text-indent:
1. lenght: a measure recognized by CSS (px, pt, em, cm, ...)
2. %: Percentage of the width of the parent element
* Text-transform:
1. none: normal text
2. capitalize: all the first letters of the text to uppercase
3. uppercase: all the letters in uppercase text
4. lowercase: all letters of the text to lowercase
* Direction:
1. ltr: text written from left to right
2. rtl: text written from right to left
* White-space:
1. normal: the blanks are ignored by the browser
2. pre: the blanks will be preserved by the browser
3. nowrap: text will be shown all of it in a single line on the screen. There is no line break is found by a tag <>

The margin property

The property to the banks, you set a value for the thickness of the margins of HTML elements.

The properties for margins are listed below:
* Margin-top ... ... .... Sets the top margin;
* Margin-right ... ... .. sets the right margin;
* Margin-bottom ... .... Sets the bottom margin;
* Margin-left ... ... ... sets the left margin;
* Margin ... ... ... ... .. shorthand way to all banks

Valid values for property margin

1. auto: defaults margin
2. length: a measure recognized by CSS (px, pt, em, cm, ...)
3. %: Percentage of the width of the parent element

The border property

The properties for the edges, define the characteristics (values in CSS rule) of the four edges of an HTML element.

The properties for the edges are listed below:

* Border-width: ... ... ... ... .... Thickness of the border
* Border-style: ... ... ... ... .... Style of the border
* Border-color: ... ... ... ... .... Color of the border
* --------------
* Border-top-width: ... ... ... ... thickness of the top edge
* Border-top-style: ... ... ... ... style of the top edge
* Border-top-color: ... ... ... ... color of the top edge
* --------------
* Border-right-width: ... ... ... thickness of the right edge
* Border-right-style: ... ... .... The right edge style
* Border-right-color: ... ... .... Color of right border
* --------------
* Border-bottom-width: ... ... ... thickness of the bottom edge
* Border-bottom-style: ... ... ... style of the bottom edge
* Border-bottom-color: ... ... ... color of the bottom edge
* --------------
* Border-left-width: ... ... ... .. thickness of the left edge
* Border-left-style: ... ... ... .. from the left edge style
* Border-left-color: ... ... ... .. color of the left edge
* --------------
* Border-top: ... shorthand for all the properties of the upper edge
* Border-right: .. shorthand way for all properties from the right edge
* Border-bottom: .. shorthand way for all properties from the lower edge
* Border-left: .. shorthand way for all properties from the left edge
* Border: ... ... ... shorthand for all four edges

Valid values for the properties of the edges

* Color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. color name: red, blue, green ... etc
* Style:
1. none: no border
2. hidden: equivalent to none
3. dotted: dotted border
4. dashed: dashed border
5. Solid: Solid Edge
6. double: double border
7. groove: edge notched
8. ridge: border bounce
9. inset: edge in low relief
10. outset: edge embossed
* Width:
1. thin: thin edge
2. medium: average edge
3. thick: thick edge
4. length: a measure recognized by CSS (px, pt, em, cm, ...)

The padding property

Property for spacing (some translate it as "filler"), sets a value for the spacing between the content and the borders of HTML elements.

The properties for spacings are listed below:

* Padding-top ... ... .... Defines the spacing higher;
* Padding-right ... ... .. sets the spacing right;
* Padding-bottom ... .... Defines the spacing below;
* Padding-left ... ... ... sets the spacing left;
* Padding ... ... ... ... .. shorthand way for all the spacings
Valid values for the properties of spacing

1. auto: defaults margin
2. length: a measure recognized by CSS (px, pt, em, cm, ...)
3. %: Percentage of the width of the parent element

The background property

The background property sets the characteristics (values in CSS rule) from the bottom of the HTML elements.

The background properties are listed below:

* Background-color ... ... ... ... ... background color;
* Background-image ... ... ... .... background image;
* Background-repeat ... ... ... .... how the background image is positioned;
* Background-attachment ... .... If the background image "rolls" or not to screen;
* Background-position ... ... ... ... how and where the background image is positioned;
* Background ... ... ... ... ... ... ... ... shorthand way for all properties;

Valid values for the background properties

* Background-color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. color name: red, blue, green ... etc
4. Transparent: transparent
* Background-image:
1. URL: url (path / image.gif)
* Background-repeat:
1. does not repeat: no-repeat
2. vertical and horizontal repeats: repeat
3. vertical repeat: repeat-y
4. Horizontal repeat: repeat-x
* Background-attachment:
1. image on the screen: fixed
2. picture "rolls" with the screen scroll
* Background-position:
1. x-pos y-pos
2. x-% y-%
3. top left
4. top center
5. top right
6. center left
7. center center
8. center right
9. bottom left
10. bottom center
11. bottom right

Property list

The property list defining characteristics (values) of HTML lists.

List the properties are listed below:

* List-style-image ... ... ... .... image as a marker of the list;
* List-style-position ... ... .... Where the marker is placed on the list;
* List-style-type ... ... ... ... ... kind of marker in the list;
* List-style ... ... ... ... ... ... ... ... shorthand way for all properties;

Valid values for the properties of the list

* List-style-image:
1. none
2. URL: url (path / marcador.gif)
* List-style-position:
1. outside: off-label text alignment
2. inside: marker aligned with text
* List-style-type:
1. none: no marker
2. Talk: circle (filled dot)
3. circle circumference (empty dot)
4. square: square full
5. decimal: 1, 2, 3, 4, ...
6. decimal-leading-zero
7. lower-roman: roman lowercase i, ii, iii, iv, ...
8. upper-roman: roman capital I, II, III, IV, ...
9. lower-alpha: lowercase a, b, c, d, ...
10. upper-alpha: uppercase A, B, C, D, ...
11. lower-greek
12. lower-latin
13. upper-latin
14. Hebrew
15. Armenian
16. Georgian
17. cjk-ideographic
18. hiragana
19. katakana
20. hiragana-iroha
21. katakana-iroha

BONUS!

POSITION

The POSITION attribute can receive three values:

* Absolute: it is the only one that allows the overlapping layers and with it you determine a position on the page you've created and ready. Absolute positioning;
* Relative: This value defines that the text will have positions for the remainder of the page, and thus it can not overlap, but is still able to recognize some interesting attributes. Relative positioning;
* Estatic: determines that it will not recognize any special position determined by the control layers. Static positioning.

LEFT

Sets the distance that the layer will be the left edge of the browser or the parent element. Can take the absolute values, relative or auto (auto).

Note: absolute values accept values in accordance with the definition of the formats described in "size formats."
RIGHT

Sets the distance that the layer will have the right edge of the browser or the parent element. Can take the absolute values, relative or auto (auto).

Note: absolute values accept values in accordance with the definition of the formats described in "size formats."
TOP

Sets the distance that the layer will have the top of the browser or the parent element. Can take the absolute values, relative or auto (auto).

Note: absolute values accept values in accordance with the definition of the formats described in "size formats."
Botom

Sets the distance that the layer will have the bottom of the browser or the parent element. Can take the absolute values, relative or auto (auto).

Note: absolute values accept values in accordance with the definition of the formats described in "size formats."

Z-INDEX

Determines the stacking order of elements. Accepts the value auto (auto) and number, where the higher the value, the higher layer.

VISIBILITY

This style is used to hide an element. An invisible element still occupies space on the page. Valid values are: visible (visible), hidden (occult) and inherit (inherits the attribute of the top layer, standard).

OVERFLOW

Determines how it will behave the layer content when their limits are lower than its content. Valid values are: visible (visible, resize the layer to display its content), hidden (occult, ignores the contents over the layer), scroll (the scroll bar displays the layer) and self (displays the scroll bar to layer if necessary.)

DISPLAY

Identifies when and if an element should be displayed:

* Block: as a block, with line breaks before and after the element. Creates a new box for items around (default);
* Inline: no line break before and after the element;
* List-item has the same block, except that a list-item marker is added;
* None: it is invisible and does not occupy space on the page. Disables the presentation of the element in any situation, including the secondary elements.

later I'll do a post on CSS 3 and its innovations.

Tags: css