El estilo visual y el diseño de un sitio web están dictados por CSS o Hojas de estilo en cascada. Estos son documentos que dan forma al marcado HTML de una página web, y proporcionan a los navegadores web instrucciones sobre cómo mostrar las páginas que resultan de ese marcado. CSS maneja el diseño de una página, así como el color, las imágenes de fondo, la tipografía y mucho más.
Si observa un archivo CSS, verá que, al igual que con cualquier lenguaje de marcado o de codificación, estos archivos tienen una sintaxis específica. Cada hoja de estilo se compone de una serie de reglas CSS. Estas reglas, cuando se toman en su totalidad, son las que dan forma al sitio.
Las partes de una regla CSS
Una regla CSS se compone de dos partes distintas: el selector y la declaración. El selector determina qué se está estilizando en una página y la declaración es cómo debe estilizarse. Por ejemplo:
pag { color: # 000;} Esta es una regla de CSS. La parte del selector es la "p", que es un selector de elementos para "párrafos". Por lo tanto, seleccionaría TODOS los párrafos de un sitio y les proporcionará este estilo (a menos que haya párrafos que estén dirigidos por estilos más específicos en otra parte de su documento CSS). La parte de la regla que dice "color: # 000;" Es lo que se conoce como la declaración. Esa declaración se compone de dos piezas: la propiedad y el valor. La propiedad es la pieza "color" de esta declaración. Indica qué aspecto del selector se cambiará visualmente. El valor es a lo que se cambiará la propiedad CSS elegida. En nuestro ejemplo, estamos usando el valor hexadecimal de # 000, que es la abreviatura de CSS para "negro". Entonces, al usar esta regla de CSS, nuestra página tendría párrafos mostrados en un color de fuente de color negro. Cuando escribes propiedades CSS, no puedes simplemente crearlas como mejor te parezca. Por ejemplo, "color" es una propiedad CSS real, por lo que puede usarlo. Esta propiedad es la que determina el color del texto de un elemento. Si intentara usar "color de texto" o "color de fuente" como propiedades de CSS, estas fallarían porque no son partes reales del lenguaje CSS. Otro ejemplo es la propiedad "background-image". Esta propiedad establece una imagen que se puede usar para un fondo, como esto: .logo { imagen de fondo: url (/images/company-logo.png);} Si intentara usar "imagen de fondo" o "gráfico de fondo" como propiedad, fallarían porque, una vez más, estas no son propiedades de CSS reales. Hay una serie de propiedades CSS que puede usar para diseñar un sitio. Algunos ejemplos son: Estas propiedades de CSS son excelentes para usar como ejemplos, porque todas son muy sencillas y, incluso si no las conoce, probablemente pueda adivinar qué hacen en función de sus nombres. También encontrarás otras propiedades de CSS que pueden no ser tan obvias como funcionan en base a sus nombres: A medida que profundice en el diseño web, encontrará (y usará) todas estas propiedades y más. Cada vez que use una propiedad, debe asignarle un valor, y ciertas propiedades solo pueden aceptar ciertos valores. En nuestro primer ejemplo de la propiedad "color", necesitamos usar un valor de color. Esto podría ser un valor hexadecimal, un valor RGBA o incluso palabras clave de color. Sin embargo, cualquiera de esos valores funcionaría, si usara la palabra "sombrío" con esta propiedad, no haría nada porque, por más descriptiva que sea esa palabra, no es un valor reconocido en CSS. Nuestro segundo ejemplo de "imagen de fondo" requiere que se use una ruta de imagen para obtener una imagen real de los archivos de su sitio. Este es el valor / sintaxis que se requiere. Todas las propiedades CSS tienen valores que ellos esperan. Por ejemplo: Si recorre la lista de propiedades CSS, descubrirá que cada una de ellas tiene valores específicos que utilizarán para crear los estilos a los que están destinados. Editado por Jeremy Girard Conceptos básicos de la propiedad CSS
Algunas propiedades CSS
Las propiedades necesitan valores
