• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Estructura básica de CSS

Publicada en 1 sep 2014 de Josetxu

 CSS  son las siglas en inglés de Cascade Style Sheet. La traducción al castellano sería Hoja de Estilo en Cascada y es lo que utilizaremos para aplicar estilos en nuestras páginas web.

Los CSS han evolucionado mucho desde su aparición a mediados de los 90 y cada día aparecen nuevos usos y propiedades.

css
 

Las Reglas CSS

En CSS se usan reglas para aplicar diferentes estilos; se define un elemento y se le asignan propiedades con sus respectivos valores.

La estructura básica de una regla css es esta:

CSS
1
selector { declaración }

La declaración se divide a su vez en; propiedad y valor.

CSS
1
selector { propiedad:valor; }

Y podemos añadir múltiple propiedades:

CSS
1
selector { propiedad:valor; propiedad:valor; propiedad:valor; }

Selector

El selector es el elemento al que afectarán los estilos aplicados.
Cualquier elemento HTML puede ser un selector ( body , div , h1 , span , p …).
Los selectores pueden ser de elementos, pueden ser de clase, o de id.

CSS
1
2
3
4
5
body { color:#000000; } /*selector de elemento*/
 
.clase { color:#000000; } /*selector de clase*/
 
#id { color:#000000; } /*selector de id*/

 

Selector de elemento

Los selectores de elemento aplican los estilos a todos los elementos que encuentran con ese selector.

Por ejemplo si tenemos este estilo para el elemento div:

CSS
1
div { background:#00DD00; }

Aplicado al siguiente código HTML el resultado será que todos los elementos div tendrán el fondo verde.

XHTML
1
2
3
<div>Linea 1</div>
<p>Linea 2</p>
<div>Linea 3</div>

Linea 1
Linea 2
Linea 3

Selector de clase

Los selectores de clase se utilizan para dar estilos personalizados a los elementos.

Crearemos una clase llamada .caja con un borde sólido de 2 píxeles de ancho y de color verde. Como veis, las clases se definen con un punto . delante del nombre del selector.

CSS
1
2
3
.caja {
  border:2px solid #00DD00;
}

Y podemos aplicar esos estilos en múltiples elementos HTML con el atributo class, asi:

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="caja">
    Contenido de la capa con la clase <em>.caja</em>
</div>
 
<div>
    Esto es una capa sin la clase <em>.caja</em>
</div>
 
<div>
    La siguiente imagen tambien tiene la clase <em>.caja</em>
    <br />
    <img class="caja" src="https://josetxu.com/demos/img/puzzle-test.png" alt="cinco"/>
</div>

Contenido de la capa con la clase .caja
Esto es una capa sin la clase .caja
La siguiente imagen tambien tiene la clase .caja
logo

Selector de id

Los selectores de id se utilizan para dar estilos a elementos únicos, esto quiere decir que en cada página solo puede existir un elemento con cada id específico.

Creamos un id llamado #contenido para probarlo. Como veis, los id se definen con el signo almohadilla # delante del nombre del selector:

CSS
1
2
3
#contenido {
  border:2px solid #00DD00;
}

Se usa así:

XHTML
1
2
3
<div id="contenido">
    Texto del elemento con el id <i>#contenido</i>
</div>

Texto del elemento con el id #contenido

Hay que recalcar que los selectores de id deben ser usados en un único elemento de la página. Si los usamos con más de un elemento funcionarán, pero no es ese su propósito, sino definir un elemento específico (sirven también para seleccionar un elemento concreto desde Javascript, desde PHP, etc…). Además el W3C no permite varios elementos con el mismo id, nos dará error, aunque la página funcionará correctamente.

Declaración

La declaración son las propiedades con los respectivos valores que queremos que se apliquen al elemento. El valor va separado con dos puntos : de la propiedad. Para poner varias propiedades en una declaración lo haremos separándolas con punto y coma ;.

Podemos poner propiedades una tras otra.

CSS
1
.caja { color:#000000; background:#FFFFFF; border:none; }

Podemos poner cada propiedad en una linea para organizarlo más.

CSS
1
2
3
4
5
.caja {
    color:#000000;
    background:#FFFFFF;
    border:none;
}

Si solo vamos a poner una propiedad en la declaración podemos omitir el punto y coma final, o también después del valor de la última propiedad.

CSS
1
2
3
4
5
6
7
8
.caja1 {
    color:#FFFFFF
}
.caja2 {
    color:#000000;
    background:#FFFFFF;
    border:none
}

A saber:

Las reglas CSS se ejecutan por orden de lectura del código (de arriba hacia abajo) por lo que las reglas escritas más abajo sobreescriben a las de arriba. Por ejemplo si tenemos estos estilos con una regla repetida:

CSS
1
2
3
4
5
6
.caja1 {
    color:#990000; /*texto rojo*/
}
.caja1 {
    color:#000099; /*texto azul*/
}

La regla de más abajo prevalece sobre la de arriba y el resultado sería este:

XHTML
1
2
3
<div class="caja1">
    Texto del elemento con la clase <i>.caja1</i>
</div>

Texto del elemento con la clase .caja1

Los estilos CSS dan muuuucho juego… y poco a poco los iremos viendo.

Publicado en: CSS | Etiquetas: Básico, Responsive |
« Estructura básica de HTML
» Estructura básica de una función Javascript

Artículos Relacionados

  • Estructura básica de HTMLEstructura básica de HTML
  • Iconos con CSSIconos con CSS
  • Flip Cards o Tarjetas Giratorias con CSS3Flip Cards o Tarjetas Giratorias con CSS3
  • Comentar códigoComentar código
  • Diseño responsive con [@media] queries de CSS3Diseño responsive con [@media] queries de CSS3
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Crear pestañas de contenido o 'tabs' fácilmente con javascript
Crear pestañas de contenido o 'tabs' fácilmente con javascript
Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲