Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ pensado Con El Fin De esas gente que quieren comenzar an utilizar CSS asГ­ como nunca han escrito una hoja sobre estilos CSS.

No explica mucho en CSS. Se centra en cГіmo crear un archivo HTML, un archivo CSS y no ha transpirado cГіmo hacer que los 2 funcionen juntos. La oportunidad finalizado este tutorial, podrГ©is leer alguno de los otros tutoriales Con El Fin De darle mГЎs garbo a los archivos HTML desplazГЎndolo hacia el pelo CSS. Asimismo podrГ©is emplear un editor sobre HTML o CSS, para ejecutar lugares Web mГЎs avanzados.

Al final de el tutorial habrГЎs hecho un archivo HTML como Г©ste:

El rendimiento serГЎ la pГЎgina HTML, con colores asГ­ como formato, cualquier desarrollado con CSS.

Ten en cuenta que no deseo hablar de que sea bonita ☺

Las secciones como ésta son opcionales. Contienen explicaciones adicionales del código HTML desplazándolo hacia el pelo CSS de el exponente. El emblema sobre “peligro”, situado al comienzo, indica que se intenta sobre un material más avanzado que el resto.

Transito 1: Escribir el cГіdigo HTML

Para este tutorial, te sugiero que utilices las herramientas mГЎs simples. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, serГЎn suficiente. Una ocasiГіn comprendido lo esencial, probablemente se quieran emplear herramientas mГЎs complicadas, o hasta programas comerciales igual que Style Master, Dreamweaver o GoLive. No obstante de el incremento sobre una primera hoja sobre estilos, serГ­a mejor nunca distraerse con caracterГ­sticas avanzadas de otras herramientas.

Nunca emplees procesadores sobre escrito como Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que las navegadores no podrГ­an interpretar. De HTML desplazГЎndolo hacia el pelo CSS, lo Гєnico que necesitamos son archivos en texto aspecto.

El paso 1 radica en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con la ventana vacГ­a asГ­ como redactar lo siguiente:

En realidad, no serГ­a preciso escribir el cГіdigo: puedes copiarlo asГ­ como pegarlo directamente en un editor.

Durante la reciente lГ­nea que Se Muestra en el archivo HTML, le dice al navegador el prototipo de HTML (DOCTYPE significa DOCument TYPE – en espaГ±ol: MODELO sobre DOCumento). En este caso, se intenta sobre la versiГіn 4.01 de HTML.

Las tГ©rminos que se encuentran dentro de se llaman etiquetas (tags) y no ha transpirado, igual que puedes ver, el documento estГЎ entre las etiquetas y no ha transpirado . Entre y Tenemos espacio Con El Fin De distintas clases sobre documentaciГіn que no aparecerГЎn en la monitor. Inclusive ahora, el documento sГіlo contiene el tГ­tulo sin embargo posteriormente AdemГЎs se aГ±adirГЎ la hoja de estilos sobre CSS.

El es en quГ© lugar se sitГєa el texto de el documento. En un principio, cualquier cosa que se coloque allГ­ serГЎ mostrado, excepto el texto que estГ© dentro de estas prГіximos etiquetas , las cuales muestran el contenido situado en ese lugar igual que un parecer sobre relato de nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas de el prototipo,

crea la “lista desordenada”, en otras palabras, la lista en la que las elementos nunca se encuentran numerados. La etiqueta
indica el principio de un “elemento lista”.

Editor mostrando el cГіdigo HTML.

En caso de que deseas conocer lo que significan los nombres que estГЎn entre , un buen sitio Con El Fin De emprender es Comenzando con HTML . RealizarГ© ciertos comentarios acerca de la infraestructura de la pГЎgina HTML que estamos usando de modelo.

• “ul” representa la lista con un hipervГ­nculo por cada aspecto. Esto mostrarГЎ el “menГє sobre navegaciГіn de el sitio” con enlaces an otras pГЎginas (ficticias) de el sitio Web. Supuestamente, todas las pГЎginas de el lugar Web poseen un menГє similar.
• Las puntos “title” y “p” componen el Гєnico contenido sobre esta pГЎgina, mientras que la casa al final (“address”) serГЎ la misma Con El Fin De la totalidad de las pГЎginas de el sitio.

Observa que no he cerrado los elementos “li” desplazГЎndolo hacia el pelo “p”. En HTML (No obstante nunca en XHTML), se podrГ­an prescindir las etiquetas y

, que fue lo que hice acГЎ, precisamente de elaborar el texto mГЎs discreto de leer. No obstante En Caso De Que se prefiere pueden ser aГ±adidas.

Vamos an implicar que va a ser la pГЎgina sobre un lugar Web que tendrГЎn varias pГЎginas similares. Como serГ­a chat avenue asiduo en pГЎginas Web, Г©sta dispone de un menГє con enlaces an otras pГЎginas en el lugar ficticio, un contenido Гєnico asГ­ como una firma.

Ahora, selecciona “Guardar como…” del menú Archivo, percibe Incluso un directorio/carpeta donde quieras proteger el documento (el escritorio puede ser la posibilidad) y no ha transpirado tiene el archivo igual que “mipagina.html”. No cierres aún el editor, lo necesitarás otra vez.

Después, abre el archivo en un navegador sobre la siguiente maneras: localiza el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y no ha transpirado haz clic, o copia clic, acerca de el archivo “mipagina.html”. El archivo HTML debe abrirse en tu navegador predeterminado. (En caso de que se abre el documento, abre el navegador así como arrastra el archivo referente a él).

Igual que puedes ver, la pГЎgina goza de un apariencia muy aburrido.

Camino 2: AГ±adir varios colores

Probablemente estГ©s observando escrito negro referente a un final blando, pero esto dependerГЎ sobre cГіmo estГ© tu navegador configurado. Con el fin de que la pГЎgina tenga una cosa mГЎs de encanto podemos aГ±adir varios colores. (Deja el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con una hoja sobre estilo interna en el archivo HTML. MГЎs el frente del manillar, ex pondremos el HTML asГ­ como el CSS en archivos diversos. La separaciГіn de todos estos archivos es conveniente ya que facilita la manejo de la misma hoja de moda Con El Fin De diferentes archivos HTML: sГіlo debes escribir la hoja sobre estilo una vez. Sin embargo en este paso, vamos a dejarlo todo en el idГ©ntico archivo.

Necesitamos aГ±adir un elemento etc.

Las lГ­neas que debes aГ±adir estГЎn marcadas en colorado. La primera camino dice que eso es una hoja de moda desplazГЎndolo hacia el pelo que estГЎ escrita en CSS (“text/css”). La segunda camino indica que hemos aГ±adido estilo al aspecto “body”. La tercera camino establece el color de el texto igual que morado asГ­ como la sub siguiente lГ­nea lo que hace es darle al fondo una clase sobre amarillento verdoso.

Las hojas sobre garbo en CSS estГЎn compuestas sobre reglas. Cada regla posee 3 partes:

1. el selector (en el prototipo sería: “body”), el que le dice al navegador la zona de el documento que se verá afectada por la norma;
2. la propiedad (en el exponente, ‘color’ asГ­ como ‘background-color’ son ambas prestaciones), las cuales especifican quГ© matiz de el diseГ±o va a cambiarse;
3. asГ­ como el valor (‘purple’ asГ­ como ‘#d8da3d’), el cual da el precio de la pertenencia.

El ejemplo muestra que serГ­a posible armonizar las reglas. Hemos establecido dos propiedades, debido a que podrГ­amos tener dos reglas separadas:

El fondo del factor body serГЎ el fondo Con El Fin De todo el documento. a las otros elementos (p, li, address…) no se les ha poliedro el menor fondo en concreto, debido a que sobre forma predeterminada no tendrГЎn ninguno (o serГЎn transparentes). La dominio ‘color’ establece el color de el escrito que se haya en el aspecto body, aunque los otros elementos que se encuentran adentro sobre body heredarГЎn ese color, a no acontecer que se especifique lo contrario. (MГЎs el frente del manillar aГ±adiremos mГЎs colores).