Una página web un lenguaje común para que los navegadores puedan interpretarlo y así mostrarlo a las personas de la forma correcta. Asimismo permitir que otros diseñadores hagan las modificaciones necesarias para su optimización.

Que es CSS?

Son las siglas (Cascading Style Shett) traducido “hojas de estilo en cascada” es un lenguaje que aplica estilos (colores, formas, márgenes, entre otros) a uno o varios documentos, maneja y manipula el diseño y presentación de las páginas web. Funciona junto con el lenguaje HTML.

Para que se utiliza CSS?

Se puede crear reglas en los sitios web como quiere mostrar el contenido. A través de esta herramienta puedes crear formatos útiles para comunicar las ideas con ua presentación agradable para los usuarios.



Ventajas

  • Si se necesita hacer modificaciones se realiza en solo lugar, no se necesita editar todo el HTML
  • Reducción de duplicación de estilos en diferentes lugares, es más fácil organizar y hacer cambios
  • Facilita la creación de versiones diferentes de presentación para otros dispositivos: tablets, Smartphone o dispositivos móviles.

Diferencia entre HTML y CSS

HTML es un lenguaje de marcado y utilizado para dar una estructura de un contenido web. Se trata de las siglas  que corresponden Hyper Text Markup Language, es decir, “Lenguaje de Marca Hipertexto”

HTML no incluye el diseño gráfico solo permite el orden del contenido en la página web, lo hace por medio de las marcas los cuales son etiquetas. Para hacer más eficiente HTML se ha diseñado otros lenguajes computacionales que facilitan la gestión de los datos relacionados con el diseño visual; CSS es uno de los lenguajes más utilizados para ordenar las instrucciones referentes a la apariencia de un sitio web y presentar el contenido de una forma más atractiva.

De esta forma HTML es para estructurar el contenido y CSS se usa para estructura su presentación.

Características y ventaja del CSS

  • Permite un bloque de instrucciones para definir formatos específicos
  • Se utiliza en todos los navegadores
  • Mejora el funcionamiento de la página web
  • Tiene unba sintaxis específica
  • Permite personalizar totalmente la apariencia de las páginas




Estructura del CSS                 

Selector

Apertura

Declaración 1

Declaración 2

Cierre

H1

{

color:

blue;

Font-size:

12px

}

 

 

Propiedad

Valor

Propiedad

Valor

 

 

Cada declaración está compuesta a su vez por una propiedad y su valor

Normalmente los selectores son elementos HTML a los cuales se les quiere aplicar un estilo

Tipos de selectores

  • Selector universal (*)

Se utiliza para seleccionar los elementos de la página

* {  margin: 0; }

En este caso se va aplicar un margen de tamaño 0 a todos los elementos html de nuestra pagina

  • Selector de etiqueta HTML

Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor selector

h1 { color: blue; }

p { color: black; }

h1, p { color: blue; }

Primero establece el color de letras de todos los títulos <h1>  y la página en color azul

En segundo caso color de texto a todos los párrafos <p> estará en color negro

El tercer caso se establece que el color del texto de los títulos <h1> y de párrafos <p> de la página será azul.

  • Selector descendente

Un elemento es descendiente de otro cuando se encuentra las etiquetas (es un texto incluido entre símbolos menor que< mayor que >) de apertura y cierre del otro elemento.

p span {color: red;}

En esta ocasión se aplicara un color rojo al texto de los elementos <span>

  • Selector hijos

Se usa para seleccionar elemento que es hijo directo de otro elemento y se indica mediante el signo mayor que (>)

p > span {color: blue;}

Se aplica color azul al texto de todos los elementos  <span>

  • Selector de atributos

Permiten los elementos HTML en función de sus atributos y/o valores de esos atributos.

input [type="text"] {

             width: 150px;

}

Se aplicara un ancho de 150px a todos los componentes <input> de tipo “text”

  • Selector id

Se utiliza para definir estilos sobre un solo elemento, el cual tiene un valor único en todo el documento. Hacemos referencia a el anteponiendo el símbolo (#)

#idelemento{

        text-align: center;

        color: red;

}

En este caso se centrara y se establecerá de color rojo, los textos que se encuentre dentro de los elementos HTML con el atributo id=”idelemento”.

  •  Selector class

Con el selector class se puede definir el mismo estilo para diferentes elementos HTML que posean el mismo valor en este tributo. El valor del sector class debe ir antepuesto por un punto (.)

.elemento{

         text-align: center;

         color: red;

}