Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial esta disenado de esas usuarios que quieren iniciar an usar CSS y no ha transpirado nunca han escrito una hoja de estilos CSS.

No explica bastante sobre CSS. Se centra en como crear un archivo HTML, un archivo CSS desplazandolo hacia el pelo como realizar que los 2 funcionen juntos. Una vez finalizado este tutorial, podreis leer cualquier sobre los otros tutoriales para darle mas moda a los archivos HTML y CSS. Ademas podreis utilizar un editor sobre HTML o CSS, de llevar a cabo lugares Web mas avanzados.

Al final del tutorial habras hecho un archivo HTML igual que este:

El resultado sera la pagina HTML, con colores desplazandolo hacia el pelo formato, todo desarrollado con CSS.

Ten en cuenta que no quiero decir que sea bonita O

Las secciones igual que esta son opcionales. Contienen explicaciones extras de el codigo HTML desplazandolo hacia el pelo CSS del ej. El representacion de “peligro”, situado al comienzo, indica que se intenta sobre un material mas avanzado que el resto.

Transito 1: Escribir el codigo HTML

De este tutorial, te sugiero que emplees las herramientas mas simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran suficiente. La oportunidad comprendido lo elemental, probablemente se quieran emplear herramientas mas complicadas, o hasta programas comerciales igual que Style Master, Dreamweaver o GoLive. Sin embargo de el incremento de la primera hoja sobre estilos, es preferiblemente no distraerse con caracteristicas avanzadas sobre diferentes herramientas.

No emplees procesadores de escrito como Microsoft Word u OpenOffice. Con ellos, generalmente se generan archivos que los navegadores no pueden entender. Para HTML y CSS, lo unico que necesitamos son archivos en escrito aspecto.

El transito 1 consiste en abrir tu editor de escrito (Notepad, TextEdit, HTML Kit o el que desees), iniciar con una ventana vacia asi como escribir lo siguiente:

Realmente, nunca es indispensable escribir el codigo: puedes copiarlo y no ha transpirado pegarlo sin intermediarios en un editor.

La primera camino que aparece en el archivo HTML, le dice al navegador el modelo de HTML (DOCTYPE significa DOCument TYPE – en castellano: MODELO de DOCumento). En este caso, se prostitucion de la version 4.01 sobre HTML.

Las palabras que se encuentran entre se llaman etiquetas (tags) desplazandolo hacia el pelo, igual que puedes ver, el documento esta entre las etiquetas desplazandolo hacia el pelo . Entre asi como Tenemos espacio para distintas clases de informacion que nunca apareceran en la monitor. Hasta hoy por hoy, el documento solo contiene el titulo sin embargo posteriormente Asimismo se anadira la hoja sobre estilos sobre CSS.

El seria donde se situa el texto de el documento. En un principio, cualquier cosa que se Colocar ahi sera mostrado, salvo el escrito que este dentro de estas proximos etiquetas , las cuales muestran el contenido situado en ese sitio igual que un critica sobre relato para nosotros mismos. El navegador la ignorara.

De estas etiquetas de el modelo,

crea una “lista desordenada”, en otras palabras, la listado en la cual los elementos no se encuentran numerados. La etiqueta
indica el comienzo de un “elemento lista”.

Editor mostrando el codigo HTML.

En caso de que deseas conocer lo que significan las nombres que estan entre , un buen lugar para empezar es Comenzando con HTML . Realizare determinados comentarios sobre la estructura de la pagina HTML que estamos utilizando sobre ejemplo.

• “ul” representa la relacion con un hipervinculo por cada elemento. Esto mostrara nuestro “menu sobre navegacion de el sitio” con enlaces a diferentes paginas (ficticias) del lugar Web. Supuestamente, la totalidad de las paginas sobre nuestro sitio Web poseen un menu similar.
• Las elementos “title” asi como “p” componen el unico contenido de esta pagina, mientras que la casa al final (“address”) sera la misma de todas las paginas de el sitio.

Observa que no he cerrado los elementos “li” y no ha transpirado “p”. En HTML (aunque no en XHTML), se pueden suprimir las etiquetas asi como

, que fue lo que hice aqui, precisamente Con El Fin De elaborar el texto mas simple sobre leer. Aunque si se prefiere podran acontecer anadidas.

Vamos an implicar que va an acontecer la pagina de un sitio Web que tendran varias paginas similares. Igual que seria asiduo en paginas Web, esta goza de un menu con enlaces an otras paginas en el sitio ficticio, un contenido unico desplazandolo hacia el pelo una firma.

En seguida, selecciona “Guardar como…” de el menu Archivo, percibe hasta un directorio/carpeta en donde desees proteger el documento (el escritorio puede ser la posibilidad) desplazandolo hacia el pelo posee el archivo como “mipagina.html”. Nunca cierres aun el editor, lo necesitaras una diferente ocasion.

Luego, abre el archivo en un navegador sobre la sub siguiente maneras: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) desplazandolo hacia el pelo haz clic, o copia clic, referente a el archivo “mipagina.html”. El archivo HTML deberia abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo referente a el).

Igual que puedes ver, la pagina tiene un apariencia harto aburrido.

Paso 2: Anadir algunos colores

Probablemente estes observando texto sable sobre un fondo blando, sin embargo lo cual va a depender sobre como este tu navegador configurado. Para que la pagina tenga cГіmo ver quiГ©n le gusta el jdate sin pagar alguna cosa mas sobre encanto podriamos anadir determinados colores. (permite el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con una hoja de Modalidad interna en el archivo HTML. Mas el frente del manillar, pondremos el HTML y no ha transpirado el CSS en archivos variados. La separacion de aquellos archivos seria aconsejable puesto que favorece la utilizacion de la misma hoja sobre moda Con El Fin De diversos archivos HTML: solo debes escribir la hoja de garbo la oportunidad. Pero en este paso, vamos a dejarlo todo en el exacto archivo.

Necesitamos anadir un elemento [etc.]

Las lineas que debes anadir estan marcadas en rojo. Durante la reciente camino dice que eso es una hoja de estilo y no ha transpirado que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido moda al factor “body”. La tercera camino establece el color de el texto igual que morado desplazandolo hacia el pelo la sub siguiente camino lo que realiza es darle al extremo una especie sobre amarillo verdoso.

Las hojas sobre estilo en CSS se encuentran compuestas sobre reglas. Cada regla goza de tres zonas:

1. el selector (en el exponente es: “body”), el que le dice al navegador la zona de el documento que se vera afectada por la indicacion;
2. la pertenencia (en el modelo, ‘color’ desplazandolo hacia el pelo ‘background-color’ son ambas caracteristicas), las cuales especifican que apariencia del esquema va a cambiarse;
3. y no ha transpirado el tasacion (‘purple’ y ‘#d8da3d’), el que da el valor Con El Fin De la casa.

El exponente muestra que seria posible coordinar las reglas. Hemos establecido dos caracteristicas, por lo que podemos tener 2 reglas separadas:

El final de el factor body sera el extremo para al completo el documento. a las otros componentes (p, li, address…) no se les ha dado el menor fondo en particular, debido a que de maneras predeterminada nunca tendran nadie (o seran transparentes). La casa ‘color’ establece el color del texto que se halla en el elemento body, sin embargo los otros componentes que se encuentran adentro sobre body heredaran ese color, a nunca ser que se especifique lo contrario. (Mas adelante anadiremos mas colores).