SlideShare una empresa de Scribd logo
QUE ES CSS Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. http://www.w3.org
¿Para qué sirve? CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los  Estilos  definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. h1 {color: red;}  h1 es el selector {color: red;} es la declaración
Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>.  <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot;>  <html>  <head> <title>Título</title>  <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://www.w3.org/css/officeFloats.css&quot; />   </head>  <body> . . . . </body>  </html>
Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot;>  <html>  <head> <title>hoja de estilo interna</title>  <style type=&quot;text/css&quot;>  body { padding-left: 11em; font-family: Georgia, &quot;Times New Roman&quot;, serif; color: red; background-color: #d8da3d;  }
h1 { font-family: Helvetica, Geneva, Arial, sans-serif; } </style>   </head>  <body> <h1>Aquí se aplicará el estilo de letra para el Título</h1>  </body>  </html>
h1, h2, h3 { color: red; }  FORMA 2 h1 {color: red;}  h2 {color: red;}  h3 {color: red;} p {text-align:center;color:red} h1 { padding-left: 11em; font-family: Georgia, &quot;Times New Roman&quot;,Times, serif; color: red; background-color: #d8da3d; }
Una hoja de estilo externa , que es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página.  Una hoja de estilo interna , que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página web.  Un estilo en línea , que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es excesivamente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona.
 

Más contenido relacionado

La actualidad más candente (18)

Hojas de estilo CSS
Hojas de estilo CSSHojas de estilo CSS
Hojas de estilo CSS
 
Informática
InformáticaInformática
Informática
 
Estilos cascadas
Estilos cascadasEstilos cascadas
Estilos cascadas
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Etiquetas de lenguaje html
Etiquetas de lenguaje htmlEtiquetas de lenguaje html
Etiquetas de lenguaje html
 
Primeraclase
PrimeraclasePrimeraclase
Primeraclase
 
Web
WebWeb
Web
 
Jessica
JessicaJessica
Jessica
 
Esilo css
Esilo cssEsilo css
Esilo css
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Lenguaje html
Lenguaje htmlLenguaje html
Lenguaje html
 
Html y tags
Html y tagsHtml y tags
Html y tags
 
Retroalimentación 2011 Lopez, Carlos
Retroalimentación 2011 Lopez, CarlosRetroalimentación 2011 Lopez, Carlos
Retroalimentación 2011 Lopez, Carlos
 
Pagina web 1
Pagina web 1Pagina web 1
Pagina web 1
 
Unidad 2
Unidad 2Unidad 2
Unidad 2
 
Jessica
JessicaJessica
Jessica
 
Etiquetas html
Etiquetas htmlEtiquetas html
Etiquetas html
 
Documento nicolas garibello
Documento nicolas garibelloDocumento nicolas garibello
Documento nicolas garibello
 

Destacado

Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Diivenii Sykes
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
Pamela Rodriguez
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
Pamela Rodriguez
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
LISSYCE
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
Simoney Llamas
 

Destacado (20)

Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
Guía Básica de CSS
Guía Básica de CSSGuía Básica de CSS
Guía Básica de CSS
 
Css
CssCss
Css
 
Terminología Web
Terminología WebTerminología Web
Terminología Web
 
Css (cascading style sheets)
Css (cascading style sheets)Css (cascading style sheets)
Css (cascading style sheets)
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
 
html y css
html y csshtml y css
html y css
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
 
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspotDEBER HOJA DE ESTILO (CSS) blog blogger blogspot
DEBER HOJA DE ESTILO (CSS) blog blogger blogspot
 
Identificación del lenguaje ccs
Identificación del lenguaje ccsIdentificación del lenguaje ccs
Identificación del lenguaje ccs
 
Identificacion del lenguaje css
Identificacion del lenguaje cssIdentificacion del lenguaje css
Identificacion del lenguaje css
 
CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?CSS - ¿Cómo agregar estilos a mi página?
CSS - ¿Cómo agregar estilos a mi página?
 
Maquetación web
Maquetación webMaquetación web
Maquetación web
 
Manual Celta 2015 da Chevrolet
Manual Celta 2015 da ChevroletManual Celta 2015 da Chevrolet
Manual Celta 2015 da Chevrolet
 
Lenguaje HTML
Lenguaje HTMLLenguaje HTML
Lenguaje HTML
 
Introducción a HTML y CSS
Introducción a HTML y CSSIntroducción a HTML y CSS
Introducción a HTML y CSS
 
LENGUAJE HTML
LENGUAJE HTMLLENGUAJE HTML
LENGUAJE HTML
 
Html
HtmlHtml
Html
 
HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?HTML ¿qué es y para que sirve?
HTML ¿qué es y para que sirve?
 
Maquetado con HTML y CSS
Maquetado con HTML y CSSMaquetado con HTML y CSS
Maquetado con HTML y CSS
 

Similar a Css

Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
Krolina Agui
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
genesisgray
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
Mariana Barreto
 

Similar a Css (20)

Dhtml
DhtmlDhtml
Dhtml
 
Hojas de estilo (css)
Hojas de estilo (css)Hojas de estilo (css)
Hojas de estilo (css)
 
Manual de css......jpg
Manual de css......jpgManual de css......jpg
Manual de css......jpg
 
Presentación
PresentaciónPresentación
Presentación
 
Manual de css hojas de estilo
Manual de css hojas de estiloManual de css hojas de estilo
Manual de css hojas de estilo
 
Html
HtmlHtml
Html
 
manualrapido_css.pdf
manualrapido_css.pdfmanualrapido_css.pdf
manualrapido_css.pdf
 
Manual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSSManual para elaborar páginas HTM5 con CSS
Manual para elaborar páginas HTM5 con CSS
 
manua.pdf
manua.pdfmanua.pdf
manua.pdf
 
Manualrapido css
Manualrapido cssManualrapido css
Manualrapido css
 
Taller 1 mariana barreto
Taller 1 mariana barretoTaller 1 mariana barreto
Taller 1 mariana barreto
 
Html
HtmlHtml
Html
 
Html presentacion
Html presentacionHtml presentacion
Html presentacion
 
Presentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTMLPresentación Introducción al lenguaje HTML
Presentación Introducción al lenguaje HTML
 
Expo html
Expo htmlExpo html
Expo html
 
Qué es el html
Qué es el htmlQué es el html
Qué es el html
 
Html
HtmlHtml
Html
 
Html geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldanaHtml geraly fernanda cabrera aldana
Html geraly fernanda cabrera aldana
 
Css
CssCss
Css
 
Clase 04 Html
Clase 04   HtmlClase 04   Html
Clase 04 Html
 

Más de Securinf.com Seguridad Informatica - Tecnoweb2.com

Más de Securinf.com Seguridad Informatica - Tecnoweb2.com (20)

Completo conferencia seguridad_web_software_libre_2015
Completo conferencia seguridad_web_software_libre_2015Completo conferencia seguridad_web_software_libre_2015
Completo conferencia seguridad_web_software_libre_2015
 
Presentacion Guia OWASP 2014
Presentacion Guia OWASP 2014Presentacion Guia OWASP 2014
Presentacion Guia OWASP 2014
 
Emprendiendo con software libre-
 Emprendiendo con software libre- Emprendiendo con software libre-
Emprendiendo con software libre-
 
Jsl Colombia 2010 - Seguridad Informatica
Jsl Colombia 2010 - Seguridad InformaticaJsl Colombia 2010 - Seguridad Informatica
Jsl Colombia 2010 - Seguridad Informatica
 
Jsl ponencias v2_diego_salazar_perez
Jsl ponencias v2_diego_salazar_perezJsl ponencias v2_diego_salazar_perez
Jsl ponencias v2_diego_salazar_perez
 
Criptografia-GSeguridad
Criptografia-GSeguridadCriptografia-GSeguridad
Criptografia-GSeguridad
 
Linux seguro - Fedora Colombia
Linux seguro - Fedora ColombiaLinux seguro - Fedora Colombia
Linux seguro - Fedora Colombia
 
Certificacion iso17799 iso 27001 1
Certificacion iso17799 iso 27001 1Certificacion iso17799 iso 27001 1
Certificacion iso17799 iso 27001 1
 
Python workshop
Python workshopPython workshop
Python workshop
 
De Presa A Cazador
De Presa A Cazador De Presa A Cazador
De Presa A Cazador
 
Web 20 vision a la industria
Web 20 vision a la industriaWeb 20 vision a la industria
Web 20 vision a la industria
 
Open solaris
Open solarisOpen solaris
Open solaris
 
Hacking withinnails pdfcompleto
Hacking withinnails pdfcompletoHacking withinnails pdfcompleto
Hacking withinnails pdfcompleto
 
Análisis malware
Análisis malwareAnálisis malware
Análisis malware
 
Sftp rodrigo carreño
Sftp rodrigo carreñoSftp rodrigo carreño
Sftp rodrigo carreño
 
Instalacion drupal 1
Instalacion drupal 1Instalacion drupal 1
Instalacion drupal 1
 
Instalacion drupal 1
Instalacion drupal 1Instalacion drupal 1
Instalacion drupal 1
 
C:\Fake Path\Cauca
C:\Fake Path\CaucaC:\Fake Path\Cauca
C:\Fake Path\Cauca
 
Presentacion Joomla CMS
Presentacion Joomla CMSPresentacion Joomla CMS
Presentacion Joomla CMS
 
Securinf Barcamp
Securinf BarcampSecurinf Barcamp
Securinf Barcamp
 

Último

Último (20)

(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
 
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
HerramientasInformaticas ¿Que es? - ¿Para que sirve? - Recomendaciones - Comp...
 
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
 
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
 
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
 
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
 
herramientas informaticas mas utilizadas
herramientas informaticas mas utilizadasherramientas informaticas mas utilizadas
herramientas informaticas mas utilizadas
 
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
Índice del libro "Big Data: Tecnologías para arquitecturas Data-Centric" de 0...
 
Robótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptxRobótica educativa para la eduacion primaria .pptx
Robótica educativa para la eduacion primaria .pptx
 
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
 
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdfDesarrollo de Habilidades de Pensamiento.docx (3).pdf
Desarrollo de Habilidades de Pensamiento.docx (3).pdf
 
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.
 
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
 
Diagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestreDiagrama de flujo soporte técnico 5to semestre
Diagrama de flujo soporte técnico 5to semestre
 
lenguaje algebraico.pptx álgebra, trigonometria
lenguaje algebraico.pptx álgebra, trigonometrialenguaje algebraico.pptx álgebra, trigonometria
lenguaje algebraico.pptx álgebra, trigonometria
 
3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto3Redu: Responsabilidad, Resiliencia y Respeto
3Redu: Responsabilidad, Resiliencia y Respeto
 
EduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clasesEduFlex, una educación accesible para quienes no entienden en clases
EduFlex, una educación accesible para quienes no entienden en clases
 
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
 
Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.Herramientas informáticas. Sara Torres R.
Herramientas informáticas. Sara Torres R.
 
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
 

Css

  • 1. QUE ES CSS Hojas de Estilo en Cascada (Cascading Style Sheets), es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. http://www.w3.org
  • 2. ¿Para qué sirve? CSS se utiliza para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Los Estilos definen la forma de mostrar los elementos HTML y XML. CSS permite a los desarrolladores Web controlar el estilo y el formato de múltiples páginas Web al mismo tiempo. Cualquier cambio en el estilo marcado para un elemento en la CSS afectará a todas las páginas vinculadas a esa CSS en las que aparezca ese elemento.
  • 3. CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. h1 {color: red;} h1 es el selector {color: red;} es la declaración
  • 4. Utilizando una hoja de estilo externa que estará vinculada a un documento a través del elemento <link>, el cual debe ir situado en la sección <head>. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot;> <html> <head> <title>Título</title> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;http://www.w3.org/css/officeFloats.css&quot; /> </head> <body> . . . . </body> </html>
  • 5. Utilizando el elemento <style>, en el interior del documento al que se le quiere dar estilo, y que generalmente se situaría en la sección <head>. De esta forma los estilos serán reconocidos antes de que la página se cargue por completo.
  • 6. <!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1//EN&quot;> <html> <head> <title>hoja de estilo interna</title> <style type=&quot;text/css&quot;> body { padding-left: 11em; font-family: Georgia, &quot;Times New Roman&quot;, serif; color: red; background-color: #d8da3d; }
  • 7. h1 { font-family: Helvetica, Geneva, Arial, sans-serif; } </style> </head> <body> <h1>Aquí se aplicará el estilo de letra para el Título</h1> </body> </html>
  • 8. h1, h2, h3 { color: red; } FORMA 2 h1 {color: red;} h2 {color: red;} h3 {color: red;} p {text-align:center;color:red} h1 { padding-left: 11em; font-family: Georgia, &quot;Times New Roman&quot;,Times, serif; color: red; background-color: #d8da3d; }
  • 9. Una hoja de estilo externa , que es una hoja de estilo que está almacenada en un archivo diferente al archivo donde se almacena el código HTML de la página Web. Esta es la manera de programar más potente, porque separa completamente las reglas de formateo para la página HTML de la estructura básica de la página. Una hoja de estilo interna , que es una hoja de estilo que está incrustada dentro de un documento HTML. (Va a la derecha dentro del elemento <head>). De esta manera se obtiene el beneficio de separar la información del estilo, del código HTML propiamente dicho. Se puede optar por copiar la hoja de estilo incrustada de una página a otra, (esta posibilidad es difícil de ejecutar si se desea para guardar las copias sincronizadas). En general, la única vez que se usa una hoja de estilo interna, es cuando se quiere proporcionar alguna característica a una página Web en un simple fichero, por ejemplo, si se está enviando algo a la página web. Un estilo en línea , que es un método para insertar el lenguaje de estilo de página, directamente, dentro de una etiqueta HTML. Esta manera de proceder no es excesivamente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código se convierte en una tarea larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro, o estructurado, que debería ser, pero funciona.
  • 10.