Publicado el Deja un comentario

Html5 – 7. Dando estilo con CSS

Retomamos la plantilla web que hemos creado en los apartados anteriores, introduciendo el codigo de enlace  que le dara formato (CSS).

<!DOCTYPE html><html>
<head>
<meta charset=’utf-8′>
<link rel=”stylesheet” href=”hojadeestilo.css”>
<title>Mi primera Web</title>
</head>
<body>
<header>
<h1>Cabecera de Mi Web</h1>
<figure><img src=”milogo.jpeg”/></figure>
</header>

<nav>
<ul>
<li><a href=”index.html”>Inicio</a></li>
<li><a href=”acercade.html”>Acerca de</a></li>
</ul>
</nav>
<section>
<article>
<hgroup>
<h1>Aqui va el encabezado grande</h1>
<h2>Aqui un encabezado mas pequeño</h2>
</hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>

<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
<article>
<hgroup>
<h1>Aqui va el encabezado grande del segundo Article</h1>
<h2>Aqui un encabezado mas pequeño</h2></hgroup>
<p>Aqui ponemos un parrafo que es el contenido de nuestra pagina.</p>

<p>Este puede ser un segundo parrafo de nuestra web.</p></article>
</section>

<aside>
<h1>Siguenos en:</h1>
<ul>
<li><a href=”facebook.html”>Facebook</a>
</li>
<li><a href=”twitter.html”>Twitter</a></li>
</ul>
</aside>
<footer>

<p>Pagina creada por Ticoticotaa @2016</p>

<ul>
<li><a href=”contacto.html”>Contacto</a>
</li>
<li><a href=”mapaweb.html”>Mapa Web</a></li>
</ul>
</footer>
</body>
</html>

Como pueden observar he puesto 2 etiquetas nuevas en el head del documento html, meta y link, con meta en este caso le decimos al navegador el formato que queremos en cuanto a tipo de escritura, para que no aparezcan simbolos raros con acentos y demas; con link ponemos el enlace a la hoja CSS que dara formato a nuesta pagina.
Por lo que para continuar, creamos en notepad ++ un archivo llamado hojadeestilo.css, que reproduzco bajo estas lineas:

*{
    margin:0 auto;
    font-family:Arial;
    background-color:yellow;
    padding:5px;
}
body {
    text-align:center;
}
nav ul li {
    display:inline-block;
    margin-right:20px;
    color:red;
    cursor:pointer;
    padding:5px;
    text-decoration:none;
}
nav ul li a:hover{
    color:green;
    border-radius:5px;
  
}
section {
    width:79%;
    background-color:black;
  
    margin-bottom:10px;
    text-align:left;
    border-radius:20px;
    padding:2px;
    box-shadow:0px 0px 20px rgba(0,0,0,0.5);
    float:left;
}
aside{
    width:19%;
  
    border-radius:10px;
    margin-left:3px;
    float:right;
}
footer{
    clear:both;
    width:100%;
    height:120px;
    margin-top:15px;
    border-radius:20px;
    padding:10px;
}
h1{
    font-size:3em;
    color:green;
    font-family:’Russo One’;
}
h2{
    font-size:2m;
    color:blue;
    font-family:’Russo One’;
}
p{
    color:black;
}

En el codigo CSS ponemos la etiqueta seguida de corchetes y dentro de estos los atributos a modificar, en el codigo introduzco margenes, anchos, altos, alineaciones, tamaño de fuentes, colores de fondo y texto, etc.
La etiqueta “*” es un selector comodin o universal que pone todos los valores de la web como le indiquemos, para despues ir cambiando en cada etiqueta detalladamente.

Please follow and like us:

Deja un comentario