Cascading Style Sheet.
Hola de nuevo, si has estado siguiendo este blog, sabrás que he estado publicando los conceptos básicos para que aprendas a hacer tu web, en esta ocasión nos toca aprender como usar las hojas de estilo en cascada (CSS)
¿Que es CSS?
Al igual que HTML CSS no es un lenguaje de programación, sirve para mostrar de manera estilizada tu página web, aplicando estilos a diferentes elementos del documento y existen cientos de propiedades CSS que se pueden aplicar, aquí solo veremos las que en base a mi experiencia son las que mas te ayudan.
Empezando con CSS.
Para llevar un orden en nuestros archivos, vamos a crear una carpeta llamada css donde guardaremos nuestra hoja de estilos, y crearemos un archivo index.html
Crea un documento llamado style.css (puede ser el nombre que quieras pero la extensión .css debe respetarse) y lo guardamos dentro de la carpeta que acabamos de crear.
copia y pega el siguiente código en tu documento HTML.
<html>
<head>
<title>mi página con CSS </title>
<meta charset="utf-8">
<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1> Aplicando estilos CSS </h1>
<br>
<hr>
<img src="buho.jpg">
<br>
<hr>
<p>
Se cree que los búhos son los más inteligentes de todas las aves.
</p>
<p>
Los búhos son, casi siempre, nocturnos, lo que significa que sólo están
activos durante la noche. Es muy raro que usted vea uno durante el día.
</p>
<p>
Las lechuzas hembras de casi todas las especies son aproximadamente 25%
más grandes que los machos.
</p>
<hr>
<h2>Esta es mi página web con estilo ;).
</div>
</body>
</html>Guarda la imagen del búho con el nombre buho en el mismo lugar que tu archivo index.html
Vinculando CSS con HTML.
Antes de empezar a dar estilo a la página web , tenemos que vincular la hoja estilos con el documento HTML, para hacerlo, copia y pega el siguiente codigo dentro de la etiqueta <head> de tu documento HTML.
<link href="css/style.css" rel="stylesheet" type="text/css">Dando estilo a la página.
Para empezar a dar estilo a la página web pega el siguiente código en tu hoja de estilos .css
body{
width:100%;
background-color:#202020;
margin:0;
}
div{
width:60%;
margin: 0 auto;
background-color:lightgray;
text-align: center;
padding:20px;
} Como puedes ver, estamos seleccionando las etiquetas de nuestro documento HTML, pero vamos a ver más a detalle nuestro código CSS.
A toda la estructura completa se le llama regla predeterminada o para mayor facilidad simplemente regla.
Selector: Es el elemento que empieza con la regla, determina a que elemento se le va a dar estilo, en este caso el elemento div. Puedes cambiar el selector para dar estilo a un elemento diferente.
Propiedad: Son las maneras en que puedes dar estilo a tu elemento HTML tiene ciertas propiedad especificas para dar estilo, pero existen otras que son compartidas entre los elementos, por ejemplo width que en español es anchura, y le dice al navegador que ancho va a tener el elemento seleccionado.
Algunas propiedades que comparten los elementos son:
Para los elementos.
• margin.
• padding.
• width.
• height.
• background-color.
• border.
Para el texto.
• color.
• font-family.
• font-size.
• text-shadow.
• font-weight.
Valor de la propiedad: Después de los dos puntos (:), se encuentra el valor de la propiedad, el cual define como va a comportarse el elemento HTML, para width (anchura) en este caso, le decimos que tenga el ancho de 80% de la pantalla, aunque también podemos ponerlo en pixeles: width: 180px;
Declaración: Especifica cual de las propiedad del elemento HTML vas a modificar.
Sintaxis de la hoja de estilos.
Es importante que tomes en cuenta que cada una de las siguientes reglas:
- Las declaraciones de estar encapsuladas en corchetes ({})
- Separa con dos puntos (:) la propiedad de su valor
- Al terminar una declaración debes finalizar con punto y coma (;) para separarlas unas de otras.
body{
width:100%;
background-color:#202020;
} Seleccionando varios elementos.
Puedes seleccionar varios elementos HTML simplemente separándolos por comas(,), ejemplo:
h1, p, li{
color:green;
}Selectores.
Hay diferentes tipos de selectores que puedes usar para modificar el estilo un elemento HTML, veamos dos de ellos.
Selector por clase: a cada etiqueta HTML puedes asignarle una clase que puedes compartir con diferentes elementos, por ejemplo:
<p class="texto">Texto con clase </p>La case «Texto» puede ser usada por otro elemento como <h1> y para que puedas seleccionar una clase en CSS debes escribir un punto (.) antes del nombre de la clase.
.Texto{
color:green;
}Selección por identificador (ID): Así como podemos asignar clases, podemos asignar identificadores, la diferencia es que el identificador solamente se puede usar en un elemento especifico y no se debe repetir, por ejemplo:
<div id="cabecera"> Texto de cabecera </div>Para poder usar el ID en tu hoja de estilos, lo puedes llamar con signo de gato seguido del ID:
#cabecera {
}Tutorial.
Ahora que ya sabemos lo básico para usar CSS, vamos a continuar la modificando nuestra página web.
Pega esta nueva regla en tu hoja de estilos .css y guarda los cambios.
h1{
width:100%;
color:darkred;
font-size:48px;
}Como puedes ver, en esta regla estamos modificando varias propiedades de la etiqueta h1, para que puedas ver los cambios abre tu archivo index.html.
Ahora vamos a modificar el tamaño de la imagen para que se vea mejor.
img{
width:100%;
}Si vas siguiendo los cambios, veras que las letras no se ven bien acomodadas en la pantalla, pero vamos a ajustarlas con el siguiente codigo:
p{
text-align:left;
font-weight:bold;
}Alineamos las letras a la izquierda y las ponemos en negritas.
Ahora vamos a cambiar el tipo de letra a todo el documento HTML.
html{
font-family:calibri;
}Si todo ha ido bien la página web debería verse así:
Conclusión.
Como puedes darte cuenta, hacer una página web aplicando estilos también es muy sencillo.
Puedes jugar con los valores hasta que el contenido sea de tu agrado. Con esto ya puedes crear tu pagina web con un bonito estilo o incluso hacer la página web de tu negocio, el único limite te lo impones tu.
Isaac G.
