Introducción a CSS
CSS Tutorial » Introducción a CSS
CSS es el lenguaje que usamos para diseñar una página web.
Qué puede hacer con CSS
Hay muchas más cosas que puede hacer con CSS.
- Puede aplicar fácilmente las mismas reglas de estilo en varios elementos.
- Puede controlar la presentación de varias páginas de un sitio web con una sola hoja de estilo.
- Puede presentar la misma página de manera diferente en diferentes dispositivos.
- Puede aplicar estilos a los estados dinámicos de elementos como el desplazamiento, el enfoque, etc., que de otro modo no sería posible.
- Puede cambiar la posición de un elemento en una página web sin cambiar el marcado.
- Puede modificar la visualización de los elementos HTML existentes.
- Puede transformar elementos como escalar, rotar, sesgar, etc. en un espacio 2D o 3D.
- Puede crear animaciones y efectos de transición sin utilizar JavaScript.
- Puede crear una versión para imprimir de sus páginas web.
La lista no termina aquí, hay muchas otras cosas interesantes que puedes hacer con CSS. Aprenderá sobre todos ellos en detalle en los próximos capítulos.
Ventajas de usar CSS
La mayor ventaja de CSS es que permite separar el estilo y el diseño del contenido del documento. Aquí hay algunas ventajas más, ¿por qué debería empezar a usar CSS?
- CSS ahorra mucho tiempo : CSS ofrece mucha flexibilidad para establecer las propiedades de estilo de un elemento. Puede escribir CSS una vez; y luego se puede aplicar el mismo código a los grupos de elementos HTML y también se puede reutilizar en varias páginas HTML.
- Mantenimiento sencillo : CSS proporciona un medio sencillo para actualizar el formato de los documentos y mantener la coherencia en varios documentos. Porque el contenido de todo el conjunto de páginas web se puede controlar fácilmente utilizando una o más hojas de estilo.
- Las páginas se cargan más rápido : CSS permite que varias páginas compartan la información de formato, lo que reduce la complejidad y la repetición en el contenido estructural de los documentos. Reduce significativamente el tamaño de la transferencia de archivos, lo que resulta en una carga de página más rápida.
- Estilos superiores a HTML : CSS tiene capacidades de presentación mucho más amplias que HTML y proporciona un control mucho mejor sobre el diseño de sus páginas web. Por lo tanto, puede dar una mejor apariencia a sus páginas web en comparación con los elementos y atributos de presentación HTML.
- Compatibilidad con varios dispositivos : CSS también permite optimizar las páginas web para más de un tipo de dispositivo o medio. Usando CSS, el mismo documento HTML se puede presentar en diferentes estilos de visualización para diferentes dispositivos de renderizado como computadoras de escritorio, teléfonos celulares, etc.
Tutorial gratis CSS
Ejemplo de tutorial de CSS
Veamos un ejemplo concreto de cómo se expresarían las reglas anteriores en el lenguaje del CSS:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<title>Cómo crear alineación de texto con estilo CSS - ejemplos</title>
<style>
#primera_caja {
width: 320px;
text-align:right;
border: 2px solid #00FF00;
background-color: #FFFF99;
}
.segunda_caja {
text-align:right;
width: 270px;
border: 2px solid #0000FF;
margin-top: 18px;
background-color: #FFCC99;
padding: 12px;
}
</style>
</head>
<body>
<div id="primera_caja">
<h1>El texto de estilo CSS se alinea a la derecha</h1>
texto aquí a la derecha
<div style="text-align:center; background-color: #FF0099; padding:10px">Texto Centro CSS en línea.</div>
</div>
<div class="segunda_caja">texto derecho CSS interno</div>
</body>
</html>
CSS Tutorial gratis en linea
css tutorial gratis español
Introducción a CSS - css.es
Online Editor
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
HTML Templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
CSS HTML Layout
Find here examples of creative and unique website layouts.
Free CSS HTML Menu
Find here examples of creative and unique website CSS HTML menu.