Agregando estilos a HTML 5

En este artículo retomaré el trabajo que estaba realizando en la Introducción a HTML 5. Artículo en el cual escribí la plantilla básica de cualquier blog. Si bien el blog quedo correctamente creado, no poseía ningun atractivo a la vista del visitante debido a que era únicamente texto sin formatear.

Aplicando la siguiente hoja de estilos, la cual explicaré en detalle en el siguiente artículo por cuestiones de tiempo se puede lograr llevar un sitio sin estilo alguno a este sencillo pero agradable blog.

/*
	Name: Basic Blog
	Date: Agosto 2009
	Description: Simple layout para un blog
	Version: 1.0
	Author: zonic
	Autor URI: http://www.zonical.net
*/
 
/***** Globales *****/
/* Body */
	body {
		background: #6A5ACD;
		color: #000305;
		font-size: 87.5%; 
		font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
		line-height: 1.429;
		margin: 0;
		padding: 0;
		text-align: left;
	}
 
/* Cabezales */
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em}	/* 16px */
h6 {font-size: 1em}		/* 14px */
 
h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}
 
/* Anclas */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #8FBC8F;
	padding: 0 1px;
	text-decoration: underline;
}
a:hover, a:active {
	background-color: #8FBC8F;
	color: #fff;
	text-decoration: none;
	text-shadow: 1px 1px 1px #333;
}
 
/* Parrafos */
p {margin-bottom: 1.143em;}
* p:last-child {margin-bottom: 0;}
 
strong, b {font-weight: bold;}
em, i {font-style: italic;}
 
::-moz-selection {background: #F6CF74; color: #fff;}
::selection {background: #F6CF74; color: #fff;}
 
dl {margin: 0 0 1.5em 0;}
dt {font-weight: bold;}
dd {margin-left: 1.5em;}
 
/* Citas */
blockquote {font-style: italic;}
cite {}
 
q {}
 
/* tags HTML5  */
header, section, footer,
aside, nav, article, figure {
	display: block;
}
 
/***** Layout *****/
.body {clear: both; margin: 0 auto; width: 800px;}
img.right figure.right {float: right; margin: 0 0 2em 2em;}
img.left, figure.left {float: right; margin: 0 0 2em 2em;}
 
/*
	Cabezal
*****************/
#banner {
	margin: 0 auto;
	padding: 2.5em 0 0 0;
}
 
	/* Banner */
	#banner h1 {font-size: 3.571em; line-height: .6;}
	#banner h1 a:link, #banner h1 a:visited {
		color: #000305;
		display: block;
		font-weight: bold;
		margin: 0 0 .6em .2em;
		text-decoration: none;
		width: 427px;
	}
	#banner h1 a:hover, #banner h1 a:active {
		background: none;
		color: #8FBC8F;
		text-shadow: none;
	}
 
	#banner h1 strong {font-size: 0.36em; font-weight: normal;}
 
	/* Main Nav */
	#banner nav {
		background: #000305;
		font-size: 1.143em;
		height: 40px;
		line-height: 30px;
		margin: 0 auto 2em auto;
		padding: 0;
		text-align: center;
		width: 800px;
 
		border-radius: 5px;
		-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
	}
 
	#banner nav ul {list-style: none; margin: 0 auto; width: 800px;}
	#banner nav li {float: left; display: inline; margin: 0;}
 
	#banner nav a:link, #banner nav a:visited {
		color: #fff;
		display: inline-block;
		height: 30px;
		padding: 5px 1.5em;
		text-decoration: none;
	}
	#banner nav a:hover, #banner nav a:active,
	#banner nav .active a:link, #banner nav .active a:visited {
		background: #8FBC8F;
		color: #fff;
		text-shadow: none !important;
	}
 
	#banner nav li:first-child a {
		border-top-left-radius: 5px;
		-moz-border-radius-topleft: 5px;
		-webkit-border-top-left-radius: 5px;
 
		border-bottom-left-radius: 5px;
		-moz-border-radius-bottomleft: 5px;
		-webkit-border-bottom-left-radius: 5px;
	}
 
/*
	Cuerpo
*****************/
#content {
	background: #fff;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px 20px;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
/*
	Acerca de
*****************/
#about {
	background: #fff;
	font-style: normal;
	margin-bottom: 2em;
	overflow: hidden;
	padding: 20px;
	text-align: left;
	width: 760px;
 
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}
 
#about .primary {float: left; width: 165px;}
#about .primary strong {color: #C64350; display: block; font-size: 1.286em;}
 
#about .url:link, #about .url:visited {text-decoration: none;}
 
#about .bio {float: right; width: 500px;}
 
/*
	Pie
*****************/
#contentinfo {padding-bottom: 2em; text-align: right;}
 
/***** Secciones *****/
/* Blog */
.hentry {
	border-bottom: 1px solid #eee;
	padding: 1.5em 0;
}
li:last-child .hentry, #content &gt; .hentry {border: 0; margin: 0;}
#content &gt; .hentry {padding: 1em 0;}
 
.entry-title {font-size: 1.429em; margin-bottom: 0;}
.entry-title a:link, .entry-title a:visited {text-decoration: none;}
 
.hentry .post-info * {font-style: normal;}

Share and Enjoy:

Zonical

Agregando estilos a HTML 5

Leave a Reply