Qué es CSS

Significa Cascading Stylesheet;  es decir, Hoja de estilo en Cascada.

Es un lenguaje de diseño gráfico que se usa para establecer el diseño para las paginas web, su lanzamiento produjo un cambio importante en la creación de interfaz gráficas web.

Ahora el contenido como títulos, enlaces, tablas , etc.  es totalmente independiente de su presentación, es decir, colores, marcos, bordes, alineación de textos. Ésta presentación  genera muchas ventajas ya que en varios archivos pueden compartir las miasma hojas, lo que optimiza el tiempo de  de carga  del sitio y  lo hace mas facial de mantener.

Actualmente CSS se encuentra en su versión tres, que optimizó algunas características de las versiones anteriores y agregó algunas nuevas, como lo son:

• degradados
• trensparencias
• bordes redondeados,
• tranformaciones
• animaciones
• mucho más

Puedes incorporar un codigos CSS a un documento HTML de tres maneras:

CSS en línea:

Consiste en escribir el código CSS  en un  elemento html, pero el estilo definido solo se aplicará en ese elemento.

Incrustar elemento:

Consisite en incrustar un elemento stile en alguna parte de documento html y entre sus etiquetas de apertura y cierre, irá el codigo CSS, pero los estilos definidos solo se aplicarán a los elementos de ese documento.

CSS externo:

Consiste a definir en un documento aparte, que luego puede ser enlazado a todos los documentos html que se requiera. Está ultima  es la mas recomendada.

El codigo CSS esta compuesto por reglas, cada regla está formada por el selector del elemento y el  bloque declarativo.

El selector:

Permite seleccionar a que elemento se aolica la regla.

Bloque declarativo:

Contiene una o mas declaraciones, cada declaraciónes un par, propiedad- valor;  separado por dos puntos y finalizado por punto y coma.

La propiedad

Indica la característica del elemento que se desea cambiar, como la anchura, alto, grosor, color.

El Valor:

Indica cómo se desea cambiar esa característica, por ejemplo; 100%, 500 pix, color rojo, en fin.

Dale a tus web, una aparariencia agradable con CSS.

Ejemplo:

body {/* foto de fondo MI CODIGO*/
background: url(../images/mifoto.jpg) no-repeat;
background: url(../images/fondo.jpg) no-repeat fixed center center#6F3;
background-size: cover;
font-family: «Lucida Grande», «Lucida Sans Unicode», «Lucida Sans», «DejaVu Sans», Verdana, sans-serif;
font-size: 15px;
color: #000;
font-family: Segoe, «Segoe UI», «DejaVu Sans», «Trebuchet MS», Verdana, sans-serif;
}
h3 {
font-size: 16px;
line-height: 34px;}
h1,h2,h3,h4,h5,h6 {
color: #000;
font-weight: 600;
letter-spacing: -0.2px;
}
a {
text-decoration:none;
}
#wrapper { /* CAJA DE HEAD*/
width: 70%;
width: 750px;
margin: auto;
padding: auto;
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.8);
width: 70%;

}

.container {
padding: 20px 30px;

}
#lineasuperior {
width:100%;
height:8px;
background-color:#006;
}
#tel {
float: right;
font-size: 20px;
color: #666;
margin-top: 20px;
}
/* Iconos sociales */
.iconos-sociales {
list-style: none;
float: right;

}

.iconos-sociales li {
float: left;

}

.iconos-sociales a {
display: block;
background: url(../images/iconos-sociales.png);/* foto de iconos redes sociales*/
height: 50px;
padding-left: 10px;
}
.facebook a {
width: 45px;
background-position: 0 0px;
}
.twitter a {
width: 45px;
background-position: -60px 0px;
}
.google a {
width: 45px;
background-position: -122px 0px;
}
.rss a {
width: 45px;
background-position: -190px 0px;
}

.facebook a:hover {
width: 45px;
background-position: 0 -50px;
}
.twitter a:hover {
width: 45px;
background-position: -60px -50px;
}
.google a:hover {
width: 45px;
background-position: -122px -50px;
}
#tel {
border-radius: 10px;

color: #006;
height: 23px;
width: 178px;
}
nav { /* MENU DE PRINCIPAL */
border-radius: 15px;

height: auto;
margin-top: 15px;

}
nav ul {

list-style-type:none;
margin:0;
padding:0;

}
nav a {
display: block;
float: left;
color: #006;
padding: 20px 30px;
font-size: medium;
height: 16px;
width: 190px;
margin-right: 0px;
}

/*formulario*/

form {
width: 380px;
margin: auto;
background: rgba(0,0,0,0.1);
box-sizing: border-box;
margin-top: 30px;
border-radius: 20px 20px 19px;
padding-bottom: 10px;
padding-left: 28px;
padding-right: 25px;
padding-top: 10px;

}
h2 {
color:#FFF;
text-align:center
margin: 10;
font-size: 30px;
margin-bottom:20px
}
input, textarea {

margin-bottom: 20px;
padding: 7px;

}

textarea {
min-height: 100px;
max-height: 200px;
max-width:100%;

}
#boton{

background:center;

color:#3FF;
padding:10px 11px;

}
#boton:hover {
cursor:pointer;
background:#blu;
}