SlideShare a Scribd company logo
1 of 10
Sergio Ruiz Dávila
CSS significa (Cascading Style Sheets). 
Define como se muestra un elemento 
HTML en un navegador. 
Fue agregado para resolver problemas 
De HTML 4.0 
Sergio Ruiz Dávila
Antes de que se generalizara el uso de CSS, los diseñadores de páginas 
web utilizaban etiquetas HTML especiales para modificar el aspecto de los 
elementos de la página. 
Sergio Ruiz Dávila
CSS permite separar los contenidos de la página y la información sobre su 
aspecto. Dentro de la propia página HTML se crea una zona especial en la 
que se incluye toda la información relacionada con los estilos de la página. 
Sergio Ruiz Dávila
La declaración indica "qué hay que hacer" y el selector indica "a 
quién hay que hacérselo". Por lo tanto, los selectores son 
imprescindibles para aplicar de forma correcta los estilos CSS en 
una página. 
A un mismo elemento HTML se le pueden aplicar varias reglas 
CSS y cada regla CSS puede aplicarse a un número ilimitado de 
elementos. En otras palabras, una misma regla puede aplicarse 
sobre varios selectores y un mismo selector se puede utilizar en 
varias reglas. 
El estándar de CSS 2.1 incluye una docena de tipos diferentes de 
selectores, que permiten seleccionar de forma muy precisa 
elementos individuales o conjuntos de elementos dentro de una 
página web. 
Sergio Ruiz Dávila
Selector universal 
Se utiliza para seleccionar todos los elementos de la página. El 
siguiente ejemplo elimina el margen y el relleno de todos los 
elementos HTML (por ahora no es importante fijarse en la parte de 
la declaración de la regla CSS): 
Sergio Ruiz Dávila
Selector de tipo o etiqueta 
Selecciona todos los elementos de la página cuya etiqueta HTML 
coincide con el valor del selector. El siguiente ejemplo selecciona 
todos los párrafos de la página: 
Sergio Ruiz Dávila
Selector descendente 
Selecciona los elementos que se encuentran dentro de otros 
elementos. Un elemento es descendiente de otro cuando se 
encuentra entre las etiquetas de apertura y de cierre del otro 
elemento. 
Sergio Ruiz Dávila
Selector de clase 
Una de las soluciones más sencillas para aplicar estilos a un solo 
elemento de la página consiste en utilizar el atributo class de HTML 
sobre ese elemento para indicar directamente la regla CSS que se 
le debe aplicar: 
Sergio Ruiz Dávila
Introducción al CSS, Javier Eguiluz, http://librosweb.es/css/ 
Guía Breve de CSS, W3C, 
http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo 
Trucos del CSS, Chris Coyier, http://css-tricks.com/ 
Sergio Ruiz Dávila

More Related Content

What's hot

What's hot (10)

Qué es CSS y con qué se come?
Qué es CSS y con qué se come?Qué es CSS y con qué se come?
Qué es CSS y con qué se come?
 
Hoja de estilo
Hoja de estiloHoja de estilo
Hoja de estilo
 
Graphical User Interface GUI en Flexsim
Graphical User Interface GUI en FlexsimGraphical User Interface GUI en Flexsim
Graphical User Interface GUI en Flexsim
 
Css
CssCss
Css
 
Tarea 3
Tarea 3Tarea 3
Tarea 3
 
Que es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSSQue es CSS? Presentacion Basica para CSS
Que es CSS? Presentacion Basica para CSS
 
CSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en CascadaCSS - Hojas de Estilo en Cascada
CSS - Hojas de Estilo en Cascada
 
Guía Rápida para dominar el CSS
Guía Rápida para dominar el CSSGuía Rápida para dominar el CSS
Guía Rápida para dominar el CSS
 
Salto de página y sección
Salto de página y secciónSalto de página y sección
Salto de página y sección
 
Web
WebWeb
Web
 

Similar to Introducción al CSS

Similar to Introducción al CSS (20)

Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptxDiseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
Diseño y desarrollo web: Introducción al lenguaje CSS IIQ.pptx
 
Hojas de estilo_css
Hojas de estilo_cssHojas de estilo_css
Hojas de estilo_css
 
Css básico
Css básicoCss básico
Css básico
 
Paginas web css
Paginas web cssPaginas web css
Paginas web css
 
04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx04_Estilos CSS y modelos de caja.pptx
04_Estilos CSS y modelos de caja.pptx
 
Html5+css3 02
Html5+css3 02Html5+css3 02
Html5+css3 02
 
Introducción HTML y CSS
Introducción HTML y CSSIntroducción HTML y CSS
Introducción HTML y CSS
 
C3 lenguaje de presentación.
C3 lenguaje de presentación.C3 lenguaje de presentación.
C3 lenguaje de presentación.
 
S2-DAW-2022S1.pptx
S2-DAW-2022S1.pptxS2-DAW-2022S1.pptx
S2-DAW-2022S1.pptx
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
Qué es css
Qué es cssQué es css
Qué es css
 
Introducción a CSS3
Introducción a CSS3Introducción a CSS3
Introducción a CSS3
 
Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6Curso HTML 5 & jQuery - Leccion 6
Curso HTML 5 & jQuery - Leccion 6
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
Qué son selectores en CSS
Qué son selectores en CSSQué son selectores en CSS
Qué son selectores en CSS
 
Css
CssCss
Css
 
Introducción a CSS
Introducción a CSSIntroducción a CSS
Introducción a CSS
 
Introduccion historia css
Introduccion historia cssIntroduccion historia css
Introduccion historia css
 
Taller Wordpress Nivel II
Taller Wordpress Nivel IITaller Wordpress Nivel II
Taller Wordpress Nivel II
 
html y css
html y csshtml y css
html y css
 

More from Universidad del Magdalena (8)

Protocolos Tcp ip
Protocolos Tcp ipProtocolos Tcp ip
Protocolos Tcp ip
 
Crc
CrcCrc
Crc
 
Codigo Hamming
Codigo HammingCodigo Hamming
Codigo Hamming
 
Crc
CrcCrc
Crc
 
Modelo Osi
Modelo OsiModelo Osi
Modelo Osi
 
Guiados No Guiados
Guiados No GuiadosGuiados No Guiados
Guiados No Guiados
 
Taller 7
Taller 7Taller 7
Taller 7
 
Comunicacion De Datos Diapositivas
Comunicacion De Datos DiapositivasComunicacion De Datos Diapositivas
Comunicacion De Datos Diapositivas
 

Recently uploaded

guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfcucciolosfabrica
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30SantiagoAgudelo47
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfLeonardoDantasRivas
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxLeo Florez
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGOyordanespinozanina
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanaMarsielMendoza1
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio2021ArqROLDANBERNALD
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....estefaniaortizsalina
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.docilvrosiebp
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGersonManuelRodrigue1
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docAhilynBasabe
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezPaola575380
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfDanielaPrezMartnez3
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxNorberto Chacon
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialAndreaMlaga1
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoJorge Fernandez
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfslaimenbarakat
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYkarendaza9506
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxJustoAlbertoBaltaSmi
 

Recently uploaded (20)

guia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdfguia de talles de camitas cucciolos 2024.pdf
guia de talles de camitas cucciolos 2024.pdf
 
Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30Portafolio Santiago Agudelo Duran 2024 -30
Portafolio Santiago Agudelo Duran 2024 -30
 
Arquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdfArquitectos del Movimiento Moderno Pt. 2.pdf
Arquitectos del Movimiento Moderno Pt. 2.pdf
 
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docxPLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
PLAN DE MANTENIMIENTO DE SISTEMAS DE AGUA CHONTAYOC.docx
 
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGODIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
DIAPOSITIVAS OFICIAL DE PROYECTO DE GRAGO
 
cabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadanacabildo abierto forma de participación ciudadana
cabildo abierto forma de participación ciudadana
 
Torre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificioTorre 222 sobre instalaciones de este mismo edificio
Torre 222 sobre instalaciones de este mismo edificio
 
Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....Torre agbar analisis arquitectonico.....
Torre agbar analisis arquitectonico.....
 
140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc140254879-Triptico-Color-Dia-de-La-Madre.doc
140254879-Triptico-Color-Dia-de-La-Madre.doc
 
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDADGROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
GROPUIS Y WRIGHT DIPOSITIVA ARQUITECTURA DISEÑO MODERNIDAD
 
Planificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.docPlanificación del mes de afrovenezolanidad2024.doc
Planificación del mes de afrovenezolanidad2024.doc
 
Afiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola PerezAfiche de arquitectura manierista Paola Perez
Afiche de arquitectura manierista Paola Perez
 
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdfCLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
CLASE 2 PSICOTERAPIA COGNITIVO CONDUCTUAL.pdf
 
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptxDISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
DISENO_FACTORIAL_2_2_EXPOSICION_pptx.pptx
 
plantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especialplantilla-de-messi-1.pdf es muy especial
plantilla-de-messi-1.pdf es muy especial
 
Proceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimientoProceso de percepción visual y de reconocimiento
Proceso de percepción visual y de reconocimiento
 
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdfSlaimen Barakat - SLIDESHARE TAREA 3.pdf
Slaimen Barakat - SLIDESHARE TAREA 3.pdf
 
Arte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusaArte textil: Tejidos artesanos en la frontera hispano-lusa
Arte textil: Tejidos artesanos en la frontera hispano-lusa
 
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRYPLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
PLANTILLA UNAD JJAJJJJJWRBJHGURGERRTERTRTRY
 
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptxSESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
SESION 05 MOBILIARIO Y EQUIPAMIENTO.pptx
 

Introducción al CSS

  • 2. CSS significa (Cascading Style Sheets). Define como se muestra un elemento HTML en un navegador. Fue agregado para resolver problemas De HTML 4.0 Sergio Ruiz Dávila
  • 3. Antes de que se generalizara el uso de CSS, los diseñadores de páginas web utilizaban etiquetas HTML especiales para modificar el aspecto de los elementos de la página. Sergio Ruiz Dávila
  • 4. CSS permite separar los contenidos de la página y la información sobre su aspecto. Dentro de la propia página HTML se crea una zona especial en la que se incluye toda la información relacionada con los estilos de la página. Sergio Ruiz Dávila
  • 5. La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo". Por lo tanto, los selectores son imprescindibles para aplicar de forma correcta los estilos CSS en una página. A un mismo elemento HTML se le pueden aplicar varias reglas CSS y cada regla CSS puede aplicarse a un número ilimitado de elementos. En otras palabras, una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. El estándar de CSS 2.1 incluye una docena de tipos diferentes de selectores, que permiten seleccionar de forma muy precisa elementos individuales o conjuntos de elementos dentro de una página web. Sergio Ruiz Dávila
  • 6. Selector universal Se utiliza para seleccionar todos los elementos de la página. El siguiente ejemplo elimina el margen y el relleno de todos los elementos HTML (por ahora no es importante fijarse en la parte de la declaración de la regla CSS): Sergio Ruiz Dávila
  • 7. Selector de tipo o etiqueta Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector. El siguiente ejemplo selecciona todos los párrafos de la página: Sergio Ruiz Dávila
  • 8. Selector descendente Selecciona los elementos que se encuentran dentro de otros elementos. Un elemento es descendiente de otro cuando se encuentra entre las etiquetas de apertura y de cierre del otro elemento. Sergio Ruiz Dávila
  • 9. Selector de clase Una de las soluciones más sencillas para aplicar estilos a un solo elemento de la página consiste en utilizar el atributo class de HTML sobre ese elemento para indicar directamente la regla CSS que se le debe aplicar: Sergio Ruiz Dávila
  • 10. Introducción al CSS, Javier Eguiluz, http://librosweb.es/css/ Guía Breve de CSS, W3C, http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo Trucos del CSS, Chris Coyier, http://css-tricks.com/ Sergio Ruiz Dávila