![Te enseño a hacer una pagina en HTML5 desde 0 Parte [2/?]](https://storage.posteamelo.com/assets-adonis/assets/2013/04/26/60CCB7425.png-5XsZTVtSKOE.webp)
Hola amigos, hoy les traigo la segunda parte del curso para que puedan crear sus paginas web con HTML5 desde 0!
Si no viste la parte 1 podes visitarla haciendo click
En este post, veremos como agregar el estilo a nuestra web (Fondo, fuentes, colores, etc)
Para esto usaremos StyleSheet, así que, les explicare de una forma mas precisa que es eso.
¡¿Que mierda es StyleSheet?!
El StyleSheet.css (Cascading Style Sheets; CSS o Hojas de estilo en cascada) , es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos.
Bien pero, ¿Para que me sirve?
CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrarlos elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
Perfecto, y, ¿Como funciona?
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne......
El término cascading (en cascada) deriva del hecho de que múltiples hojas de estilo se pueden aplicar a una misma página web.
Sigo sin entender...
Sos boludo entonces.
Bueno, después de esa introducción, vamos a crear nuestra StyleSheet y vamos a aplicarla!
Creamos un nuevo documento en Sublime Text ( o el programa que ustedes usen).
PD: Al final del post tienen para descargar sublime si lo desean.
Guardamos este documento como stylesheet.css en nuestra carpeta de la pagina web.
Bueno, ahora iremos a nuestro index y vamos a escribir en el head la siguiente línea:
<link rel="stylesheet" href="stylesheet.css">
Eso lo que hace es aplicar nuestra Hoja de estilo a nuestra index.
Ahora vamos a empezar a escribir en nuestro stylesheet
Escribimos el siguiente código:
body
{
background-color:#fff3f1;
}
Estas líneas del stylesheet lo que hacen es modificar el body de nuestra pagina, en este caso, le puse un color de fondo medio naranja.
Acá pueden ver los codigos de los colores Hexadecimales.
Para agregar una fuente debemos poner debajo de background-color, escribiremos "font-family:"La fuente que quieramos",Arial;"
Quedará así
body
{
background-color:#fff3f1;
font-family:"Comic Sans ",Arial;"
}
Hay una cosa que se me olvido de decirles, como verán nuestra pagina no reconoce los acentos ni las Ñ, eso se debe a que el modo de escritura esta en ingles.
¡¿Como pene lo cambio D: ?!
Fácil, Vamos al index, y en la etiqueta head, agregamos otra mas llamada <meta charset ="utf-8">
Nos quedará así
<head>
<meta charset="utf-8">
Listo, con esto reconocerá los caracteres.
No se si lo recordaran pero en el post anterior, creamos un div con una ID contenido, ahora es cuando vamos a usar dicha ID
Vamos al styleSheet y agregamos las siguientes líneas
#contenido
{
width:960px;
margin:0 auto;
text-align: center;
}
Esto, lo que hace básicamente es alinear nuestro contenido al centro.
Ahora vamos a modificar nuestro H1 que en nuestro caso es el título de la pagina
Ponemos en nuestro StyleSheet:
h1
{
color:#ffaa00;quotes:
font-family: 'Arial', cursive;
}
Bien, lo que hace esto es simplemente modificar el color del titulo o titulares que contengan la etiqueta H1 en nuestra página.
En mi caso, la deje de color naranja con la fuente Arial.
Ahora, por fin vamos a modificar nuestra ventanita de navegación (Que es una poronga)
nav ul li
{
display:inline-block; <!-- Esto lo que hace es que estén en fila bien linda-->
margin-right:15px; <!-- Esto separa cara item 15 pixeles-->
cursor: pointer; <!-- Indica que el cursor debe ponerse en estado Pointer-->
font-family: 'Morris Roman', cursive; <!-- Indica la fuente-->
}
Ahora le vamos a agregar un estilo a nuestro contenido en la web
Vamos a la index y debajo de Header abrimos una etiqueta llamada <section>
Esto nos sirve para dividir nuestra pagina en secciones.
Arriba de la etiqueta section abrimos un div y le pones de ID"texto"
Volvemos al style y agregamos las siguientes líneas
#texto
{
width:600px;
height:320px;
background-color:#03083a;
color:#fff;
margin: 0 auto;
text-align: left;
padding: 15px;
}
Bue, esto es mas complejo, lo que hacemos es crear un cuadro que contenga nuestro contenido de 600 Px X 320 Px, de color azul, ubicado al centro, con la alineación del texto al medio y una separación de 15 Px con el borde del cuadro.
![Te enseño a hacer una pagina en HTML5 desde 0 Parte [2/?]](https://storage.posteamelo.com/assets-adonis/assets/2013/11/01/2D8.jpg-K9uIso_xDBr.webp)
Por ahora vamos bien, ya va pareciendo una página de verdad, lo único que nos faltaría es hacer el footer, yo lo hago con el mismo método que el de arriba, creo un rectángulo con un contenido pero por ahora voy a eliminar el footer
Bueno chicos, por ahora es todo, lo haría mas largo pero tengo mejores cosas para hacer
Sublime: http://www.sublimetext.com/2
Otros post
