SlideShare una empresa de Scribd logo
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

Más contenido relacionado

Destacado

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
 

Destacado (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 a Ejemplo de clases en css

Similar a 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
 

Más de 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
 

Más de 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
 

Último

Gestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerGestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerRobertoCarrancioFern
 
Introducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptxIntroducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptxJohanna4222
 
herramientas informaticas mas utilizadas
herramientas informaticas mas utilizadasherramientas informaticas mas utilizadas
herramientas informaticas mas utilizadaspqeilyn0827
 
Unidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfUnidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfMarianneBAyn
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfManuelCampos464987
 
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Luis Fernando Uribe Villamil
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfEmilio Casbas
 
Presentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxPresentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxTaim11
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaFernando Villares
 
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docxwerito139410
 
Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.saravalentinat22
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024DanielErazoMedina
 
Inteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialInteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialEducática
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfjjfch3110
 
lenguaje algebraico.pptx álgebra, trigonometria
lenguaje algebraico.pptx álgebra, trigonometrialenguaje algebraico.pptx álgebra, trigonometria
lenguaje algebraico.pptx álgebra, trigonometriasofiasonder
 
HIGADO Y TRAUMA HEPATICO UDABOL 2024 (3).pdf
HIGADO  Y TRAUMA HEPATICO UDABOL 2024 (3).pdfHIGADO  Y TRAUMA HEPATICO UDABOL 2024 (3).pdf
HIGADO Y TRAUMA HEPATICO UDABOL 2024 (3).pdfIsabelHuairaGarma
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusraquelariza02
 
Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.sofiasonder
 
Licencias para el Uso y el Desarrollo de Software
Licencias para el Uso y el Desarrollo de SoftwareLicencias para el Uso y el Desarrollo de Software
Licencias para el Uso y el Desarrollo de SoftwareAndres Avila
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informáticavazquezgarciajesusma
 

Último (20)

Gestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL ServerGestión de concurrencia y bloqueos en SQL Server
Gestión de concurrencia y bloqueos en SQL Server
 
Introducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptxIntroducción a la robótica con arduino..pptx
Introducción a la robótica con arduino..pptx
 
herramientas informaticas mas utilizadas
herramientas informaticas mas utilizadasherramientas informaticas mas utilizadas
herramientas informaticas mas utilizadas
 
Unidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdfUnidad 1- Historia y Evolucion de las computadoras.pdf
Unidad 1- Historia y Evolucion de las computadoras.pdf
 
Diagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdfDiagrama de flujo basada en la reparacion de automoviles.pdf
Diagrama de flujo basada en la reparacion de automoviles.pdf
 
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
Sistemas distribuidos de redes de computadores en un entorno virtual de apren...
 
Inteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdfInteligencia Artificial y Ciberseguridad.pdf
Inteligencia Artificial y Ciberseguridad.pdf
 
Presentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptxPresentacion y Extension de tema para Blogger.pptx
Presentacion y Extension de tema para Blogger.pptx
 
Posnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativaPosnarrativas en la era de la IA generativa
Posnarrativas en la era de la IA generativa
 
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
3°ð_¦_â_¾ï¸_S34 PLAN DARUKEL DIDÃ_CTICA 23-24.docx
 
Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.
 
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
ACTIVIDAD DE TECNOLOGÍA AÑO LECTIVO 2024
 
Inteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicialInteligencia Artificial para usuarios nivel inicial
Inteligencia Artificial para usuarios nivel inicial
 
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdfTrabajo Coding For kids 1 y 2 grado 9-4.pdf
Trabajo Coding For kids 1 y 2 grado 9-4.pdf
 
lenguaje algebraico.pptx álgebra, trigonometria
lenguaje algebraico.pptx álgebra, trigonometrialenguaje algebraico.pptx álgebra, trigonometria
lenguaje algebraico.pptx álgebra, trigonometria
 
HIGADO Y TRAUMA HEPATICO UDABOL 2024 (3).pdf
HIGADO  Y TRAUMA HEPATICO UDABOL 2024 (3).pdfHIGADO  Y TRAUMA HEPATICO UDABOL 2024 (3).pdf
HIGADO Y TRAUMA HEPATICO UDABOL 2024 (3).pdf
 
proyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmusproyecto invernadero desde el departamento de tecnología para Erasmus
proyecto invernadero desde el departamento de tecnología para Erasmus
 
Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.Estudio de la geometría analitica. Pptx.
Estudio de la geometría analitica. Pptx.
 
Licencias para el Uso y el Desarrollo de Software
Licencias para el Uso y el Desarrollo de SoftwareLicencias para el Uso y el Desarrollo de Software
Licencias para el Uso y el Desarrollo de Software
 
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
(PROYECTO) Límites entre el Arte, los Medios de Comunicación y la Informática
 

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.