Que es CSS y cuál es su importancia

CSS (Cascading Style Sheets) o hojas de estilos en cascada es un código que se utiliza para darle un diseño personalizado a los sitios web en HTML, el CSS se le puede aplicar a los textos, imágenes o cualquier elemento HTML que exista en un sitio web.

Para aplicar estilos CSS a un sitio web debes identificar el elemento al cual lo harás, para esto existen muchas formas de hacerlo, la más utilizada es agregar clases a los elementos HTML que deseas cambiar de diseño; p class="clase", de esta manera podemos cambiar las propiedades del párrafo usando en una hoja de estilos; .clase {} y dentro agregar tamaño de fuente, tipo, color y gran infinidad de propiedades que resaltaran el texto en cuestión.

También podemos usar un ID único para aplicar estilos CSS, usar el mismo nombre de la etiqueta o usar selectores más avanzados como los atributos que los explicaremos más adelante.

Selectores con clases

Los selectores con clases se usan de forma correcta para definir estilos que puedas ser reutilizados en varias secciones de un sitio web y evitar la repetición de los mismos estilos.


.clase {1
    font-size: 15px;2
}3

Selectores con IDs

Los selectores con IDs se usan para definir estilos que solo aplican a un solo elemento, los IDs en un documento HTML no se deben repetir así que los estilos aplicados solo afectaran a la etiqueta que lo tenga.


#id {1
    font-family: Arial;2
}3

Selectores con etiquetas

El propósito de esta práctica es usar estilos genéricos para etiquetas que tengan el mismo nombre, agiliza mucho el trabajo al tener un estándar para cada etiqueta del HTML.


p {1
    font-weight: bold;2
}3

Selectores con atributos

e usan de forma avanzada para usar selectores que cumplan con requisitos más específicos, estos se usan con mayor frecuencia cuando una aplicación modifica un documento HTML dependiendo de acciones o estados que se modifiquen en una base de datos. Aunque pueden ser usados de forma estática como las clases, no es una práctica limpia hacerlo con ese propósito.


p[name="parrafo"] {1
    font-style: italic;2
}3

Muchas personas confunden el CSS con un lenguaje de programación ya que utiliza una especie de códigos para formar un estilo a elementos HTML, y aunque al utilizar CSS de forma avanzada puedes lograr resultados que muchos desarrolladores suelen hacerlo con JavaScript, es considerado un Lenguaje de hojas de estilo, como HTML es considerado un lenguaje de marcado de hipertexto utilizado para la creación de la estructura en esqueleto de un sitio web.

Como iniciar con CSS

Para iniciar con CSS debes conocer de forma básica HTML, ya que es necesario porque es a este al que aplicaremos los diferentes estilos y darle interactividad y experiencia de usuario.

Si no conoces HTML debes aprenderlos, antes de iniciar con CSS es necesario que conozcas de forma básica este lenguaje de marcado, aprende HTML básico aquí, cuando domines lo básico podrás empezar aplicar estilo a tus sitios web.

Estructura de una regla CSS

La sintaxis de una regla CSS es bastante sencilla, su composición se basa en un selector al cual se le aplicara; Ejemplo “p”, a estese le abre corchetes y dentro de ellos agregamos las regla de estilo, esta se compone por una propiedad y un valor separados por coma; Ejemplo color:red y terminando con punto y coma; Ejemplo: p { color:red; }


.parrafo {1
    color: red;2
}3

Es hora de practicar, vamos a ver un videotutorial de CSS para iniciar con este espectacular lenguaje de estilos y aprenderemos lo necesitamos para iniciar y que podemos lograr a futuro, todos nuestros cursos están orientados el diseño de sitios web profesionales y orientados al marketing.

Algo importante que debemos saber es a que elementos podemos aplicarles estilos CSS, vamos a mencionar algunos selectores básico, sé que si en estos momentos estas iniciando no vas a entender o conocer algunos, pero hay que ir relacionándose con ellos y que se puede hacer.

Diseño atractivo solo con CSS

CSS tiene un gran potencial para crear diseños complejos, atractivos e interactivos los cuales pueden ser manipulados con eventos de hover, checked y otros para optimizar la carga del sitio.

Aprender algo nuevo

Sin imágenes para optimizar

Existe una ventaja muy grande en no utilizar imágenes o utilizarlas muy poco, actualmente Google prioriza la carga rápida de los sitios para aumentar la posición en los buscadores.

Aprender algo nuevo

Selectores CSS

En un documento hay muchísimos elementos a los cuales se les puede aplicar estilos CSS, dependiendo de la forma de trabajo y orden que utilices en tu código algunos pueden tener beneficios, vamos a conocer los más comunes e importantes.

Etiquetas HTML

Las etiquetas HTML son los diferentes elementos que conforman la estructura de un sitio web, es importante resaltar que solo se les puede aplicar estilos CSS a las etiquetas que van dentro de la etiqueta body. Por ejemplo, si queremos cambiar el color a todas las etiquetas de título principal “H1” y aun párrafo “P” definidas en cualquier parte del documento debemos hacerlo de la siguiente manera.


h1 { 1
    color: white;2
}3
4
p {5
    color: white;6
}7

Ver selectores CSS