En diseño web, existen varios lenguajes de programación y de etiquetas que ayudan a moldear una plantilla: aquella interfaz de usuario que se ve a través del navegador web, y desde donde se envían datos de entrada al servidor. Algunos de ellos son HTML, CSS, JavaScript, JQuery, entre otros.

¿Qué es CSS?

Cascade Style Sheet u hojas de estilo en cascada, es un lenguaje de diseño que se utiliza para definir y establecer el aspecto visual de un código web escrito en un lenguaje de marcado, como HTML o XHTML. Es una forma de aportar efectos y ‘belleza’ a los elementos diseñados.

Para implementar el CSS en alguna página HTML, debemos escribirlo dentro del elemento style:

<style type=»text/css»>

  //Estilo CSS aquí

</style>

o mediante el atributo class de los elementos HTML:

<p class=»estilo-css»>Texto de prueba</p>

Ejemplos de CSS

  • Colocar una imagen de fondo:

<html>

<head>

<style type=»text/css»>

body {background-image: url(‘TU_IMAGEN.jpg’)}

</style>

</head>

<body>

</body>

</html>

Con este extracto de código añadimos una imagen al elemento body (cuerpo de la página), por medio de la URL de origen de la imagen, la cual aparecerá las veces que usemos la etiqueta <body> en todo el desarrollo web.

  • Cambiar el color de varios elementos de la página:

<html>

<head>

<style type=»text/css»>

body {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {

background-color: rgb(250,0,255)

}

</style>

</head>

<body>

<h1>Título 1</h1>

<h2>Título 2</h2>

<p>Texto de ejemplo.</p>

</body>

</html>

Aquí estaremos cambiando el color de fondo de las fuentes utilizadas con las etiquetas h1, h2, p. Luego se crea elcuerpo deldocumento web y se realiza el llamado a esas etiquetas que ya tendrán los atributos de color antes descritos en style.

  • Resaltar los enlaces con CSS:

El elemento ‘a’ se usa para colocar un enlace. Este elemento tiene tres estados:

  • a:link, cuando el enlace no ha sido clicado
  • a:hover, cuando estamos encima del enlace
  • a:visited, cuando el enlace ha sido clicado

<html>

<head>

<style type=»text/css»>

a:hover { font-size:20px; color:#100;}

</style>

<body>

< a href= «https://www.ejemplo-de-enlace.com»>Palabra clave o nombre de enlace</a>

</body>

</head>

</html>

Aquí se le dn ciertas características al enlace si pasamos el mouse encima de él. Se cambia el tamaño y color.

  • Listas ordenadas:

La etiqueta <ol> contiene una lista ordenada, mientras que <li> crea cada uno de sus elementos.

<html>

<head>

<style type=»text/css»>

ol { se crean los estilos aquí }

</style>

<body>

<ol>

<li> Elemento 1</li>

<li> Elemento 2</li>

<li> Elemento 3 </li>

</ol>

</body>

</head>

</html>

  • Listas no ordenadas:

La etiqueta <ul> contiene una lista sin orden, mientras que <li> contiene cada uno de sus elementos.

<html>

<head>

<style type=»text/css»>

ul { se crean los estilos aquí }

</style>

<body>

<ul>

<li> Fotoretrato </li>

<li> Fotografía gastronómica</li>

<li> Fotografía de bodas</li>

</ul>

</body>

</head>

</html>