SlideShare a Scribd company logo
1 of 3
Download to read offline
Ejemplo de Clases en CSS 
En el siguiente ejemplo se observara el funcionamiento de las clases en CSS 
 Código html sin el uso de clases: 
Como se observa se declarara las propiedades a cada objeto en el código css donde el texto al cargar el archivo html estará de color blanco, pero existe otra forma de hacerlo más abreviado proporcionando una clase a dicho texto.
 Código html con el uso de clases: 
Ahora dentro de las etiquetas div se declara una clase con nombre clase_objeto_blanco la cual vamos a utilizar en nuetro código css. Ahora en la segunda imagen le ponemos la propiedad de color blanco al selector con el nombre de dicha clase la cual esta precedida por un punto, con esto todas las clases que tengan ese nombre van a heredar la propiedad de color blanco como se observa en la siguiente imagen.
Ejemplo de clases en css

More Related Content

Viewers also liked

Maicol garcia y lessly tique
Maicol garcia y lessly tiqueMaicol garcia y lessly tique
Maicol garcia y lessly tiqueLessly Tique
 
Repositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014pptRepositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014pptmariaauxiliadora79
 
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24Germán Reyes
 
CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2Christian Rimbaut
 
Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa laarveja
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Merly QA
 
Le comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprisesLe comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprisesColombe DISPARD-MELGRANI
 
Cubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendantCubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendantFrench Tech Côte d'Azur
 
Visita a la candelaria
Visita  a la  candelariaVisita  a la  candelaria
Visita a la candelariananitagalvis25
 
Visita a la candelaria gabriel parrado
Visita a la candelaria gabriel parradoVisita a la candelaria gabriel parrado
Visita a la candelaria gabriel parradonanitagalvis25
 
Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics Eskape
 
Seug.miracles du maquillage.2
Seug.miracles du maquillage.2Seug.miracles du maquillage.2
Seug.miracles du maquillage.2zet
 
memoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexesmemoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexesRaquel Pollo Gonzalez
 

Viewers also liked (20)

Embraer Courses
Embraer CoursesEmbraer Courses
Embraer Courses
 
Encuesta estadistica
Encuesta estadisticaEncuesta estadistica
Encuesta estadistica
 
Taller nora-medina-pam
Taller nora-medina-pamTaller nora-medina-pam
Taller nora-medina-pam
 
Maicol garcia y lessly tique
Maicol garcia y lessly tiqueMaicol garcia y lessly tique
Maicol garcia y lessly tique
 
Repositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014pptRepositorios taller-nora-medina-2014ppt
Repositorios taller-nora-medina-2014ppt
 
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
Laboratorio para el área tecnológica Fgrb m4 u2_gpo24
 
Plagio.
Plagio.Plagio.
Plagio.
 
CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2CV - Christian Rimbaut - Acheteur international 2
CV - Christian Rimbaut - Acheteur international 2
 
Atelier abécédaire
Atelier abécédaireAtelier abécédaire
Atelier abécédaire
 
Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa Colección permacultura 18 colemnas en la casa
Colección permacultura 18 colemnas en la casa
 
Sapeur teste
Sapeur testeSapeur teste
Sapeur teste
 
Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.Ejercicio2 maquete utilizando css externo.
Ejercicio2 maquete utilizando css externo.
 
CV frans
CV fransCV frans
CV frans
 
Le comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprisesLe comparatif France Suisse reserve des surprises
Le comparatif France Suisse reserve des surprises
 
Cubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendantCubical Drift : Studio de jeux vidéo indépendant
Cubical Drift : Studio de jeux vidéo indépendant
 
Visita a la candelaria
Visita  a la  candelariaVisita  a la  candelaria
Visita a la candelaria
 
Visita a la candelaria gabriel parrado
Visita a la candelaria gabriel parradoVisita a la candelaria gabriel parrado
Visita a la candelaria gabriel parrado
 
Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics Réinventez la productivité avec Microsoft Dynamics
Réinventez la productivité avec Microsoft Dynamics
 
Seug.miracles du maquillage.2
Seug.miracles du maquillage.2Seug.miracles du maquillage.2
Seug.miracles du maquillage.2
 
memoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexesmemoire-Raquel-version-finale+annexes
memoire-Raquel-version-finale+annexes
 

Similar to Ejemplo de clases en css

Similar to Ejemplo de clases en css (7)

Programación web modelado en cajas
Programación web modelado en cajasProgramación web modelado en cajas
Programación web modelado en cajas
 
Lenguaje de programación II-Clase4.pptx
Lenguaje de programación II-Clase4.pptxLenguaje de programación II-Clase4.pptx
Lenguaje de programación II-Clase4.pptx
 
Programación_del_lado_del_servidor......
Programación_del_lado_del_servidor......Programación_del_lado_del_servidor......
Programación_del_lado_del_servidor......
 
2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)2. Introducción a las Hojas de estilo (CSS)
2. Introducción a las Hojas de estilo (CSS)
 
Definicion galeria de imagenes
Definicion galeria de imagenesDefinicion galeria de imagenes
Definicion galeria de imagenes
 
Leguaje de programacion C#
Leguaje de programacion C#Leguaje de programacion C#
Leguaje de programacion C#
 
Guia de css para principiantes
Guia de css para principiantesGuia de css para principiantes
Guia de css para principiantes
 

More from OVAWEB

Mantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHPMantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHPOVAWEB
 
Ejemplo validación
Ejemplo validaciónEjemplo validación
Ejemplo validaciónOVAWEB
 
Ejemplo de formulario
Ejemplo de formularioEjemplo de formulario
Ejemplo de formularioOVAWEB
 
Ejemplo de css
Ejemplo de cssEjemplo de css
Ejemplo de cssOVAWEB
 
Los Formularios en HTML
Los Formularios en HTMLLos Formularios en HTML
Los Formularios en HTMLOVAWEB
 
Las Tablas en HTML
Las Tablas en HTMLLas Tablas en HTML
Las Tablas en HTMLOVAWEB
 
Listas en HTML
Listas en HTMLListas en HTML
Listas en HTMLOVAWEB
 
Imágenes en HTML
Imágenes en HTMLImágenes en HTML
Imágenes en HTMLOVAWEB
 
Párrafos en HTML
Párrafos en HTMLPárrafos en HTML
Párrafos en HTMLOVAWEB
 

More from OVAWEB (9)

Mantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHPMantener valores en los campos de texto de un formulario PHP
Mantener valores en los campos de texto de un formulario PHP
 
Ejemplo validación
Ejemplo validaciónEjemplo validación
Ejemplo validación
 
Ejemplo de formulario
Ejemplo de formularioEjemplo de formulario
Ejemplo de formulario
 
Ejemplo de css
Ejemplo de cssEjemplo de css
Ejemplo de css
 
Los Formularios en HTML
Los Formularios en HTMLLos Formularios en HTML
Los Formularios en HTML
 
Las Tablas en HTML
Las Tablas en HTMLLas Tablas en HTML
Las Tablas en HTML
 
Listas en HTML
Listas en HTMLListas en HTML
Listas en HTML
 
Imágenes en HTML
Imágenes en HTMLImágenes en HTML
Imágenes en HTML
 
Párrafos en HTML
Párrafos en HTMLPárrafos en HTML
Párrafos en HTML
 

Recently uploaded

Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxNombre Apellidos
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaarkananubis
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxAlexander López
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadMiguelAngelVillanuev48
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxazmysanros90
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxJOSEMANUELHERNANDEZH11
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptJavierHerrera662252
 
Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..RobertoGumucio2
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA241531640
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxJOSEFERNANDOARENASCA
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptMiguelAtencio10
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxaylincamaho
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.241514949
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxAlexander López
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafiosFundación YOD YOD
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMidwarHenryLOZAFLORE
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfSergioMendoza354770
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son241514984
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELmaryfer27m
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx241522327
 

Recently uploaded (20)

Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptxCrear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
Crear un recurso multimedia. Maricela_Ponce_DomingoM1S3AI6-1.pptx
 
R1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en minaR1600G CAT Variables de cargadores en mina
R1600G CAT Variables de cargadores en mina
 
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptxLAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
LAS_TIC_COMO_HERRAMIENTAS_EN_LA_INVESTIGACIÓN.pptx
 
Presentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidadPresentación inteligencia artificial en la actualidad
Presentación inteligencia artificial en la actualidad
 
tics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptxtics en la vida cotidiana prepa en linea modulo 1.pptx
tics en la vida cotidiana prepa en linea modulo 1.pptx
 
Hernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptxHernandez_Hernandez_Practica web de la sesion 11.pptx
Hernandez_Hernandez_Practica web de la sesion 11.pptx
 
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.pptTEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
TEMA 2 PROTOCOLO DE EXTRACCION VEHICULAR.ppt
 
Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..Plan Sarmiento - Netbook del GCBA 2019..
Plan Sarmiento - Netbook del GCBA 2019..
 
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6    CREAR UN RECURSO MULTIMEDIAActividad integradora 6    CREAR UN RECURSO MULTIMEDIA
Actividad integradora 6 CREAR UN RECURSO MULTIMEDIA
 
Arenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptxArenas Camacho-Practica tarea Sesión 12.pptx
Arenas Camacho-Practica tarea Sesión 12.pptx
 
dokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.pptdokumen.tips_36274588-sistema-heui-eui.ppt
dokumen.tips_36274588-sistema-heui-eui.ppt
 
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptxMedidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
Medidas de formas, coeficiente de asimetría y coeficiente de curtosis.pptx
 
El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.El uso de las TIC's en la vida cotidiana.
El uso de las TIC's en la vida cotidiana.
 
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptxEl_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
El_Blog_como_herramienta_de_publicacion_y_consulta_de_investigacion.pptx
 
La era de la educación digital y sus desafios
La era de la educación digital y sus desafiosLa era de la educación digital y sus desafios
La era de la educación digital y sus desafios
 
Mapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptxMapa-conceptual-del-Origen-del-Universo-3.pptx
Mapa-conceptual-del-Origen-del-Universo-3.pptx
 
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdfPARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
PARTES DE UN OSCILOSCOPIO ANALOGICO .pdf
 
El uso de las tic en la vida ,lo importante que son
El uso de las tic en la vida ,lo importante  que sonEl uso de las tic en la vida ,lo importante  que son
El uso de las tic en la vida ,lo importante que son
 
El uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFELEl uso delas tic en la vida cotidiana MFEL
El uso delas tic en la vida cotidiana MFEL
 
FloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptxFloresMorales_Montserrath_M1S3AI6 (1).pptx
FloresMorales_Montserrath_M1S3AI6 (1).pptx
 

Ejemplo de clases en css

  • 1. Ejemplo de Clases en CSS En el siguiente ejemplo se observara el funcionamiento de las clases en CSS  Código html sin el uso de clases: Como se observa se declarara las propiedades a cada objeto en el código css donde el texto al cargar el archivo html estará de color blanco, pero existe otra forma de hacerlo más abreviado proporcionando una clase a dicho texto.
  • 2.  Código html con el uso de clases: Ahora dentro de las etiquetas div se declara una clase con nombre clase_objeto_blanco la cual vamos a utilizar en nuetro código css. Ahora en la segunda imagen le ponemos la propiedad de color blanco al selector con el nombre de dicha clase la cual esta precedida por un punto, con esto todas las clases que tengan ese nombre van a heredar la propiedad de color blanco como se observa en la siguiente imagen.