en CSS

CSS para Surferas I: ¿Qué es CSS?

CSS para surferas / principiantes - ¿qué es css?

Mi novia escribe en un blog sobre surf llamado surfmocion.com y el otro día me decía que estaba muy contenta porque había conseguido aumentar el tamaño de la letra en una página de su blog con CSS 🙂

Pero que más allá de saber que el CSS sirve para cambiar el diseño de la web, no sabía muy bien cómo funcionaba todo esto y que se quería apuntar a un curso o algo para aprender, porque quería poder cambiar ella sola el diseño de su blog.

Asi que le dije que yo le podía explicar si quería…

  • Si quieres te puedo explicar yo cómo va esto del CSS
  • 😍
  • Ademas lo puedo montar como una serie de posts para que lo tengas de referencia cuando lo necesites
  • 😍 ❤️
  • Y le puedo dar el enfoque que necesitas, es decir que tengas las nociones básicas para que puedas modificar los estilos en tu blog
  • 😍 ❤️ 🎉
  • Oks, Challenge Accepted!! 😎

Asi que empecemos explicando «el modelo de capas», un concepto que nos va a ayudar a entender mejor qué es el CSS y su función en una pagina web

 El modelo de capas

Cuando vemos una página web podemos imaginar lo que vemos separado en 3 capas (asociadas a 3 tecnologías)

  • La capa del contenido que se maneja con HTML
  • La capa del diseño que se maneja con CSS
  • La capa del comportamiento (acciones, movimiento) que se maneja con Javascript

modelo de capas HTML5 CSS3 JS

La capa del contenido (HTML)

En esta capa se maneja la estructura de la información (el contenido, el texto) que estamos mostrando. Con las etiquetas (tags) HTML lo que hacemos es darle significado semántico al texto, es decir diferenciamos lo que es un titular (h1), de lo que es un párrafo (p), de lo que es una lista (ul), etc…

Un código HTML de una pagina cualquiera podría ser esto

Y sin estilos CSS esta pagina HTML se veria en tu navegador asi (por defecto tu navegador «interpreta» estos tags en un formato standard: los h1 se muestran en fuentes mas grandes, los enlaces en azul y subrayados, etc… )

Normalmente este código HTML está en archivos .html aunque también puede estar en otro tipo de archivos (.php por ejemplo)

La capa del diseño (CSS)

Desde esta capa controlamos cómo presentamos esta información, es decir que desde aquí podemos cambiar el diseño y estilo (colores, tamaños, márgenes…) a nuestro HTML. Para ello utilizamos el lenguaje CSS con el que mediante un sistema de reglas podemos cambiar los estilos de elementos concretos de nuestro HTML (del h1, del p, del ul, etc…)

Lo que se suele hacer es adjuntar un archivo CSS donde están definidos todos los estilos de la pagina. Con este sistema podemos hacer que una página con el mismo HTML se vea totalmente distinta aplicando otro CSS.

Por ejemplo este html se ve así sin estilos

Pero aplicándole diferentes estilos por CSS se puede ver así, así, así o así

Mola, no?

Si miras el código HTML de esta página, esta, esta o esta veras que el HTML es exactamente el mismo y que estos archivos se diferencian solo en una linea

<link rel="stylesheet" media="screen" href="210.css">

En esta linea es donde cargamos un CSS u otro

Menuda diferencia sólo cambiando el archivo CSS que cargamos, ¿no?

La capa del comportamiento (Javascript)

Sin entrar en mucho detalle aquí, hay una tercera capa necesaria cuando queremos añadir acciones en nuestra pagina web (por ejemplo que se muestre un mensaje cuando pulsamos un botón). Esta capa se controla mediante código Javascipt que podemos añadir mediante archivos .js (de la misma manera que añadimos estilos añadiendo archivos .css)

Si quieres aprender más sobre Javascript aqui tienes unos buenos libros para empezar 😉

¿Qué significan las siglas CSS?

OK, ya tenemos ubicada la función y el potencial del CSS en una página web así que ahora vamos a centrarnos en las características propias del CSS

CSS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada):

  • Style Sheets (Hojas de Estilo) porque cómo ya hemos visto en los archivos CSS (las «hojas») tenemos definidos los estilos de la página
  • Cascading (en Cascada) porque podemos cargar varios archivos CSS y si hay estilos definidos que afecten a los mismos elementos, estos se aplican en «cascada» siguiendo unos criterios de orden, prioridad y peso. Estas normas para decidir que estilo se está aplicando a tu elemento CSS tienen un poco de miga pero a «grosso modo» el ultimo CSS que cargues suele tener prioridad sobre el anterior 😉

¿Y cómo funciona?

CSS funciona a base de reglas. Una regla CSS tiene dos partes: un selector y un bloque de declaraciones.

h1 {color: blue; font-size:12px;}

h1 es el selector y {color: blue; font-size:12px;} es el bloque de declaraciones

selector

El selector

El selector «selecciona» el elemento HTML al que queremos cambiar el estilo. Hay muchos tipos de selectores con los que podemos seleccionar elementos HTML para cambiarles el estilos

Las declaraciones

El bloque de declaraciones contiene una o más declaraciones La declaración es la parte de la regla que establece cuál será el efecto de diseño a aplicar.

Cada declaración incluye:

  • un nombre de propiedad
  • un valor

…ambos separados por dos puntos : y terminando siempre con punto y coma ;

Hay muchas propiedades que podemos utilizar para cambiar los estilos de nuestra pagina web


Y esto es todo por ahora, espero que os haya quedado un poco más claro lo qué es el CSS. Seguiremos con más posts de la serie «CSS para surferas» 🙂

Si quereis seguir investigando por vuestra cuenta aqui os dejo unos cuantos enlaces

Enlaces y mas:

Post Anterior
Post Siguiente

Política de Comentarios de pixelovers

Responsable » Juan Manuel Garrido
Finalidad » Moderación de los comentarios
Legitimación » Tu consentimiento expreso que te será requerido por Disqus.
Destinatarios » Los datos de tus comentarios los guardará Disqus, mi sistema de comentarios, que está acogido al acuerdo de seguridad EU-US Privacy Shield tal y como recoge su politica de privacidad
Derechos » Desde Disqus, por tanto, podrás acceder, rectificar, limitar y suprimir tus comentarios o tu cuenta
Tienes más detalles acerca del tratamiento de los datos relacionados con los comentarios en nuestra (Política de Privacidad)