El post que buscas se encuentra eliminado, pero este también te puede interesar

Estilos .CSS para tu página

Primero que nada les aclaro que esto lo hice a la 1.01 am y no tira hacerlo perfectamente. Lo hago de onda y porque me gusta, otro de los motivos por la cual decidí hacerlo es porque no hay mucho material en Taringa de esto (?. Buen, dejemos el delirio para otro día y empecemos...

LO BÁSICO
¿Sabés algo?... Shit!
Bueno, como principal .CSS es una extensión de hojas de estilos ¿Qué quiere decir? "Hojas de estilo en cascada" viene del inglés Cascading Style Sheets, del que toma sus siglas. CSS es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). Listo, no necesitan saber más.

¿Cómo uso las hojas? Posta, no sabés nada. Hay 3 métodos de usarlas.
Estilos .CSS para tu página1: Insertando la hoja de estilo en la misma página.
html2: Insertando la hoja de estilo en otro archivo con extensión .css.
css3: Insertando el estilo dentro de la misma etiqueta*.

*¿No sabés lo que es una etiqueta? Una etiqueta es la forma de escribir en HTML, esta se escribe rodeadas por corchetes angulares (<,> ). No va al caso explicarlo. Se inicializa <nombreEtiqueta> y termina con una barra ( /) </nombreEtiqueta>. Sigamos con lo nuestro!


1: Para insertar la hoja de estilo en nuestra misma página debemos ingresar dentro de la etiqueta <head> la etiqueta <style type="text/css">. Dentro de ésta ingresaremos todo nuestro código de estilo.
Ejemplo: 1 archivo, nombre del archivo (index.html).
<html>
color<head>
hojas<title>
Pagina prueba</title>
estilos<style type="text/css">
fontbackgroundbody {color: blue;}
style</style>
padding</head>
margin<body>
Estilos .CSS para tu páginahtml<p>
Texto en color azul</p>
css</body>
</html>

No se asusten!


2: Para insertar la hoja de estilo en otro archivo con extensión .css lo que tenemos que hacer es crear dos archivos, el html y el css. En el html, dentro de la etiqueta <head> vamos a escribir la etiqueta <link>, pero esta vez vamos a poner el url de nuestro archivo .css, para lograrlo escribimos <link href="url" rel="stylesheet" type="text/css" />. Vayamos al ejemplo directamente!
Ejemplo: 2 archivos, 1º nombre del archivo (index.html) y 2º nombre del archivo (myEstilo.css).
1º) En el html creamos lo básico e insertamos la etiqueta <link> para vincular nuestra hoja de estilo:
<html>
color<head>
hojas<title>
Pagina prueba 2 - Incorporamos .css externo</title>
estilos<link href="myEstilo.css" rel="stylesheet" type="text/css" />
font</head>
background<body>
stylepadding<p>
Ésta página tiene la hoja de estilo vinculada.</p>
marginEstilos .CSS para tu página<p>
Texto en color azul</p>
html</body>
</html>

*Con solo éste archivo el texto no se pone azul. Para eso necesitamos el archivo myEstilo.css.
2º) En el .css creamos lo mismo pero sin el código html anterior:
body {
csscolor:
blue;
}


PD: Recuerden guardar los dos archivos con el nombre respectivo y colocarlos en la misma carpeta.


3: Para insertar el estilo dentro de una etiqueta, es muy fácil, hacemos lo siguiente: dentro de la misma etiqueta escribimos style=codigo. ¡¿Cómo?! Vamos al ejemplo.
Ejemplo: 1 archivo, nombre del archivo (index.html).
<html>
color<head>
hojas<title>
Pagina prueba</title>
estilos</head>
font<body style=
color:blue;>
backgroundstyle<p>
Texto en color azul</p>
padding</body>
</html>


*¿Cuál es la diferencia entre las 3? Ni idea, jaja, en realidad es la comodidad de cada uno. Por ejemplo, yo siempre utilizo el 2º método ya que es más fácil vincular el estilo a mi página y si tengo varias páginas con el mismo estilo, creo una universal para las páginas y listo. ¿Entendiste?
No: Por ejemplo: 4 archivos .html y 1 .css, vinculo los 4 archivos html al .css y tengo las 4 páginas con el mismo estilo.
Si: Sos un ejemplo a seguir.


LO BÁSICO - PARTE 2
¿Cómo se escriben los estilos? Con el teclado, jajajaja. ¿Cómo es la sentencia? Ahh, hay 3 métodos (otra vez 3):
margin1: nombreTag {nombreEstilo: valor;}
Estilos .CSS para tu página2: #nombreID {nombreEstilo: valor;}
html3: .nombreClass {nombreEstilo: valor;}

*¿No entendiste?
nombreTag: es el nombre del tag, más conocido como etiqueta (sin los <> ), por ejemplo la etiqueta <BODY> tiene de tag body.
#nombreID: si, en las etiquetas vos poder ingresar un nombre de ID, por ejemplo <p id="pepe">.
.nombreClass: es lo mismo que la anterior, también se pueden poner nombres de clase con CLASS, por ejemplo <p class="pepa">.

PD: Recuerden que tras cada nuevo nombreEstilo debemos separarlos por un punto y coma "; ".
¡¿Qué?! Si, por ejemplo:
body{
csscolor:
blue;
colorfont-size:
18px;
hojasfont-weight:
bold;
}


ESTILOS - YEAH
COLOR:
¿Cómo hago cambiar el color de un texto?
Podemos usar los predeterminados del .css, como blue, red, green, grey, black, white, orange, purple, pink, etc.
color: nombreColor;
O bien podemos utilizar los colores hexadecimal o rgb.
color: #069;
Para RGB utilizamos:
color: rgb(120, 50, 120);
¿Si, y los rgba?
Para vos, los RGBA de este modo:
color: rgba(0, 255, 125, .5);
*.5 Es la opacidad, para los que no saben, varia de 0 a 1.

FUENTE:
¿Tamaño de fuente? Utilizamos font-size: tamañoFuente; podemos utilizar los variantes px (pixel) o em. A mi gusto, uso los px.
font-size: 18px;
¿Estilo de fuente? Utilizamos font-family:nombreFuente, nombreFuenteAlternativo; en el caso de que no tengas una fuente en tu Sistema Operativo, utilizará la fuente alternativa, podemos crear tantas fuentes alternativas como queramos.
font-family:Tahoma, Geneva, sans-serif;
¿Cómo hago italic, bold o underline? Con, font-style: italic; font-weight: bold; y text-decoration: underline; , respectivamente.
¿Cómo alineo el texto? Utilizamos text-align: valorPosicion; donde valorPosicion varia con: center, left, right y justify.
text-align: center;
¿Cómo hago para ingresar una fuente exclusiva mía o externa? Ahh, oka. Antes que nada, la fuente que vas a poner la tenés que copiar en tu carpeta de la página. ¿Eh?
->>CarpetaPagina
->>>>(Adentro)
->>>>index.html
->>>>myEstilo.css
->>>>Nueva Carpeta (llamemosla "Fuente" )
->>>>>>(Adentro)
->>>>>>myFuente.ttf

Lo cual quedaría:
->>CarpetaPagina
->>>>index.html
->>>>myEstilo.css
->>>>CarpetaFuente
->>>>>>myFuente.ttf

Hay 4 tipos de extensión para las fuentes, existen las .EOT, .WOFF, .TTF y .SVG. La última menseonada no se utiliza mucho. Bueno, como hacemos... si, ya me acordé. Directamente escribo el ejemplo:
@font-face {
estilosfont-family:#
'MyFontFamily';
fontsrc:
url('myfont-webfont.eot') format('eot'),
backgroundstyleurl(
'myfont-webfont.woff') format('woff'),
paddingmarginurl(
'myfont-webfont.ttf') format('truetype'),
Estilos .CSS para tu páginahtmlurl(
'myfont-webfont.svg#svgFontName') format('svg');
}

¿Es necesario escribir todo los formatos? No, no es necesario, con el .TTF vasta.
¿Y cómo hago para utilizarlo? Bueno, en el ejemplo anterior le puse de nombre a mi fuente "MyFontFamily", podría ser cualquier nombre, sólo con llamarlo en el font-family primero y listo.
body {
cssfont-family:#
'MyFontFamily', Fallback, sans-serif;
}


FONDO:
¿Cómo pongo color de fondo? Utilizamos background-color: nombreColor; es el mismo método que color.
Background-color: red;
Background-color:
rgb(200,10,125);
Background-color:
rgba(125,125,125,.7);
¿Cómo pongo una imagen de fondo? Interesante, usamos background-image: url(urlDelArchivo); por ejemplo:
background-image: url(img/miFondo.jpg);

DIMENSIONES DE UN BLOQUE:
¿Cómo le ingreso un tamaño? con height: vaolor px; para el alto y width: valor px; para el ancho, por ejemplo: la etiqueta div con id="pepe".
#pepe {
colorheight:
200px;
hojaswidth:
150px;
}

También podemos ingresarle un valor mínimo y máximo ¿Cómo? con min-width y max-width o min-height y max-height.
#pepe {
estilosmin-height:
200px;
fontmin-width:
150px;
backgroundmax-width:
350px;
}


*El alto va tener como mínimo 200px y el ancho va a variar de 150px a 350px. ¿Para que sirve? Para cuando uno utiliza el zoom del explorador o para algunas resoluciones de pantalla. Hoy en día la mayoría de los monitores son o LCD o LED y un mayor porcentaje de éstas son wildescreen, entonces las resoluciones de las pantallas viejas son diferentes a las actuales y gracias al min y max podemos limitar a cuanto se puede contraer o estirar.

PD: Casi me olvido que eso de que se estira el div funciona si ponemos, en width o height, de valor un porcentaje.
Claro, también se pueden utilizar porcentajes (% ) para representar una dimensión. Por ejemplo: width: 80%;

BORDES:
¿El borde cómo se hace? Con border: valor tipoBorde nomColor; donde tipoBorde es el estilo del borde, la lista es:
tipoBorde: dashed, dotted, double, groove, hidden, inset, solid, ridge y outset.
Ejemplo:
#pepe {
stylemin-height:
200px;
paddingmin-width:
150px;
marginborder:
3px dotted #000;
}



SOMBRAS:
¿Cómo creo una sombra al texto? Para hacerlo usamos text-shadow: valor1 valor2 valor3 nomColor;
valor1: es para mover la sombre en eje de las absisas, o sea, la x.
valor2: es para mover la sombre en eje de las ordenadas, o sea, la y.
valor3: es para darle un efecto de desenfoque.
nomColor: es para darle color a la sombra, pueden utilizar los mismo que con "color".
Ejemplo:
p {
Estilos .CSS para tu páginacolor:
#069;
htmltext-shadow:
1px 2px 4px rgba(0,0,0,.5);
}


¿Cómo pongo sombra a un div o un box? Utilizamos box-shadow y toma los mismos valores que text-shadow.
Veamos un ejemplo:
#pepe {
cssmin-width:
200px;
colormin-height:
50px;
hojasborder:
1px solid grey;
estilosbox-shadow:
0 0 4px rgba(0,0,0,.7);
}


MARGEN Y RELLENO:
¿Qué es el margen o margin? El margen es el espacio que separa el contenido del resto. Ahora se los explico mejor con una imagen.
¿Qué es el relleno o padding? El relleno, como su palabra lo dice, es un relleno que hay entre el contenido.

font

¿Cómo es el código para el margen y el relleno (margin y padding)? Con margin: valor1 valor2 valor3 valor4; y padding: valor1 valor2 valor3 valor4; donde los valores que toman son:
valor1: top (arriba).
valor2: right (derecha).
valor3: bottom (abajo).
valor4: left (izquierda).

¿Siempre tengo que escribir los 4 valores? No necesariamente. Depende de lo que quieras hacer.
Ejemplos:
1) Margenes iguales para los 4 valores. Escribo: margin: 10px;
2) Margen iguales para los costados y para arriba y abajo. Escribo: margin: 20px 50px;
3) Margen para 3 iguales. No se puede abreviar! Escribo: margin: 10px 20px 10px 10px;

*Son lo mismo que para padding o relleno.

La famosa pregunta: ¿Cómo hago para centrar mi div? es simple, con el margin. ¿Cómo? usando el 2º ejemplo mencionado anteriormente y con la palabra auto. Ésto hace que los margenes sean iguales y se encuentre centrado.
1) Centrado vertical: margin: auto 20px;.
2) Centrado horizontal: margin: 20px auto;.
3) Centrado vertical y horizontal: margin: auto auto;.

Ejemplo:
#pepe {
backgroundmargin:
20px auto;
stylemin-width:
200px;
paddingmin-height:
50px;
marginborder:
1px solid grey;
Estilos .CSS para tu páginabox-shadow:
0 0 4px rgba(0,0,0,.7);
}


COMPILADORES
¿Hay compiladores? Sii! ¿Dónde me lo bajo? No hace falta, con el explorador es suficiente ¿Con cualquiera? Si, con cualquiera, pero eso si, no todos aceptan TODO el código .css.
¿Cuál es el mejor explorador para ver los estilos?
Chorme, Mozilla Firefox, Opera y Safari.
Che, el Iexplorer no esta.
El Iexplorer no está porque no se lo merece, es muy malo. En serio, es muy malo, no acepta mucho lenguaje .css y además es lento. Es el peor! Jajajaja. Hay un página que testea los .css pero ahora no me acuerdo.
¿Vos cuál usas? El Opera .

¿Dónde puedo escribir el lenguaje .css? En cualquier lado, en un bloc de notas que se yo.
¿Algún compilador para escribir que me recomiendes? Si, el Dreamweaber CS5.5 (es el último) o uno gratuito y rápido al momento de la descarga el Notepad++.
Descarga: Notepad++.

CSS APRENDE MÁS
No, no sigue. Jajaja. O sea, me cansé. Lo que te voy a pasar son un par de links re copados en los cuales vas a poder aprender un poco más o a ahorrarte código al momento de escribir ¿Qué? Si, hay unas páginas en internet que te hacen todo por vos, sólo tenés que escribir las variables y listo. IDEAL PARA VOS.
¡¿Dónde?! Paraaa. Son de mi uso personal, jeje.
Link: CSS3 Generator
Link: CSS3 Generator 2
Este es el mejor:
Link: Text Shadow

*Exploren un poco y fíjense los métodos que hay.

JS Bin:
Éste es genial al momento de probar directamente en internet. No hace falta bajarse nada, solo entrás y en la columna de HTML, escribís el código para probar. Para los que son desarrolladores es ideal, porque también tenés la columna de JavaScript y podés probar varias cosas. Además podes guardar el archivo generado!

Link: JS Bin

jsFiddle
Éste es otro de los que estan buenos a la hora de probar online.

Link: jsFiddle

Anuncios

16 comentarios - Estilos .CSS para tu página

@LupeZ +1
Muy Groso! Muchas Gracias!!!
@LuzLaura98 +1
El chico se mato escribiendo!
Muy bien explicado y detallado!
@jfeuermann
La verdad, muy lindo! Se de css pero lo basico para mantener a raya los divs y modificar Jquery Plugs la verdad es q no lo explore lo suficiente, css3 generator 2 me mostro cosas q no tenia idea q se pudieran hacer con css! Gracias!
@nachodeboedo29 +1
Te doy mis 3 puntines (es todo lo que me da T por mes creo jajajajaja) es una vergüenza que nadie te haya dado puntines!!!
@willy5317 +1
Genial, gracias por la info, fue de mucha ayuda...!

Aun no puedo dar puntos si no te dejaba...
@Meed_Martin
muchas gracias tio esta muy bueno tu post y en lo de las fuentes falto quitar el # lo tienes asi:

font-family:#'MyFontFamily';

quedaria asi:

font-family:'MyFontFamily';

y funciona
@Lucho_de_Tandil +1
Muy bueno che!!, gracias! me sirve un monton!

pd: +5
@danxdz +1
Listo man, yo estudio HTML y CSS, estaba viendo tu post y me resulto bastante interesante... Deje mis +10 por que te los mereces, si queres algún día podemos colaborar para algún proyecto... Hasta entonces adiós.
@danxdz +1
@Kleith lo único que puedo llegar a necesitar es que me pases algunos códigos de estilo pero de ahí nada mas
@Kleith
@danxdz mirate esta página es como jsbin o jsfiddle pero en este podes ver proyectos de otros: http://codepen.io/
Vas a encontrar cosas muy buenas y elaboradas. Cualquier otra cosa en la que necesites ayuda, avisame.
@danxdz +1
@Kleith Gracias, te dejo 5 puntos por hoy
@angel963
recopado el tuto grax =P