Tutorial 1 - Primeros conceptos
¿Que es?CSS (Cascade Style Sheet) son un conjunto de instrucciones que definen la apariencia de diversos elementos de un documento HTML. El HTML posee ciertas limitaciones a la hora de aplicarle forma a un documento. Pero con las CSS somos capaces de superar esas limitaciones. Las CSS complementan al lenguaje HTML, dándole a éste mayores posibilidades.
Para este curso no necesita ningún software específico. Basta con cualquier editor de texto, por ejemplo, el bloc de notas de Windows, aunque es recomendable algún programa que ayude en la visualización del código.
¿Como agrego CSS a PWG?
Para agregrar CSS a PWG tenemos que darle a Editar diseño > CSS-Design , después vamos a Configuraciones avanzadas > CSS Syn Style Tags y ahi pegaremos el código correspondiente.
Identificadores y clases
Un id (identificador)
El atributo id sirve para identificar de forma única a un elemento dentro de un documento HTML
El valor del atributo id de un elemento no deberia repetirse en ningún otro atributo id del mismo documento. ya que es un valor unico.
Una clase
El valor del atributo class puede repetirse cuantas veces sea necesario, incluso puede llevar más de una clase
El valor del atributo class no tiene ningún valor identificativo del elemento que lo contiene, únicamente sirve para asociarle los estilos al elemento.
Ahora procederemos a realizar un ejemplo de cada uno de ellos , lo podemos pegar en cualquier apartado de la pagina (Texto por encima, Texto por debajo o en el propio contenido)
| Código: |
| <div id="contenido"> Esto es un identificador </div>
|
A cotninuación le agregaremos su código css correspondiente en CSS-Syn Style Tags
| Código: |
| #contenido { background-color:green; } |
Para realizar lo mismo con una clase , el formato cambia
| Código: |
| <div class="contenido"> Esto es una clase </div> |
| Código: |
| Aplicaremos su estilo correspondiente |
| Código: |
| .contenido { background-color:orange; } |
Muy bien si hemos entendido esto , ya comprendemos lo más básico de CSS.
Aplicando css a un elemento en concreto
No se si en el título se entenderá muy bien , pero espero que con el ejemplo quede claro , imaginemos que tenemos dos elementos <a> en cada div correspondiente , y sólo queremos que se ponga de color naranja el elemento <a> del primer div.
| Código: |
| <div id="contenido"> Esto es un div <a>Enlace</a> </div> <div id="contenido2"> <a>Enlace2</a> </div> |
Aplicaremos el CSS que hay a continuación
| Código: |
| #contenido a{ color:red; } |
Aplicando css a una clase en concreto
Igual que el ejemplo anterior pero con clases
Código HTML
| Código: |
| <div class="contenido"> Esto es una clase <a>enlace1</a> </div> <div class="contenido2"> Esto es una clase <a> enlace2 </a> </div> |
Código CSS
| Código: |
| .contenido a { color:orange; } |
Aplicar estilo a un <div> que está dentro de otro <div>
HTML
| Código: |
| <div id="contenido"> Esto es un div <div id="contenido2"> Esto es un div dentro de un div </div> </div> |
CSS
| Código: |
| #contenido #contenido2 { background-color:orange; } |