{"id":815,"date":"2025-11-04T10:20:59","date_gmt":"2025-11-04T09:20:59","guid":{"rendered":"https:\/\/vermiip.es\/blog\/?p=815"},"modified":"2025-11-04T10:20:59","modified_gmt":"2025-11-04T09:20:59","slug":"curso-de-html5-y-css3-como-aplicar-los-estilos","status":"publish","type":"post","link":"https:\/\/vermiip.es\/blog\/curso-de-html5-y-css3-como-aplicar-los-estilos\/","title":{"rendered":"Curso de HTML5 y CSS3: C\u00f3mo aplicar los estilos"},"content":{"rendered":"

Selectores en CSS3<\/h2>\n

Los selectores en CSS3 se utilizan para apuntar a elementos HTML y aplicarles estilos. Existen varios tipos de selectores, cada uno con su propia funcionalidad y casos de uso ideales. A continuaci\u00f3n, te presento los principales tipos de selectores disponibles en CSS3.<\/p>\n

Selectores de etiquetas<\/h3>\n

Los selectores de etiquetas se utilizan para seleccionar todos los elementos de un mismo tipo (etiqueta HTML). El formato es simple: basta con escribir el nombre de la etiqueta.<\/p>\n

p {\n    color: blue;\n}<\/code><\/pre>\n
En este ejemplo, todos los elementos <p><\/strong> de la p\u00e1gina se mostrar\u00e1n en color azul.<\/p>\n
Selectores de clases<\/h3>\n
Los selectores de clases son m\u00e1s flexibles. Se utilizan para seleccionar elementos que comparten una misma clase, permitiendo que diferentes etiquetas tengan el mismo estilo. Para usar un selector de clase, se precede el nombre de la clase con un punto (.) en CSS.<\/p>\n
.mi-clase {\n    font-size: 18px;\n    background-color: yellow;\n}<\/code><\/pre>\n
Este c\u00f3digo aplicar\u00e1 un tama\u00f1o de fuente de 18px y un fondo amarillo a todos los elementos que tengan la clase mi-clase<\/strong>.<\/p>\n
Selectores de ID<\/h3>\n
Los selectores de ID son espec\u00edficos para un \u00fanico elemento en la p\u00e1gina. Se utilizan cuando quieres aplicar estilos \u00fanicos a un elemento en particular. En CSS, se utiliza el s\u00edmbolo de almohadilla (#) para los selectores de ID.<\/p>\n
#mi-id {\n    margin: 20px;\n    border: 1px solid black;\n}<\/code><\/pre>\n
En este caso, solo el elemento con el ID mi-id<\/strong> obtendr\u00e1 un margen de 20px y un borde negro.<\/p>\n
Combinaci\u00f3n de selectores<\/h3>\n
CSS tambi\u00e9n permite combinar varios selectores de diversas maneras, lo que proporciona a\u00fan m\u00e1s control sobre los estilos que se aplican. Por ejemplo:<\/p>\n
div.mi-clase {\n    color: red;\n}<\/code><\/pre>\n
Este selector aplica el color rojo \u00fanicamente a los <div><\/strong> que tienen la clase mi-clase<\/strong>.<\/p>\n
Descendientes y selectores de hijo<\/h3>\n
Adem\u00e1s de los selectores b\u00e1sicos, podemos seleccionar elementos en funci\u00f3n de su relaci\u00f3n con otros elementos. Por ejemplo, un selector de descendientes selecciona todos los elementos que est\u00e1n dentro de un determinado elemento.<\/p>\n
ul li {\n    list-style-type: square;\n}<\/code><\/pre>\n
Este selector aplicar\u00e1 un estilo a todos los <li><\/strong> que est\u00e9n dentro de un <ul><\/strong>, cambiando el tipo de marcador a cuadrado.<\/p>\n
Ejemplo pr\u00e1ctico de uso de selectores<\/h3>\n
A continuaci\u00f3n, presento un ejemplo completo que combina varios tipos de selectores:<\/p>\n
<!DOCTYPE html>\n<html lang=\"es\">\n<head>\n    <link rel=\"stylesheet\" href=\"styles.css\">\n<\/head>\n<body>\n\n    <header>\n        <h1>Mi P\u00e1gina Web<\/h1>\n    <\/header>\n\n    <ul class=\"menu\">\n        <li><a href=\"#home\">Inicio<\/a><\/li>\n        <li><a href=\"#about\">Acerca de<\/a><\/li>\n        <li><a href=\"#services\">Servicios<\/a><\/li>\n    <\/ul>\n\n    <article id=\"about\">\n        <p class=\"texto\">\u00a1Bienvenido a mi p\u00e1gina!<\/p>\n    <\/article>\n\n<\/body>\n<\/html><\/code><\/pre>\n
En el archivo CSS correspondiente, podr\u00edas aplicar estilos a los diferentes selectores, por ejemplo:<\/p>\n
h1 {\n    color: green;\n}\n\n.menu li {\n    display: inline;\n    padding: 10px;\n}\n\n#about {\n    background: lightgray;\n}<\/code><\/pre>\n
Conclusi\u00f3n<\/h2>\n
Los selectores son una parte esencial para aplicar estilos en CSS. Comprender c\u00f3mo usarlos correctamente te permitir\u00e1 crear p\u00e1ginas web m\u00e1s atractivas y funcionales. A medida que desarrolles tus habilidades en HTML5 y CSS3, experimentar con diferentes selectores y combinaciones te ayudar\u00e1 a perfeccionar tu enfoque en la estilizaci\u00f3n de elementos.<\/p>\n
Fuentes y lecturas recomendadas<\/h3>\n