CSS File

Las hojas de estilo en cascada CSS, son archivos codificados que seleccionan elementos de tu página y controlan su presentación.

Para vincular el archivo CSS, a tu página Html, debe utilizar el siguiente link:

<link rel="stylesheet" href="archivo.css">

SELECTORES:

Hace referencia a las etiquetas a las cuales se les desea aplicar el estilo.  Ej:

  body {
                 background: #000000
}

El selector universal, aplica para toda la página. Ej:

* {
        margin:0;
        padding:0;
}

Si desea aplicar la misma característica a varios selectores, puede referenciarlos de la siguiente manera:

h1, h2, h3, h4 {
                        color:red;
}

Selectores Descendentes:

Son selectores que están dentro de otros selectores. Ej:

p   a  {
        font-size:30px;
}

Selector de Clase:

Los selectores de clase aplican características a las clases definidas. Ej.

.yellow {
            color:yellow;
} 

Unidades de Medida

Hay muchas unidades de medida, algunas ya no se utilizan pero las más utilizadas son:

px : pixeles

em: hace referencia a la unidad de medida del elemento padre.  Por ejemplo, si se utiliza una

       letra de 12 px, 1 em equivale a 12 px. Ej:

body {
         font-size:12px;
}
p {
        font-size:2em;
}

% : Hace referencia a tamaños relativos en porcentaje.  Ej:

div {
       width: 50%;
}

Las medidas de los contenedores son:

div {
        width:50%;
        heigth:200px;
        background:#ff8000;

        margin:20px 50px;

        padding:30px;

        border:10px solid #000;
}

FONDOS

Puede poner a los elementos, puede hacerlo de la siguiente manera:

Fondo de textura:

body {
        background: url(imagen.jpg);
        background-repeat:no-repeat;
}

propiedad background:  no-repeat;  repeat-x; repeat-y;

propiedad backgroun-attachment: fixed; scroll; 

propiedad background-position: 50% 0;  (derecha y abajo)     center;

MANEJO DE CAJAS

En el html, crear varias cajas:

<div> <h2> #1 </h2></div>
<div class="caja"> <h2> #2 </h2></div>
<div> <h2> #3 </h2></div>

en el archivo estilo.css:

div {
    width:100px;
    height:100px;
    background: #4A88F4;

    color:#fff;

    font-size:30px;
}

.caja {

    position: relative;   absolute;  fixed;   static;

    top:;

    bottom:;

    left:;

    rigth:;

}

Puede también colocar una caja dentro de otra.  

Crear en Html:

<div class="caja-padre">

<div> <h2> #1 </h2></div>
<div class="caja"> <h2> #2 </h2></div>
<div> <h2> #3 </h2></div>

</div>

En el archivo CSS:

.caja-padre {

    position:relative;

   width:500px;

    height:500px;
    background:orange;

}

Probar con float: left;  rigth;    en el selector de clase DIV

TEXTO

Opciones para texto

p {
    font-family: arial, helvetica, sans-serift, "times new roman";
    font-size:20px; 150%;
    font-weight: normal;  bold;
    text-align: center;  left; rigth;

    line-height:30px;

    text-decoration: underline;  overline;  line-through;  none;

    text-transform: capitalize;   uppercase;  lowercase;  

    letter-spacing:20px;  normal;

    word-spacing:20px;

    text-shadow: 5px  5px  5px  #000;
}

ENLACES

al pasar el mouse sobre el enlace:

a:hover {
        text-decoration: underline;
        background: #000;
        color: #fff;
}

Al hacer click en el enlace:

a:active {
          background:#ff8000;
}

IMAGENES

Colocar la imagen dentro de un contenedor

div {

        background:#ccc;

        width:100%;

}

img {
        height:auto;
        width:400px;

        margin:auto;

        display:block;

        border-radius:5px;  50%;

        box-shadow:5px 5px 0px #ccc;

        padding:10px;

        border:1px solid #000;

}

Las propiedades margin:auto y display:block, juntas hacen que se centre la imagen.

Las propiedades padding junto con border forman un marco.

LISTAS

ul {
        list-style-type:square;   circle;
        list-style-position:inside;  outside;

}

ol {
        list-style-type:decimal-leading-zero; upper-latin;  lower-latin;  decimal;
}

EJEMPLO DE MENU

En el archivo html

<ul class="menu">
        <li><a href="#">opcion1</a></li>
        <li><a href="#">opcion2</a></li>
        <li><a href="#">opcion3</a></li>
        <li><a href="#">opcion4</a></li>
</ul>

En el archivo CSS

.menu {
        width:100%;
        background:#ccc;
        list-style:none;

        margin:0;

        padding:0;
}

.menu li {

        display:inline-block;

}

.menu li a{

        padding:10px 20px;

        display:inline-block;

}

.menu li a:hover{

        background:#ccc;

        color:#000;

}

TABLAS

En el archivo HTML

<table>
    <tr>
        <td>Item #1</td>
        <td>Item #2</td>
        <td>Item #3</td>
        <td>Item #4</td>
    </tr>

    <tr>
        <td>Item #1</td>
        <td>Item #2</td>
        <td>Item #3</td>
        <td>Item #4</td>
    </tr>
</tabla>

En el archivo CSS

table {

    border: 1px solid #000;

    border-collapse: collapse;   separate;

}

table td {

    border: 1px solid #000;

    padding:20px;

}

Poner un párrafo largo en una celda y probar con width:500px, en table.

table tr:hover {

    background:#ccc;

}

table td:hover {

    background:#000;

    color:#fff; 

}

FORMULARIOS

<form>

    <label for="nombre">Nombre</label>

    <input type="text" id="nombre" placeholder="Escribe tu nombre">

    

    <label for="nombre">Nombre</label>

    <input type="text" id="nombre" placeholder="Escribe tu nombre">

    <label for="email">Email</label>

    <input type="email" id="email" placeholder="Escribe tu email">

    

    <label for="mensaje">Mensaje</label>

    <textarea id="mensaje" placeholder="Escribe tu mensaje"></textarea>

        <input type="submit" value="Enviar">

</form>

En CSS

form {

    width:25%;

    border:1px solid #ccc;

    margin:20px;

    padding:20px;

}

label {

    font-size:12px;

    display:block;

    width:100%;

}

input {

    margin-botton:20px;

    width:100%;

    padding:10px;

    box-sizing:border-box;

    border:1px solid #ccc;

}

input:focus {

    border:1px solid #1668c4;

}

textarea {

    resize:vertical;  horizontal;   both;

    max-height:300px;

    min-height:100px;

}

input[type="submit"] {

    margin-bottom:0;

    background:#1668c4;

    color:#fff;

    border:none;

}

input[type="submit"] :hover {

    background:#4a88f4;

    cursor:pointer;

}

ACTIVIDAD DE APRENDIZAJE

Aplique a su página WEB, el archivo de estilo en cascada CSS.

ENVIAR ACTIVIDAD AQUI