Como se forman las instrucciones en CSS?. Al igual que en HTML se crean etiquetas con los símbolos del mayor que y el menor que < > y para cerrar el elemento HTML introducimos la barra </ >, en CSS crearemos instrucciones dentro los símbolos conocidos como llaves { } Y a cada instrucción las separamos con el punto y coma ( ; ), ejemplo: h1 { color:red; font-size:3em; font-family:’Antonio’, sans-serif}

Por ejemplo si queremos poner el título de nuestro sitio en color rojo y de un determinado tamaño y de diferente familia tipográfica lo haremos de la siguiente forma. Sabemos que para crear títulos en HTML utilizamos esta etiqueta <h1></h1> y en medio de estas etiquetas ponemos el nombre de nuestro sitio. Así: <h1>BIENVENIDOS A MI PAGINA WEB</h1>.

Ahora un ejemplo grafico.


Ejemplo de titulo simple sin CSS
Ejemplo de titulo simple sin CSS

Instrucciones CSS para dar propiedades al titulo de nuestro sitio
Instrucciones CSS para dar propiedades al titulo de nuestro sitio

Titulo de nuestro sitio con propiedades definidas con CSS
Titulo de nuestro sitio con propiedades definidas en CSS

Explicación CSS


Instrucciones CSS para dar propiedades al titulo de nuestro sitio
Instrucciones CSS para dar propiedades al titulo de nuestro sitio

Como podemos ver en la imagen de la izquierda hemos cambiado por completo el diseño del titulo de nuestro sitio web. Las instrucciones como podéis ver en la imagen están formadas de la siguiente manera:

Hemos nombrado al elemento h1 que hace referencia al titulo de la pagina web, seguidamente hemos colocado los símbolos de las llaves { } y en medio hemos definido las instrucciones para que nuestro titulo cambie su diseño. Se a definido la instrucción color red para que el titulo cambie su color a rojo.

Luego hemos definido la instrucción font-size que hace referencia al tamaño de la letra en este ejemplo hemos utilizado la medida 3em, Hay varios tipos de unidad de medidas que podemos utilizar pincha aquí para saber mas sobre medidas en CSS.

Y por último hemos definido la instrucción font-family que es la encargada de cambiar el diseño de la letra en este ejemplo el nombre de la familia tipográfica es ‘Antonio’, ‘Sans-serif’, y con estas instrucciones hemos podido cambiar de:

DE ESTO

Titulo Sin CSS

A ESTO

Titulo con CSS

Tema anterior Que es CSS? Siguiente tema Ejemplos básicos de CSS

Compartir esta web

Franklin A Vaca De la Cruz

Programador de aplicaciones para Gestión Empresarial y aplicaciones web, Suscríbete o regístrate a la web y no te pierdas temas importantes. Saludos