julio 13, 2020

BitCuco

¡Hola Mundo!

Hojas de estilo desde cero

hojas de estilo
HTML Y CSS
Tiempo de Lectura2 Minuto(s), 50 Segundo(s)
Anuncio / Advertisement

¡Hola y bienvenido/a! a BitCuco en este artículo te voy a explicar que son las hojas de estilo y para que se utilizan sin más comencemos.
Las hojas de estilo o también conocidas como STYLESHEETS en el idioma inglés son las encargadas de estilizar los sitios webs, con ellas podemos modificar los colores, tipografía, contenedores, imágenes a grandes rasgos es organizar el contenido de cada página del sitio estableciendo reglas para que lograr realizar una interfaz agradable para el usuario.

hojas de estilo css

¿Cómo se deben utilizar?

Lo primero que se debe tener en cuenta antes de comenzar a definir los estilos es realizar bocetos donde estableceremos estructura de la página , colores, imágenes, videos,  redacción, esto para darnos una idea de los contenedores que vamos a estilizar.

Una vez que ya tenemos la idea clara ahora es el momento de crear una estructura utilizando etiquetas HTML

Anuncio / Advertisement
, en ella podremos agregar elementos para editarlos con el CSS como también se le conoce.

Cuando terminemos de crear la estructura HTML se puede proceder a utilizar una hoja de estilos, donde vamos a lograr un diseño agradable para el usuario y pueda tener una navegación cómoda durante su visita a nuestro sitio web.

hojas de estilo

Estilos Básicos

Para crear un diseño web tenemos instrucciones para las hojas de estilo que nos ayudan a modificar el aspecto de los elementos HTML, algunos de ellos son el color,tipo de fuente, tamaño de la tipografía, fondo de un texto o contenedor,  dimensiones de las imágenes, enlaces dentro de la página podemos cambiar su estilo predefinido por el navegador.

Anuncio / Advertisement
hojas de estilo

Las instrucciones más conocidas en las hojas de estilo CSS son:

  • Background:Cambia el color de fondo de un elemento HTML
  • Color :Modifica el color de la tipografía
  • Font-size:Muestra más grande o pequeño el tamaño de la fuente de un texto
  • Width : Define el ancho de un contenedor o elemento HTML
  • Height : Especifica un valor para la altura de un elemento HTML
  • Text-align: Alinea el texto, puede ser en el centro, lado izquierdo o derecho
  • Margin : Crea márgenes en los elementos para separarlos
  • Padding : Aumenta un volumen visual en los elementos, simulando profundidad
hojas de estilo

Esas son algunas de las instrucciones CSS que existen sin duda hay más y tienen diferentes funcionalidades, podemos buscarlas en su documentación oficial y practicarlas para que nos ayude a mejorar en los diseños futuros, por ello te recomiendo realizar prácticas de diferentes estructuras HTML

Anuncio / Advertisement
donde puedas agregar tus hojas de estilo e ir probando métodos para lograr interfaces profesionales.

Actualmente tenemos muchas librerías que nos ayudan a crear hojas de estilo más rápido pero intenta utilizar al inicio tus propios diseños para que te ayude a entender la forma de trabajar de los plugins que utilices en el futuro. Ya que automatizan la creación de sitios web de una manera muy rápida.

Puedes apoyarte de conceptos de diseño gráfico para escoger la paleta de colores, las imágenes que piensas utilizar , cual será los textos que vas a escribir , en que sección de la página vas a colocar tu logo

Anuncio / Advertisement
, todo esto es importante seleccionarlo a través de las reglas de composición.

También te recomendamos:

Crear elementos de HTML y comentarios en HTML.

Ver también: https://stackoverflow.com/questions/45254976/how-to-learn-html-and-css

Anuncio / Advertisement
0 0

Sobre el Autor

Irving Alejo

!Hola ! te doy la bienvenida a mi pefil te cuento un poquito sobre mí, soy programador y creador de contenidos digitales, me considero fan de las tecnologías de la infromación.