Introducción a la maquetación de páginas Web con CSS

El CSS (hoja de estilo en cascada) es un lenguaje que nos permite modificar la apariencia de un documento escrito en un lenguaje de marcador. Así a los elementos de la pagina web creado con Html, se les dará la apariencia que se desee utilizando Css (colores, espacio entre elementos, tipos de letras ect), veamos una introducción al mundo de la maquetación de páginas web con css.

Maquetación de páginas Web con CSS

Para comenzar a cambiar el estilo de la pagina deben enlazar la estructura  con el nuevo documento Css.

pueden hacerlo con esta etiqueta que colocaras en el archivo donde esta la estructura, la etiqueta costara de donde tengas guardado el archivo Css.

 <link rel="stylesheet" type="text/css" href="css/estilos.css">

El type es opcional solo si quieres ponerlo, href dice donde se encuentra en mi caso esta en una carpeta llamada css y por esto yo le coloco el / para decir que esta dentro de la carpeta por ultimo deben decir en nombre del archivo.

cuando estos estén enlazados se podrá comenzar a diseñar.

Este es la estructura de la pagina web que utilizare para dar los ejemplos.

Principios css

Reglas css, son todo el conjunto de grupos que se hacen para darle estilos a un elemento estas reglas se componen de un selector que dice que aspecto vamos a modificar y una propiedad  que queremos modificar de lo que es nuestro selector luego tenemos el valor este nos vamos a decir de color, fuente, numero de letra, ect.

Ejemplo:

Body {
Background:#000;
}

En el ejemplo el valor esta en decimal pero también puedes poner el color en ingles.

Esta regla es para cambiar el color de toda la pagina como este tambien podemos cambiar el de la letra el tamaño etc.

Selectores

los selectores es el objeto  que vamos a cambiar, esto quiere decir que se debe escribir primero que titulo, parrafo, palabra o imagen que se le dará una propiedad.

Selector universal

con este se le quitan los espacio que por defecto da el navegador.

Cambiar tamaño y color al texto

Para cambiar cualquier palabra titulo o parrafo nosotros debemos dejar bien en claro que quieres cambiar con el siguiente codigos.

selector{
         propiedad y valor
}

Color: color de letra

font-size: tamaño de letra

background: color de fondo

Ejemplo:

En este yo le especifico varios cambios como el las letras del parrafo esten en blanco, el primer parrafo cambio de color verde porque nosotros le especificamos que solo los parrafos que esten dentro del enlace «a» es el que cambiara a color verde.

El body de negro y solo el primer Titulo tenga la letra en 20px y el color naranja

si queremos que todo los titulos esten iguales agregan todos los titulos de esta forma

H1,h2,h3,h4{
 font-size: 30px;
 color: blue;
}

De esta forma todos los titulos nos apareceran de color azul y del tamaño de letra especificado.

Digamos que se tienen varios enlaces y quieres que cada uno de esos enlaces se a de un color diferente, se le puede agregar un class a cada uno y de esta forma poder definir de que color quieres cada uno.

Ejemplo:

tengo dos enlaces y a cada uno de ellos o solo a uno le agregaremos un class de esta forma:

<a href="#" class="Blue"> Enlace </a>

y en el css pondriamos

.blue{
      color:red;
      font-size:40px;
}

y de esta forma obtenemos que solo uno de los enlace obtenga un color diferente y tamaño.

Unidades de colores

para cambiar el color hay 3 formas de hacerlo en css, podemos hacerlo escribiendo el nombre del color en ingles pero solo hay 17 colores que podemos escribir que son:

esta la que buscar por codigo que seria algo asi, los codigos se consiguen «codigos de colores css» y saldras varias paginas donde te puedes dar  los codigos.

h1{
   Color#4D9B44;
}

la 3 forma seria por valores con  la forma rgb (red, green, blue)

h1{
   color:rgb(53, 131,44);
}

Modelo de caja

Este nos permite establecer el diseño de nuestro sitios web, en este podemos darle tamaño, modificar el aspecto como querramos, podemos modificar los margenes externo e interno, podemos desplazarlas de lugar, etc.

width: este es para saber cuanto espacio ocupara la caja se mide por porcentaje.

border: se mide en pixeles se le da forma si es visible o no, existen diferentes bordes.

height: el lo largo que sera la caja

width: ancho

como en todos a este se le puede cambiar el color de la letra fondo y tamaño de letra.

Fondos

Ademas de los fondos de colores que ya saben colocar, les dejare el codigo con el que podremos insertar imegenes.

de esta forma podremos insertar imagen guardad en nuestro pc, solo se debe poner la ruta en donde esta la imagen, en mi caso como mi imagen esta en una carpeta afuera en la que esta el archivo css,  ponemos «../» que se ve ahi.

si la imagen no la tienen descargada, pueden coger el url de la imagen de alguna pagina, claro que si la imagen es borrada de esa pagina, automáticamente se eliminara de la nuestra también.

quedaria asi, esta imagen podemos centrar, hacer que se repita y muchas funciones mas, que les pondre en otro post.