Tutorial de CSS Comenzando con HTML + CSS

Este corto tutorial estГЎ diseГ±ado Con El Fin De esas personas que quieren empezar an usar CSS y no ha transpirado De ningГєn modo han texto una hoja sobre estilos CSS.

Nunca explica bastante sobre CSS. Se centra en cГіmo producir un archivo HTML, un archivo CSS y no ha transpirado cГіmo efectuar que las 2 funcionen juntos. Una oportunidad finalizado este tutorial, podrГ©is leer cualquier de las otros tutoriales para darle mГЎs Modalidad a los archivos HTML y CSS. TambiГ©n podrГ©is usar un editor de HTML o CSS, de progresar lugares Web mГЎs avanzados.

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

El consecuencia serГЎ la pГЎgina HTML, con colores y no ha transpirado formato, cualquier desarrollado con CSS.

Ten en cuenta que nunca deseo declarar que sea bonita ☺

Las secciones igual que ésta son opcionales. Contienen explicaciones extras del código HTML así como CSS del prototipo. El emblema de “peligro”, situado al fundamentos, indica que se intenta de 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. La ocasiГіn comprendido lo fundamental, probablemente se quieran emplear herramientas mГЎs complicadas, o tambien programas comerciales igual que Style Master, Dreamweaver o GoLive. Aunque para el progreso sobre una primera hoja de estilos, es mejor no distraerse con caracterГ­sticas avanzadas sobre otras herramientas.

Nunca uses procesadores de escrito igual que Microsoft Word u OpenOffice. Con ellos, normalmente se generan archivos que los navegadores no podrГ­an entender. Para HTML y CSS, lo Гєnico que necesitamos son archivos en texto plano.

El camino 1 consiste en abrir tu editor sobre escrito (Notepad, TextEdit, HTML Kit o el que desees), empezar con la ventana vacГ­a asГ­ como redactar lo sub siguiente:

Realmente, no serГ­a obligatorio escribir el cГіdigo: puedes copiarlo y pegarlo sin intermediarios en un editor.

La primera lГ­nea que Se Muestra en el archivo HTML, le dice al navegador el modelo de HTML (DOCTYPE quiere decir DOCument TYPE – en espaГ±ol: MODELO sobre DOCumento). En este caso, se trata de la interpretaciГіn 4.01 sobre HTML.

Las palabras que se encuentran dentro de se llaman etiquetas (tags) y no ha transpirado, como puedes ver, el documento estГЎ dentro de las etiquetas y . Entre asГ­ como Tenemos lugar de diferentes tipos sobre informaciГіn que nunca aparecerГЎn en la pantalla. Inclusive Actualmente, el documento sГіlo contiene el tГ­tulo No obstante posteriormente igualmente se aГ±adirГЎ la hoja de estilos de CSS.

El serГ­a dГіnde se sitГєa el escrito del documento. En un principio, cualquier cosa que se coloque allГЎ serГЎ mostrado, salvo el escrito que estГ© adentro de estas prГіximos etiquetas , las cuales muestran el contenido situado en ese sitio como un interpretaciГіn sobre relato Con El Fin De nosotros mismos. El navegador la ignorarГЎ.

De las etiquetas del ejemplo,

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

Editor mostrando el cГіdigo HTML.

Si quieres saber lo que significan los nombres que estГЎn entre , un buen sitio Con El Fin De emprender es Comenzando con HTML . RealizarГ© determinados comentarios sobre la infraestructura de la pГЎgina HTML que estamos utilizando de prototipo.

  • “ul” representa la lista con un hipervГ­nculo por cada factor. Lo cual mostrarГЎ nuestro “menГє sobre navegaciГіn del sitio” con enlaces a diferentes pГЎginas (ficticias) del lugar Web. Supuestamente, todas las pГЎginas sobre nuestro lugar Web deben un menГє similar.
  • Los elementos “title” y “p” componen el Гєnico contenido sobre esta pГЎgina, mientras que la firma al final (“address”) serГЎ la misma de la totalidad de las pГЎginas del lugar.

Observa que no he cerrado los elementos «li» desplazГЎndolo hacia el pelo «p». En HTML (sin embargo no en XHTML), se pueden olvidar las etiquetas y

, que fue lo que hice aquГ­, precisamente Con El Fin De elaborar el escrito mГЎs fГЎcil sobre leer. Aunque si se prefiere pueden acontecer aГ±adidas.

Vamos an implicar que va an acontecer la pГЎgina sobre un lugar Web que tendrГЎn varias pГЎginas similares. Como es habitual en pГЎginas Web, Г©sta posee un menГє con enlaces a diferentes pГЎginas en el sitio ficticio, un contenido Гєnico y no ha transpirado una firma.

En la actualidad, elige “Guardar como…” del menú Archivo, ve inclusive un directorio/carpeta en donde desees guardar el documento (el escritorio puede ser una alternativa) así como posee el archivo como “mipagina.html”. No cierres todavía el editor, lo necesitarás una diferente vez.

Luego, abre el archivo en un navegador de la siguiente forma: halla el archivo con tu administrador sobre archivos (Windows Explorer, Finder o Firefox) desplazándolo hacia el pelo 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 desplazándolo hacia el pelo arrastra el archivo en él).

Como puedes ver, la pГЎgina posee un aspecto bastante aburrido.

Transito 2: AГ±adir ciertos colores

Probablemente estГ©s observando texto bruno en un extremo blando, pero lo cual depende de cГіmo estГ© tu navegador configurado. Para que la pГЎgina tenga algo mГЎs de encanto podrГ­amos aГ±adir algunos colores. (permite el navegador abierto, lo utilizaremos mГЎs tarde).

Comenzaremos con una hoja de estilo interna en el archivo HTML. MГЎs delante, pondremos el VGL cГіmo utilizar HTML y el CSS en archivos diferentes. La separaciГіn sobre dichos archivos es conveniente ya que facilita la utilizaciГіn de la misma hoja de moda Con El Fin De variados archivos HTML: sГіlo debes escribir la hoja sobre moda la ocasiГіn. Sin embargo en este camino, vamos a dejarlo al completo en el idГ©ntico archivo.

Necesitamos aГ±adir un factor etc.

Las lГ­neas que debes aГ±adir se encuentran marcadas en rojo. Durante la reciente camino dice que eso es una hoja de Modalidad asГ­ como que estГЎ escrita en CSS («text/css»). La segunda lГ­nea indica que hemos aГ±adido Modalidad al factor «body». La tercera lГ­nea establece el color del escrito igual que morado y no ha transpirado la siguiente camino lo que hace es darle al extremo una clase sobre amarillento verdoso.

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

  1. el selector (en el modelo es: “body”), el que le dice al navegador la zona del documento que se verá afectada por la regla;
  2. la propiedad (en el modelo, ‘color’ y ‘background-color’ son ambas propiedades), las cuales especifican quГ© matiz de el bosquejo va a cambiarse;
  3. y no ha transpirado el valor (‘purple’ y no ha transpirado ‘#d8da3d’), el que da el precio de la dominio.

El ej muestra que es probable conectar las reglas. Hemos establecido 2 prestaciones, por lo que podemos tener dos reglas separadas:

El extremo del factor body serГЎ el extremo para al completo el documento. a las otros elementos (p, li, address…) no se les ha dado el menor fondo en concreto, por lo que de manera predeterminada nunca tendrГЎn nadie (o serГЎn transparentes). La casa ‘color’ establece el color de el escrito que se encuentra en el factor body, sin embargo las otros puntos que se encuentran en el interior de body heredarГЎn ese color, a nunca acontecer que se especifique lo opuesto. (MГЎs adelante aГ±adiremos mГЎs colores).