All (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 every time you forget something in the agent style sheets.

So let's get to work!

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

1. Linked or imported;
2. Incorporated;
3. Inline.

External style sheet

A style sheet is said outside, when CSS rules are declared in a document in the document HTML . The stylesheet is a separate file and html file 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 appearance of an entire site by changing just one file (the file of the style sheet).

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

The general syntax to import a style sheet called estilo.css is shown below:

The browser will read the rules file estilo.css style, 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 called embedded or internal, when CSS rules are declared in the HTML document itself.

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

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

The browser will now read the style rules in the page itself, and format the document accordingly.

Note: A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the tag, but the contents of the tag will be shown on the screen. You can prevent an old browser to show content

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

Note the inclusion of symbols (close comment) in the above code.
Inline style sheet

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

An inline style only applies to an HTML element. He loses many of the advantages of style sheets for mixing 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 the 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 sources and will be addressed in this tutorial are listed below:

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

Valid values ​​for the properties of the source

* Color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. name of the color red, blue, green etc. ...
Font-family:
1. family-name: is defined by the font name,
P. ex: "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, in, cm, ...)
11. %
Font-style:
1. normal: normal font vertically
2. italic: sloping fountain
3. oblique: oblique source
Font-variant:
1. normal: normal font
2. small-caps: capital letters turned into lower height
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, define the characteristics (values ​​in CSS rule) of the input text 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 text-decoration ... ...;
* Text-indent ... ... ... ... indentation of text;
* Text-transform ... .... Shape of the letters;
* Direction ... ... ... ... ... direction of the text;
* White-space ... ... ... how the browser treats the blanks;
Valid values ​​for the properties of the text

* Color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. name of the color red, blue, green etc. ...
* Letter-spacing:
1. normal: it is the default spacing
2. length: a measure recognized by CSS (px, pt, in, cm, ...) are valid negative values
* Word-spacing:
1. normal: it is the default spacing
2. length: a measure recognized by CSS (px, pt, in, cm, ...) are valid negative values
* Text-align:
1. left: align text left
2. right: align text to right
3. center: aligns the text in the center
4. justify: text forces to occupy the entire length of the line from left to right
* Text-decoration:
1. none: no decoration
2. underline: underline places in the text
3. overline: overline a place in the text
4. line-through: put a line over the text
5. Blink: the text is blinking
* Text-indent:
1. length: a measure recognized by CSS (px, pt, in, 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 letters of the text to uppercase
4. lowercase: all lowercase letters of the text
* 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 browser
3. nowrap: text will be shown all of it on a single line on the screen. There are no line breaks to be found a tag <>

The margin property

The property for banks, sets a value for the thickness of the edges 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 for all banks

Valid values ​​for margin property

1. auto: default value of the margin
2. length: a measure recognized by CSS (px, pt, in, 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 borders 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: ... ... ... ... .... Border color
* --------------
* Border-top-width: ... ... ... ... thickness of the upper edge
* Border-top-style: style ... ... ... ... from the top edge
* Border-top-color: ... ... ... ... color of the upper edge
* --------------
* Border-right-width: ... ... ... thickness of the right edge
* Border-right-style: ... ... .... The right edge of style
* Border-right-color: ... ... .... Right border color
* --------------
* Border-bottom-width: ... ... ... thickness of the bottom edge
* Border-bottom-style: style ... ... ... from the bottom edge
* Border-bottom-color: ... ... ... color of the bottom edge
* --------------
* Border-left-width: ... ... ... .. thickness of the left edge
* Border-left-style: style ... ... ... .. from the left edge
* Border-left-color: ... ... ... .. left border color
* --------------
* Border-top: ... shorthand for all the properties of the upper edge
* Border-right: .. shorthand for all properties from the right edge
* Border-bottom: .. shorthand for all the properties of the bottom edge
* Border-left: .. shorthand for all properties from the left edge
* Border: ... ... ... shorthand way to all four edges

Valid values ​​for the properties of edges

* Color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. name of the color 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, notched edge
8. ridge, ledge ledge
9. inset: edge in low relief
10. outset: edge embossed
* Width:
1. thin: thin edge
2. medium: medial edge
3. thick: thick border
4. length: a measure recognized by CSS (px, pt, in, cm, ...)

The padding property

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

Properties for spacings are listed below:

* Padding-top ... ... .... Sets the padding-top;
* Padding-right ... ... .. defines the spacing right;
Padding-bottom * ... .... Defines the lower spacing;
* Padding-left ... ... ... sets the spacing left;
* Padding ... ... ... ... .. shorthand for all the spacings
Valid values ​​for the properties of spacing

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

The background property

The background property defines 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" to the screen or not;
* Background-position ... ... ... ... how and where the background image is positioned;
* Background ... ... ... ... ... ... ... ... shorthand for all properties;

Valid values ​​for the properties of the background

* Background-color:
1. hex code: # FFFFFF
2. rgb code: rgb (255,235,0)
3. name of the color 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 repeat: repeat
3. Vertical repeat: repeat-y
4. Horizontal repeat: repeat-x
* Background-attachment:
1. image on the screen: fixed
2. picture "rolls" to 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

The property list

The property list defines the characteristics (values) of HTML lists.

The list 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 bookmark from the list;
* List-style ... ... ... ... ... ... ... ... shorthand 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: outside the label text alignment
2. inside: a marker line with text
* List-style-type:
1. none: no marker
2. Talk: circle (filled ball)
3. circle: circle (ball empty)
4. square, solid square
5. decimal: 1, 2, 3, 4, ...
6. decimal-leading-zero
7. lower-roman: roman lowercase i, ii, iii, iv, ...
8. upper-roman: roman uppercase I, II, III, IV, ...
9. lower-alpha, lowercase a, b, c, d, ...
10. upper-alpha: a capital letter 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 for layering and with it you determine a position on the page you've created and ready. Absolute positioning;
Relative *: This value defines the text will have the rest of the positions on 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. You can take the absolute values, relative or auto (automatic).

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. You can take the absolute values, relative or auto (automatic).

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

Sets the distance from the top layer will have the browser or the parent element. You can take the absolute values, relative or auto (automatic).

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

Sets the distance from the bottom layer will have the browser or the parent element. You can take the absolute values, relative or auto (automatic).

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 (automatic) 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 (hidden) and inherit (inherits attribute of the top layer, default).

OVERFLOW

Determines how it will behave the contents of the layer when its limits are less than its contents. Valid values ​​are: visible (visible, resize the layer to display its contents), hidden (occult surplus ignores the contents of the layer), scroll (the scroll bar shows the layer) and self (displays the scroll bar to layer if needed).

DISPLAY

Identifies when and if an element should be displayed:

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

later I'll do a post about their innovations and CSS 3.

Related Posts

1. Center div vertically and horizontally with float and clear

Tags: css