Buenos días, Hoy aprenderas la sintaxis de CSS, comprenderas que CSS es muy facil y siempre repetiremos lo mismo en todo el manual, lo único que un poco más amplio.

Sintaxis de CSS

En el lenguaje CSS existen varias formas de representar nuestro codigo CSS, o bien añadimos las etiquetas

<style type="text/css">Aqui nuestro codigo CSS</style>

Hay otra forma de representar un archivo “.css” que esta alojado en un servidor, vamos a ver un ejemplo, el archivo se llama “estilos.css” y vamos a ver donde se coloca el archivo en el codigo, para ello debemos añadir los siguientes atributos:
-REL. Define el tipo del documento o “con qué tiene relación”. En general, su valor será “stylesheet”.

-TYPE. Será siempre “text/css”.

-HREF. Es el valor de la URL que nos permite el acceso al fichero de estilos.

-TITLE. Actualmente casi no se utiliza, pero será muy importante en el futuro. Su importancia radica en que puede haber en el mismo documento más de un tag LINK. En el caso de que haya más de un tag LINK, sólo aquellos cuyo valor de REL sea “stylesheet” se aplicarán inicialmente al documento.

Al final el codigo donde se veran estos atributos y estara nuestro archivo “.css” sera el siguiente:

<link rel="stylesheet" type="text/css" href="estilos.css">

*Ejercicio del tema

Antes de hacer el ejercicio, os recomiendo que os descargueis Notepad++, ya que es el editor de texto que voy a usar en los videos.

-link de descarga:

http://notepad.softonic.com/descargar

Bueno ahora veremos este codigo CSS, lo único que debeis hacer es guardarlo con el nombre de “estilos.css”:

body{
background: #FFEEAA;
color: #000000;
font-size: 16px;
}
#fondo{
background: #FFFFF0;
border: 1px solid #999999;
margin: 5px;
padding: 5px;
}
.titulo{
color: #00CCCC;
font-size: 22px;
}

Una vez guardado el codigo CSS, creamos un nuevo archivo llamado “index.html” en el cual debes pegar el siguiente codigo(IMPORTANTE: crea “index.html” en la misma carpeta que en donde guardastes el archivo “estilos.css”):

<html>
<link rel="stylesheet" type="text/css" href="estilos.css">
<head>
<title>Mi página web</title>
</head>
<body>
<div id="fondo">
<div>
Hola a todos:
</div>
<p>
Esta es mi página web creada en el manual de CSS.
</p>
</div>
</body>
</html>

Si ya has hecho todo este proceso hasta ahora, abre “index.html” y mira haber si te quedo igual a esto:

http://estilo-css.com/wp-content/uploads/2011/03/ejemplopagina.png
Esta Unidad llega a su fin, espero que os halla gustado para que os adentreis al entorno de CSS, la próxima publicación sera este fin de semana, osea que solo tendreis que esperar 1 o 2 días más, solo debeis ser pacientes y esperar la explicación de estos codigos.

fuente: manualdecss.com
próxima unidad: Selectores CSS
próxima clase: la etiqueta div y class