Propiedades básicas del CSS

14.11.15

Aunque no soy una experta en diseño web, cuando comencé mi blog me hubiera sido de mucha ayuda haber tenido una pequeña guía como esta que me explicara las partes más básicas de la plantilla.

Antes de comenzar deberán saber que CSS es el acortamiento para Cascading Style Sheets, y tiene una función diferente en comparación al HTML. Éste último representa la estructura de una página web, y el CSS es la personalización de la misma, pero los dos se necesitan del uno al otro para el funcionamiento de una página.

Voy a dividir dichas propiedades de la siguiente forma: Tamaño y/o posición, Texto (las propiedades más comunes utilizadas para la personalización de texto), e Imágenes. Por último, daré unas cuantas recomendaciones sobre CSS. (No soy una experta, repito)

Propiedades de tamaño y/o posición
padding: El padding tiene muchas funciones. Para lo que lo uso yo, es para dar espacio al contenido. Por ejemplo, si me parece que el texto del título esta muy pegado a la fecha, le agrego padding al título. Esta propiedad es un poco escurridiza, pues tienes que ver dónde agregarla para que afecte sólo el elemento que tú quieres.

El padding lo puedes escribir de muchas maneras:
padding: 12px 5px 20px 75px; arriba, derecha, abajo, izquierda
padding: 10px 20px; arriba y abajo, derecha e izquierda
padding-bottom: 10px; abajo
padding: 10px; para cada lado

La más fácil de utilizar y la que yo recomendaría es padding-bottom, padding-top, padding-right, y padding-left. Es más código, sí, pero con estas sabes exactamente qué haces, en cambio si utilizas las otras, tendrás que memorizar a qué corresponde, si es arriba o abajo o derecha o izquierda. Si quieres más información sobre esta propiedad, puedes encontrar aquí de una forma muy bien explicada, pero en inglés.

Otra función del padding
margin: Esta es una función similar al padding. Su propósito es el mismo, con la excepción de que en no en todos los textos funciona, y es más usada para dar espacio alrededor del elemento y no dentro de él, como lo hace el padding.

Tengo entendido que esta propiedad se utiliza mayormente en imágenes. Por ejemplo, yo lo utilizo para dar espacio a mi cabecera. Si le quito el margin-top: 70px; quedaría así:

Propiedades de texto
font-family: Estoy segura todos conocerán esta propiedad; font-family hace alusión a la fuente del texto. Blogger te da la opción de escoger una predeterminada desde el Diseñador de Plantillas, pero puedes personalizarla tú mismo instalando una de Google Fonts.

font-weight: Grosor de la fuente. Algunas fuentes tienen diferentes grosores tales como 300, 400 o 600. Entre más grande el número, más gruesa es la tipografía.

text-align: Alineación de texto. Puedes escoger center, right, left o justificado. (Centrado, a la derecha, a la izquierda, justificado)

text-transform: uppercase/lowercase Esta es una que utilizo muchísimo y que nunca falta en mis diseños. Algunas fuentes se ven más atractivas en mayúsculas, y la propiedad uppercase convierte el texto en mayúsculas. La propiedad lowercase hace lo contrario, convirtiendo el texto en minúsculas.

letter-spacing: Esto hace que el texto tenga espacio entre sus letras. Muy práctico cuando la fuente se ve cargada.

Ejemplo
  font-family: Arial;
  font-size: 11px;
  font-weight: 600;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 2px;

Con todo esto pueden hacer muchas diferentes estilos con una misma fuente. El truco es practicar y experimentar.

Propiedades para imágenes
height: Esto significa altura, y normalmente los elementos de la plantilla tienen una altura predeterminada. Esto recomiendo no cambiarlo, o simplemente colocar auto, para que se adapte a todos los dispositivos.

width: El width es el ancho, y este es un poco más difícil de determinar. Casi todas las partes del blog son width: 100%, pero hay algunos que son diferentes, como por ejemplo el buscador del blog. Éste es diferente porque si le otorgamos 100%, ocupará todo el ancho del blog, y no queremos un buscador tan ancho, así que lo sustituimos por un 34%, como es en mi caso.

Recomendaciones y demás
// Cada vez que agregues una propiedad, ésta siempre debe terminar con un ;. Si no lo tiene, toda la plantilla dará error.

// Cuando haces tus diseños aparte, es mejor que personalices absolutamente todo desde la plantilla, ya que cuando lo descargues y sustituyas por la actual, no tendrás que ajustar casi nada. En cambio, si lo haces desde el diseñador, todas las propiedades son automáticas y tendrás que hacer el mismo trabajo 2 veces.

// Hay muchas maneras de escribir el lenguaje CSS. Encuentra la que mejor se ajuste a ti. Algunos prefieren escribir un montón de código (como yo) con tal de dejar todo lo más específico y accesible posible, y algunos otros encuentran más cómodo no desperdiciar espacio y utilizar abreviaciones.

// De ver el código de páginas web profesionales, aprendes un montón. Te lo digo ya.

Y bueno, lo que queda por decir es ponerse manos a la obra y enamorarse del acto de diseñar. ¡Nos vemos!

5 comentarios:

  1. Gracias por este post, soy nueva y me ha aclarado alguna que otra duda.
    Un saludo.

    ResponderEliminar
  2. ¡Buenas!

    Aunque algunas cosas ya las conocía, otras las acabo de aprender aquí :] A mí me gusta esto del CSS (y el HTML), pero soy muy novata y tampoco le he dedicado demasiado tiempo... Ahora quiero cambiar el diseño de mi blog y sé que tendré que ponerme manos a la obra, pero además de eso, me gustaría aprender más en general porque es muy entretenido, la verdad :D

    Gracias por la entrada y que pases un buen finde ^^
    ¡Saludillos! ♪

    ResponderEliminar
  3. ¡Hola!
    Pues yo... Yo soy diseñadora web back end así que mínimo por verlo ya lo conocía. Además que tengo que aprender en mi carrera porque no vamos a contratar diseñadores que nos hagan nuestros proyectos finales. Claro. Te ha quedado muy bien y tus explicaciones son muy simples :)

    ResponderEliminar
  4. Ya sabes que todavía le estoy agarrando a esto del HTML del CSS así que todas estas entradas son de mucha ayuda cuando uno está intentando dejar decente la plantilla.

    Por ahora, creo que dejaré el diseño del mío por la paz aunque tengo pendiente agregarle lo que son los botones de las redes sociales pero bueno, eso será un día que tenga tiempo :)

    Te mando un beso enorme, Lhya y te deseo un bonito inicio de semana<3

    ResponderEliminar
  5. ¡Hola!

    Qué guay, aunque yo ya sabía un poquito de CSS y HTML. Yo estoy bastante contenta con el diseño de mi blog, por lo que seguiré con él.
    Por cierto, pásate por mi blog: http://lacanciondelarje.blogspot.com.es/ ¡Te espero!

    Un beso.

    ResponderEliminar

Design by Lhya © 2014 - 2016