• CSS

    CSS Básico: ¿Qué es CSS y para que sirve?

      Para seguir este tutorial es necesario tener un conocimiento basico de HTML.

      En este tutorial veremos los puntos basicos de CSS (Cascading Style Sheets) el lenguaje de estilización por excelencia, su funcion es estilizar una pagina web mediante el uso de selectores y atributos.
      La sintaxis de CSS es la siguiente:

      Antes de CSS para estilizar una pagina se tenían que repetir etiquetas una y otra vez, ahora gracias a CSS y sus selectores esta pesadilla termino.

      ¿Cómo llamar a CSS dentro de HTML?

      Existen 3 métodos para incrustar un cogido CSS en un documento HTML y hacer que funcionen juntos:

      1. Estilización en linea

      La estilizacion en linea se usa de la siguiente manera:

      <h1 style="color:red;">Hola</h1>

      Con ese código ya estilizados un elemento h1 para que su fuente sea de color rojo.
      No es algo tan recomendado ya que no se hace uso de los selectores.

      2. En el documento mismo

      Podemos incluir codigo CSS mediante las etiquetas style que las podemos poner en cualquier parte de la pagina:

      <style>
      *{
      font-family:Arial;
      }
      </style

      3. Archivo externo

      Es la mas usada y recomendada ya que mediante este método se consigue una mejor organizacion de archivos, para incluir un archivo CSS externo en HTML se usa la siguiente etiqueta HTML en el :

      <link href="/ubicacion/del/archivo.css" rel="stylesheet">

      Selectores

      CSS funciona en conjunto con los elementos HTML, los identifica mediante los selectores y los estiliza con las propiedades CSS, existen infinidad de selectores, ahora veremos solo unos cuantos:

      Selector universal

      El selector universal esta representado por un asterisco * y se usa para seleccionar a todos los elementos HTML en el documento:

      *{
      font-family:Arial;
      }

      En este ejemplo usamos el atributo font-family que define el tipo de fuente a usar y con el valor de Arial.

      Selector de tipo

      El selector de tipo es definido por el nombre del elemento a seleccionar, por ejemplo si queremos seleccionar todos los elementos h1, el selector seria asi:

      h1{
      color:red;
      }

      Selector de clase

      Este selector es representado por un punto . se usa para seleccionar elementos que contentan el atributo class:

      .box{
      font-weight:bold;
      }

      El atributo font-weight se usa para definir el estilo que la letra ha de llevar, en este caso le hemos puesto el valor de bold o negrita.

      Selector de id

      Este selector esta representado por un # y se usa para seleccionar elementos individuales que tengan el atributo id:

      #box{
      background-color:black;
      }

      Esto hara que el elemento que tenga el id de box tenga un fondo negro.
      Hay que notar que el atributo id es único, dos elementos no pueden tener el mismo id.

      Selector de descendiente

      El selector de descendiente, selecciona a cualquier elemento que descienda de el elemento padre.

      #box ul {
      color:gray;
      }

      Lo que hara ese selector es seleccionar a todos los ul que esten dentro de #box.

      Selector de atributo

      El selector de atributo, selecciona a todos los elementos que tengan el atributo y el valor especificado:

      input[type="text"] {
      background-color:blue;
      }

      Este selector seleccionara a todos los elementos input que tengan atributo type=”text”.

      Pseudo-selector de estado

      Los selectores de estado, seleccionan a los elementos dependiendo de ciertas acciones del usuario:

      • :hover (cuando el cursor pasa por encima del elemento)
      • :active (cuando el usuario clica el elemento con clic derecho o izquierdo)
      • :focus (cuando un elemento esta en foco, mayormente en cajas de texto cuando se dan los eventos del teclado)
      #box:hover{
      background-color:green;
      }
      #box a:active{
      color:blue;
      }
      #box input:focus{
      background-color:black
      color:white;
      }

      En el ejemplo de arriba usamos tanto los selectores de estado, como el de descendencia para decir que todo a que este en estado active dentro de #box tenga la propiedad color:blue.

      Agrupando selectores

      Podemos agrupar selectores para afectar a mas elementos usando menos lineas, para eso usamos comas:

      #box, .box, ul li a, #box:hover, input[type="text"] {
      color:red;
      }

      Ejemplo

      Entendiendo ya los puntos anteriores procederemos a hacer un ejemplo practico:

      <html>
      <head>
      </head>
      <body>
      
      <style>
      *{
       font-family:Arial, sans-serif;
      }
      body{
       background-color:#111111;
      }
      h1{
       color:gray;
      }
      p{
       color:green;
      }
      .holamundo{
       color:orange;
      }
      </style>
      
      <h1 class="holamundo">Hola mundo</h1>
      <p>Esto es un texto de ejemplo que usaremos para aprender CSS!</p>
      
      <h1>Ciao</h1>
      <p class="holamundo">Soy naranja!</p>
      
      </body>
      </html>

      Incrustamos el CSS dentro del mismo documento, y definimos que:

      • Linea 8: Todos elementos tengan como fuente Arial.
      • Linea 11: El elemento body tenga como color de fondo #111111.
      • Linea 14: Todos los elementos h1 sean de color gris.
      • Linea 20: Todos los elementos que tengan la clase holamundo sean de color naranja.

      Obtendríamos lo siguiente:

      Con este ejemplo entendemos que: el primer h1 deberia ser gris (linea 11), pero tiene como clase holamundo entonces es naranja, el segundo párrafo deberla ser verde como el primero, pero tiene la clase holamundo entonces es naranja también.

      En este tutorial hemos tratado solo de unas cuantas propiedades CSS (color, font-family, background-color) que son las mas sencillas para aprender, pero existen decenas de propiedades si quieres ver una lista completa de estas, puedes revisar este PDF.

    • Josue Ochoa

      Hola, soy el editor de este blog, trabajo como desarrollador web freelance, sígueme en Twitter.

    • Tal vez te interese
    Acerca de

    WebTursos es un blog de tutoriales, articulos y recursos para diseñadores y desarrolladores web. mas...

    Suscribete

    Suscríbete para recibir los últimos posts directamente en tu bandeja de entrada: