Plantillas HTml5 - CSS - responsive - Gratis
librerias grid
Grid CSS Cuadriculas
<div class="grid">
<div class="a">Item 1</div>
<div class="b">Item 2</div>
<div class="c">Item 3</div>
<div class="d">Item 4</div>
</div>
Columnas CSS

// Columna 1
<div style=" height:300px; width:200px; border:3px solid black; float:left;"> hola1 </div>
// Columna 2
<div style=" height:300px; width:200px; border:3px solid black; float:left;"> hola2 </div>
// Columna 3
<div style=" height:300px; width:200px; border:3px solid black; float:left;"> hola3 </div>
// Columna 4
<div style=" height:300px; width:200px; border:3px solid black; float:left;"> hola4 </div>
Spam
<div style="text-align:center"> <span style="float:left; padding-right:30px;">
propiedades CSS
General
#fase1 { // Elementos contiene un ID
color: #5b937d !important;
border-top: 5px solid #dddddd;
}
.fase1 { // Elementos contiene una clase
color: #5b937d !important;
border-top: 5px solid #dddddd;
}
.fase1 > a { // Elementos <a> de clase fase1
color: #5b937d !important;
}
Background (<h1>, <p>, <div>)
div {
background-color: #cccccc;
opacity: 0.3;
}
div {
background-image: url("paper.gif");
background-repeat: repeat-x;
background-position: right top;
background-attachment: fixed;
}
Margen de espacio
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
margin: 20px auto;
}
Spam
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Font
p {
font-size: 40px;
font-size: 0.875em;
font-size: 20%;
}
p {
font-weight: bold; //Negrita
}
Texto
h1 {
text-align: center;
text-align: left;
text-align: right;
text-align: justify;
}
h2 {
text-decoration: overline; //Subraya arriba
text-decoration: underline; //Subraya abajo
text-decoration: none;
}
p {
text-indent: 50px; // Sangria 1ºLinea
letter-spacing: 5px; // Espacio entre letras
line-height: 0.8; // Altura entre lineas
word-spacing: 10px; // Espacio entre palabras
}
h1 {
color: white; // Letras dobles
text-shadow: 2px 2px 4px #000000;
}
Border
p.texto1 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
Link
a:link, a:visited {
color: #cccccc;
}
a:hover, a:active {
color: #cccc00;
}