Conceptos del codigo CSS

Background

Fonts


Z-index

Set the z-index for an image:

img
{
      position:absolute;
     left:0px;
     top:0px;
     z-index:-1;
}

Texts

text-align

This property describes how inline contents of a block are horizontally aligned.
text-align: left | right | center | justify

Example

[style.css]

p#le{ text-align: left; }
p#ri{ text-align: right; }
p#ce{ text-align: center; }
p#ju{ text-align: justify; }

[index.html]
<p id="le">This is a paragraph(left)</p>
<p id="ri">This is a paragraph(right)</p>
<p id="ce">This is a paragraph(center)</p>
<p id="ju">This is a paragraph(justify)</p>

text-decoration

This property describes line decorations that are added to the content of an element.
[Syntax]

text-decoration: none | underline | overline | line-through | blink

Example

[style.css]

p#no{ text-decoration: none; }
p#un{ text-decoration: underline; }
p#ov{ text-decoration: overline; }
p#th{ text-decoration: line-through; }
p#bl{ text-decoration: blink; }

[index.html]

<p id="no">This is a paragraph(none)</p>
<p id="un">This is a paragraph(underline)</p>
<p id="ov">This is a paragraph(overline)</p>
<p id="th">This is a paragraph(line-through)</p>
<p id="bl">This is a paragraph(blink)</p>

text-indent

The text-indent property specifies the indentation applied to first line of inline content in a block.
[Syntax]

text-indent: length;

Example

[style.css]

p#ind{
  text-indent: 2em;
}

[index.html]

<p>This is a paragraph(normal)</p>
<p id="ind">This is a paragraph(indent)</p>

color

The color property describes the foreground color of an element's text content.

Example

The following example specifies same color: [style.css]

p#key{ color: red; }
p#val{ color: #ff0000; }

[index.html]

<p id="key">This is a paragraph(red)</p>
<p id="val">This is a paragraph(#ff0000)</p>

Selectors are specify the target of styling. Selectors may range from simple element names to rich contextual representations.

Kind of selector

Type selector

A type selector is the name of HTML Tag.
[index.html]

<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>

[style.css]

p{
  color: red;
  font-size: 12px;
}

Class selector

Class selector is used for one or more elements. It is described the value of class attribute of HTML document with ".(period)".
[index.html]

<p class="red">This is a paragraph</p>
 <p class="blue">This is a paragraph</p>
 <p class="red">This is a paragraph</p>
 <p class="blue">This is a paragraph</p>

[style.css]

p{
   font-size: 12px;
 }
 .red{
   color: red;
 }
 .blue{
   color: blue;
 }

ID selector

ID selector is used for unique element. It is described the value of ID attribute of HTML document with "#".
[index.html]

<p>This is a paragraph</p>
 <p>This is a paragraph</p>
 <p id="small">This is a paragraph</p>

[style.css]

p{
   font-size: 12px;
 }
 .red{
   color: red;
 }
 .blue{
   color: blue;
 }
 #small{
   font-size: 9px;
 }

Descendant combinator

A descendant combinator is whitespace that separates two sequences of simple selectors. A selector of the form "A B" represents an element B that is an arbitrary descendant of some ancestor element A.
[index.html]

<h1>This is a <em>header</em></h1>
 <p>This is a <em>paragraph</em></p>

[style.css]

h1 em{
   color: red;
   font-size: 12px;
 }

The selector introduces here is not all.
See also Selectors Level 3.

Grouping

A comma-separated list of selectors represents the union of all elements selected by each of the individual selectors in the list.
[index.html]

<h1>This is a heading</h1>
  <h2>This is a heading</h2>
  <h3>This is a heading</h3>
  <h4>This is a heading</h4>

[style.css]

h1, h2, h3, h4{
   color: red;
   font-size: 12px;
 }

Selector: Specifies the target of styling.
Declaration: Specifies the property and value.

• Declaration is contained between "{" ... "}".
• Declaration end with a semicolon.
  p{ color: red; }

Declaration part can have one or more declarations.
p{ color: red; font-size: 12px; }
When the declarative part has a lot of declarations, the Web creators usually describes it as follows:
p{ color: red; font-size: 12px; }

CSS comments

• CSS comment starts with "/*", and end with "*/".
  p{ color: red; /* This is a comment */ font-size: 12px; }