Como personalizar un texto con Css

Como Personalizar un texto con CSS

el dia de hoy con este pequeño tutorial te enseñare mas o menos como personalizar un texto con css y poder añadirlo a un gadget ,o un titulo

bueno empezemos

primero que nada 

empezamos con el HTML

para definir o agregar los estilo devemos definirlo con un ID que ira dentro de la etiqueta que guarda el texto como por ejemplo un etiqueta < p > o un < div >  dentro de estos atributos definiremos el id.
EJEMPLO:

< div id="nombre-definido" >

< p id="nombre-definido"  >

luego de definir el ID de el texto dentro de cierto atributo que utilices escribiras el texto a personalizar 
EJEMPLO:

< p id="nombre-definido" > texto que personalizaras atravez de CSS < / p >

<div id="nombre-definido" > texto que personalizaras atravez de CSS < / div > 

como veras en el ejemplo cerramos la etiqueta com un" / " y no  volvimos a definir el ID ya que ya lo definimos en el inicio de la etiqueta y solo devemos cerrarla con "/" .

Luego de tener listo el HTML definiremos el CSS.


TERMINAMOS CON "CSS".

ya que tenemos el HTML definido iremos a definir el css. 
para definir el mismo nombre de ID que le definimos a el atributo HTML  en CSS

lo volvemos a escribir justamente igual solo que con un gato! "#" 
EJEMPLO:

#nombre-definido {
 aqui iran
los atributos 
css
}

como veras en el ejemplo abrimos el ID con "{ }" recuerda solo se puede abrir cierto ID con "{ }" no con "( )" sino no funcionara luego de escribir cierto selo agregaremos a el texto
INTRUCCIONES:

Para personalizar un texto dentro de un gadget haremos lo siquiente...

escribiremos el HTML normal solo escribirmos el HTML dentro del gadget HTML/JAVASCRIPT luego ...

para definir el css lo introduciremos dentro de un atributo < style > aqui el css < / style >
el etributo "< style >" significa estilo y con esto definiremos el CSS
EJEMPLO:

< style >
#nombre-definido{ 

atributos css 
iran dentro.

}
< / style >

ahora definires LETRA,COLOR etc...
recuerda que dentro de el css los atributos css , lo que ira dentro de ello se define asi : 

atributocss ; aqui lo que ira dentro :

las etiquetas que conozco para poder dentro de el CSS son:

font-size: 13px ;                                                                              tamaño de la letra:
font-family : arial ;                                                                           estilo o fuente de la letra:
Color: #000 ;                                                                                   color de la letra:
background.color:#000;                                                                color de fondo:
background-image: url:(URL DE LA IMAGEN) ;                         fondo con imagen:
border :13px  solid #000 ;                                                 grosorDeBorde , Estilo , Color 

Para agregarle estilo al poner el mause ensima de el texto lo unico que deveras hacer sera
copiar exactamente el Css con todo y el nombre que definistes para el texto
y le agregas justo despues del nombre :  " :hover " y recuerda junto sin espacios

EJEMPLO:

#nombre-definido:hover{

font-size: 13px ;                                                                             
font-family : arial ;                                                                         
Color: #000 ;                                                                                  
background.color:#000;                                                              
background-image: url:(URL DE LA IMAGEN) ;                       
border :13px  solid #000 ;   

}       

y listo ya tiene un texto personalizado: a tus propios gustos...

SI QUIERES DEFINIR EL CSS DENTRO DE LA PLANTILLA SOLO AGREGALO EN:
PLANTILLA > DISEÑO HTML 
Y PONES TU CODIGO SIN LA ETIQUETA < style > ANTES DE EL ATRIBUTO
]]> < / b:skin >

y solo agregas el ID al HTML... 




ESCRITO POR: Andy Gomez

Comparte este articulo con tus amigos en las redes sociales y Vota por el articulo en Bitacoras.com

Twittear Compartir