Conceptos básicos sobre el CSS: Síntaxis y selectores

Conceptos básicos sobre el CSS: Síntaxis y selectores

Ya vimos anteriormente distintas formas de incluir el css en nuestro html en Incluir CSS en html.

Ahora veremos la sintaxis adecuada para escribirlo.

Para empezar debemos indicar a que lugar de nuestra parte del html nos estamos refiriendo para editar y entre corchetes los cambios estéticos que deseamos que lleve, por ejemplo:

h1{

color: blue;

font-size: 15px;

}

Esto hará que todos nuestros títulos h1 tengan una letra de color azul y un tamaño de 15.

Como podemos ver, la síntaxis usada es primero selector (en este caso h1) y entre corchetes la propiedad, dos puntos y el valor que tomará esta propiedad, seguido de un punto y coma

Si lo que deseamos es seleccionar un elemento único de nuestra página, al que previamente le hemos dado una id, podemos indicarlo poniendo # seguido por el nombre id dado, por ejemplo:

#nuestroid{

text-align: left;

}

Si tenemos clases y queremos seleccionarlas para editarlas le añadimos un punto delante al nombre, por ejemplo:

.nuestraClase{

background-color: black;

}

Si lo que deseamos es escoger todos los titulos h2 dentro de una clase concreta:

h2.nuestraClase{

}

 

Si queremos darle el mismo formato de estilo a varias cosas podemos ahorrarnos repetir lineas seleccionandolas todas, en vez de repetir que quiero que el titulo h1, el h2 y el h3 vayan en color amarillo puedo indicarlo junto en vez de separado.

h1, h2, h3{

color: yellow;

}

 

Incluir CSS en html

Incluir CSS en html

Para empezar, el css no tiene sentido sin su correspondiente html. Con él conseguiremos dar estilo a nuestra página indicando las caracteristicas de cada parte de la web.

Hay distintas formas de incluir css a nuestro html.

La primera es en el mismo html. Para hacer esto debemos incluirlo dentro de la parte head de nuestro html:

<html>

<head>

<style type="text/css">

h1{
color: blue; font-family: Arial;
}

</style>

</head>

<body>

<h1>Nuestro título con estilo</h1>

</body>

</html>

 

Normalmente para un pequeño retoque se puede usar, pero si vamos a tener muchos cambios sobre los estilos de nuestro html es más conveniente hacerlo en de forma externa.

Por lo tanto, la segunda forma que vamos a ver de incluir un css es en archivo externo .

Debemos empezar por crearnos nuestro archivo en el que pondremos:

h1{
color: blue; font-family: Arial;
}

Y lo guardaremos como “nombre_archivo.css”

Para enlazarlo con nuestro html iremos a nuestro documento html e incluiremos dentro del head la etiqueta <link>

<html>

<head>

<link rel="stylesheet" type="text/css" href="nombre_archivo.css" media="screen"/>

</head>

<body>

<h1>Nuestro título con estilo</h1>

</body>

</html>

Dentro de la etiqueta link deberemos incluir los atributos rel, type, media y href, en esta última es donde le diremos la ruta donde se encuentra nuestro css, si está en la misma carpeta solo poniendo el nombre del archivo nos funcionará.

 

Crear nuestro css de forma externa es lo más lógico si lo vamos a usar en varias páginas dentro de nuestra web o si es muy amplio, queda todo mucho más ordenado y limpio.

 

Advertisment ad adsense adlogger