Tutorial sobre CSS Comenzando con HTML + CSS

Este corto tutorial esta disenado de aquellas gente que quieren iniciar an emplear CSS y no ha transpirado Jamas han texto la hoja de estilos CSS.

apps como meddle

No explica bastante referente a CSS. Se centra en como fabricar un archivo HTML, un archivo CSS asi como como realizar que los dos funcionen juntos. La ocasion finalizado este tutorial, podreis leer cualquier de las otros tutoriales Con El Fin De darle mas estilo a las archivos HTML y CSS. Tambien podreis utilizar un editor de HTML o CSS, de acrecentar lugares Web mas avanzados.

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

El consecuencia sera la pagina HTML, con colores y formato, todo desarrollado con CSS.

Ten en cuenta que no quiero declarar que sea bonita O

Las secciones como esta son opcionales. Contienen explicaciones extras del codigo HTML y no ha transpirado CSS del prototipo. El simbolo sobre peligro, situado al comienzo, indica que se prostitucion sobre un material mas avanzado que el resto.

Paso 1: redactar el codigo HTML

dating website memes

Para este tutorial, te sugiero que utilices las herramientas mas sencillas. Por ejemplo, Notepad (Windows), TextEdit (Mac) o HTML Kit, seran razonable. Una ocasion comprendido lo elemental, posiblemente se quieran utilizar herramientas mas complicadas, o hasta programas comerciales como Style Master, Dreamweaver o GoLive. Sin embargo de el progreso de una primera hoja de estilos, es preferiblemente nunca distraerse con caracteristicas avanzadas sobre diferentes herramientas.

No uses procesadores de texto como Microsoft Word u OpenOffice. Con ellos, habitualmente se generan archivos que los navegadores nunca pueden interpretar. Para HTML y no ha transpirado CSS, lo unico que necesitamos son archivos en escrito plano.

El camino 1 consta en abrir tu editor sobre escrito (Notepad, TextEdit, HTML Kit o el que desees), empezar con una ventana vacia asi como redactar lo siguiente:

En realidad, nunca es necesario escribir el codigo: puedes copiarlo y pegarlo sin intermediarios en un editor.

La primera linea que Se Muestra en el archivo HTML, le dice al navegador el modelo de HTML (DOCTYPE obliga DOCument TYPE – en castellano: CLASE sobre DOCumento). En este caso, se trata sobre la interpretacion 4.01 de HTML.

Las palabras que podemos encontrar entre se llaman etiquetas (tags) asi como, como puedes ver, el documento esta dentro de las etiquetas asi como . Dentro de asi como existe espacio para variados tipos sobre documentacion que nunca apareceran en la pantalla. Inclusive En la actualidad, el documento solo contiene el titulo sin embargo posteriormente tambien se anadira la hoja sobre clases sobre CSS.

El es donde se situa el texto del documento. En un fundamentos, todo cosa que se coloque alli sera mostrado, salvo el texto que este adentro de estas subsiguientes etiquetas , las cuales muestran el contenido situado en ese lugar igual que un parecer de relato para nosotros mismos. El navegador la ignorara.

De las etiquetas de el exponente,

    genera la lista desordenada, es decir, una listado en la que los elementos nunca se encuentran numerados. La etiqueta
    indica el principio de un elemento lista.

Editor mostrando el codigo HTML.

En caso de que quieres conocer lo que significan las nombres que se encuentran entre , un buen lugar de empezar es Comenzando con HTML . Realizare varios comentarios acerca de la organizacion de la pagina HTML que estamos utilizando de ej.

  • ul representa la listado con un hipervinculo por cada elemento. Esto mostrara el menu de navegacion del sitio con enlaces a diferentes paginas (ficticias) de el sitio Web. Supuestamente, la totalidad de las paginas de nuestro lugar Web poseen un menu similar.
  • Los elementos title y p componen el unico contenido de esta pagina, mientras que la firma al final (address) sera la misma Con El Fin De todas las paginas del lugar.

Observa que no he cerrado las elementos “li” y “p”. En HTML (sin embargo nunca en XHTML), se podran prescindir las etiquetas y no ha transpirado

, que fue lo que hice aqui, precisamente Con El Fin De realizar el escrito mas sencillo sobre leer. Aunque En Caso De Que 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 es frecuente en paginas Web, esta goza de un menu con enlaces a diferentes paginas en el sitio ficticio, un contenido unico y la firma.

Actualmente, selecciona Guardar como de el menu Archivo, percibe inclusive un directorio/carpeta a donde desees proteger el documento (el escritorio puede ser una alternativa) desplazandolo hacia el pelo tiene el archivo como mipagina.html. No cierres todavia el editor, lo necesitaras una diferente ocasion.

Despues, abre el archivo en un navegador de la siguiente manera: haya el archivo con tu administrador sobre archivos (Windows Explorer, Finder o Firefox) asi como haz clic, o doble clic, en el archivo mipagina.html. El archivo HTML deberia abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y no ha transpirado arrastra el archivo referente a el novio).

Como puedes ver, la pagina dispone de un matiz bastante aburrido.

Camino 2: Anadir algunos colores

Seguramente estes observando texto negro referente a un fondo blando, aunque lo cual depende sobre como este tu navegador configurado. Para que la pagina tenga alguna cosa mas sobre encanto podriamos anadir ciertos colores. (Deja el navegador abierto, lo utilizaremos mas tarde).

Comenzaremos con la hoja sobre moda interna en el archivo HTML. Mas adelante, pondremos el HTML y el CSS en archivos diferentes. La separacion sobre estos archivos seria apropiado porque favorece la manejo de la misma hoja de estilo para distintas archivos HTML: solo tienes que redactar la hoja de estilo una vez. Aunque en este paso, vamos a dejarlo al completo en el similar archivo.

Necesitamos anadir un factor [etc.]

Las lineas que debes anadir se encuentran marcadas en colorado. Durante la reciente camino dice que eso resulta una hoja de Modalidad desplazandolo hacia el pelo que esta escrita en CSS (“text/css”). La segunda camino indica que hemos anadido moda al aspecto “body”. La tercera camino establece el color de el escrito como morado desplazandolo hacia el pelo la sub siguiente linea lo que realiza es darle al final la clase de amarillento verdoso.

Las hojas de moda en CSS estan compuestas sobre reglas. Cada norma tiene tres zonas:

  1. el selector (en el prototipo es: body), el cual le dice al navegador la parte de el documento que se vera afectada por la indicacion;
  2. la propiedad (en el modelo, ‘color’ asi como ‘background-color’ son ambas propiedades), las cuales especifican que porte del bosquejo va a cambiarse;
  3. asi como el precio (‘purple’ desplazandolo hacia el pelo ‘#d8da3d’), el cual da el tasacion de la pertenencia.

El prototipo muestra que seria probable juntar las reglas. Hemos establecido dos prestaciones, por lo que podriamos tener dos reglas separadas:

El final de el elemento body sera el final de todo el documento. a las otros componentes (p, li, address) nunca se les ha poliedro el menor extremo en particular, por lo que sobre forma predeterminada nunca tendran nadie (o seran transparentes). La propiedad ‘color’ establece el color de el escrito que se haya en el factor body, sin embargo las otros elementos que podemos encontrar adentro de body heredaran ese color, a nunca ser que se especifique lo opuesto. (Mas adelante anadiremos mas colores).

0