Web Statistics Google+APRENDER CSS: Tutorial Básico en Español | comprardominioweb.com APRENDER CSS: Tutorial Básico en Español | comprardominioweb.com

Aprender CSS: Tutorial Básico en Español

Dónde aprendo CSS

Aprender CSS: En el complejo, pero fascinante mundo del desarrollo web, existen etapas que tarde o temprano todo programador, sin importar su nivel de pericia, deberá encarar, y aprender CSS es una de ellas.

Si bien es cierto que hoy en día existen herramientas CMS como WordPress o Joomla, que facilitan muchísimo el diseño web a través de plantillas ya establecidas, sin necesidad en principio de programación, también es cierto que en algunos casos estas herramientas no serán suficientes y tendremos que hacer modificaciones a nivel de HTML o de código CSS.

 

¿Qué es CSS?

Hasta ahora hemos mencionado varias veces el término CSS, pero vamos a definir de qué estamos hablando exactamente. Cuando programamos páginas web en código HTML, además de definir las etiquetas correspondientes, como tablas, campos de textos, botones, etc., se hace necesario aplicar formato a cada una de estas etiquetas, tales como tamaño, color, posición, entre otras características.

La aplicación del formato puede llegar a ser en determinadas ocasiones muy amplia o engorrosa. Por ello, surgió la necesidad de separar el código correspondiente a la estructura del contenido, del código que determina el formato. Esta necesidad es una de las razones principales por la cual surge CSS y la necesitad de aprenderlo.

CSS es el acrónimo de “Cascading Style Sheets”, lo cual traducido al Español, quiere decir “Hojas de Estilo en Cascada “, y se define como un lenguaje que determina la presentación o formato de los documentos HTML. Las “hojas de estilo”, como se conocen popularmente, son ficheros de extensión .CSS.

Una de las grandes ventajas de usar hojas de estilo, es que no es necesario especificar el formato de cada uno de los elementos del documento HTML al cual están asociados, es decir, no es necesario que se trate a cada etiqueta HTML como un elemento independiente, sino que dentro del fichero .CSS, se definen secciones que pueden aplicarse a más de un elemento HTML (lo veremos más adelante en este tutorial).

Esta técnica ahorra muchísimo tiempo y sobretodo líneas de código, lo cual hace que las hojas de estilo sean un recurso muy práctico para cualquier desarrollador web.

Habiendo repasado un poco de teoría básica necesaria para el tutorial, comencemos entonces con la parte práctica.

 

¿Qué necesito para aprender CSS y programar mis hojas de estilo éste código?

Para comenzar a escribir tu código CSS puedes utilizar herramientas muy sencillas como Notepad++, Brackets o inclusive algo tan simple como el Bloc de Notas de Windows. También puedes utilizar herramientas más sofisticadas como Dreamweaver o si desarrollas en ASP.Net puedes utilizar Visual Studio.

No recomendamos utilizar procesadores de texto como MS Word para generar código CSS, ya que por lo general los ficheros creados con estas herramientas no pueden ser interpretados por los navegadores tradicionales.

Hosting Web

Para el Hosting de tu web te recomendamos

Raiola Networks y SiteGround

​Aloja tu web en un hosting de confianza


¿Por dónde comenzamos con nuestro código CSS?

La mejor manera de entender estos conceptos es a través de ejemplos, por lo cual estaremos trabajando con algunos ejemplos específicos durante el desarrollo de nuestro manual de CSS.

Todo fichero CSS debe ser referenciado por un fichero HTML, así que lo primero que debemos hacer es crear nuestro fichero HTML de forma sencilla.

<!DOCTYPE html>

<html>

<head>

                 <title> Mi primera página utilizando CSS </title>

</head>

<body>

<h1> Mi primera página utilizando CSS </h1>

<p> ¡Estoy aprendiendo CSS! </p>

<p> Este documento solo contiene código HTML, aún no estoy aplicando ningún código CSS </p>

</body>

</html>

Este código lo guardaremos en un fichero llamado ejemplo.htm, el cual se verá así en nuestro navegador:

Aprender CSS

 

No vamos a entrar en detalle en lo que respecta al código HTML, sin embargo, podemos decir que el código anterior muestra una estructura bastante básica de un documento HTML, compuesto por sus secciones de Head y Body, así como con un elemento encabezado (<H1>) y 2 elementos tipo párrafo (<p>).

Vamos a realizar algunos cambios al documento anterior, por ejemplo, cambiemos el color de fondo de la página, algunos tamaños o colores de letra, etc.

Probemos con el siguiente código HTML:

<!DOCTYPE html>

<html>

<head>

  <title> Mi primera página utilizando CSS </title>

</head>

<body style= “background-color: blue”>

<h1 style= “color: white; font-size: 30px”>Mi primera página utilizando CSS</h1>

<p style= “color: white; font-size: 24px”> ¡Estoy aprendiendo CSS! </p>

<p style= “color: white; font-size: 24px”> Este documento solo contiene código HTML, aquí he comenzado a aplicar código CSS a través del atributo “Style” En Línea </p>

</body>

</html>

Cuando abrimos nuestro ejemplo en el navegador se vería de la siguiente manera:

curso-de-css

Se puede apreciar que en nuestro código hemos aplicado el estilo “En Línea”, es decir, directamente en el elemento HTML, a través del atributo “Style”. De esta manera, el color de fondo de la página cambió a azul a través de la instrucción style=” background-color: blue” ubicada en el elemento body.

Por otra parte, para cambiar el color de las letras a color blanco, utilizamos la propiedad “color” y el valor “White”, en el caso del tamaño de la letra utilizamos la propiedad “Font-size” y el atributo de tamaño especificado en pixeles.

La segunda manera de aplicar CSS en un documento HTML, es a través de la creación de una sección adicional llamada “STYLE”. Esta sección estará ubicada dentro de la sección “HEAD”. Si generamos una sección “STYLE” para obtener el mismo efecto del ejemplo anterior, el código se vería así:

css-básico

<!DOCTYPE html>

<html>

<head>

  <title> Mi primera página utilizando CSS </title>

  <style type= “text/css”>

                body  {

                background-color:  blue;

                }

                h1 {

                color: white;

                font-size: 30px;

                }

                P {

                color: white;

                font-size: 24px;

                }

  </style>

</head>

<body >

<h1> Mi primera página utilizando CSS </h1>

<p> ¡Estoy aprendiendo CSS! </p>

<p> Este documento solo contiene código HTML, </br> aquí he comenzado a aplicar código CSS a través de la sección “STYLE” incluido en la sección “HEAD” </p>

</body>

</html>

En el navegador, nuestra página web se visualizará de esta forma:

Como podemos apreciar, en nuestro código se ha separado la parte estructural del contenido, de la parte que tiene que ver con el formato y presentación de los elementos HTML.

La sección “Style” comienza con una línea que indica que se trata de una hoja de estilos CSS (style type = “text/css”). Las líneas subsiguientes demuestran que hemos añadido estilo al elemento “body”, al elemento “h1” y a los elementos “p”.

Una de las ventajas de organizar el código de esta manera es que, aunque tenemos dos elementos tipo párrafo (<p>), no es necesario especificar estilos para ambos, sino para el tipo de elemento en general.

Obviamente esto es útil siempre y cuando todos los elementos tipo párrafo (<p>) tengan el mismo estilo, de lo contrario habría que hacer la diferenciación correspondiente.

El tercer método para aplicar estilos CSS a nuestro código HTML, es utilizando un fichero .CSS independiente de nuestro documento HTML. En este caso, el documento HTML debe contener una línea que especifique en donde se va a buscar el código CSS. Veamos cómo se vería nuestro documento HTML:

<!DOCTYPE html>

<html>

<head>

  <title> Mi primera página utilizando CSS </title>

<link rel = “stylesheet” type = “text/css” href = “estilo.css” />

</head>

<body class=”body”>

<h1> Mi primera página utilizando CSS </h1>

<p> ¡Estoy aprendiendo CSS! </p>

<p > Este documento solo contiene código HTML, </br>

aquí estoy aplicando estilos CSS a través de un fichero externo llamado “estilo.css”, </br>

el cual está siendo referenciado a través de la línea &lt;link rel=”stylesheet” type=”text/css” href=”style.css” /&gt;</p>

</body>

</html>

Podemos notar que la sección identificada como “Style” ha desaparecido de nuestro documento HTML, y en su lugar hemos incluido la línea: <link rel = “stylesheet” type = “text/css” href = “estilo.css” />. El atributo rel=” stylesheet “, indica que el enlace se trata de una hoja de estilos, type = “text/css” indica que se trata de un fichero de texto, en sintaxis CSS, y href = “estilo.css” nos señala que se apunta a un fichero llamado “estilo.css”, el cual contiene el siguiente código:

                body {

                background-color: blue;

                }

                h1 {

                color: white;

                font-size: 30px;

                }

                p {

                color: white;

                font-size: 24px;

                }

Al visualizarlo en nuestro navegador observamos lo siguiente:

tutorial-de-css-en-español

Con este tercer método hemos independizado de manera total la parte estructural del código HTML del código que rige el formato o presentación de los elementos HTML.

Esta es, sin duda, la opción más recomendada, ya que nos permite tener una mayor organización de nuestro código y al mismo tiempo hacerlo más escalable y más fácil de crecer en el tiempo, pues si queremos hacer algún cambio en la presentación o formato de nuestros elementos HTML, no tenemos ni siquiera la necesidad de modificar el documento HTML, lo haríamos solo a través de nuestro fichero CSS.

Cabe destacar que nuestro documento HTML puede hacer referencia a más de un fichero CSS y buscará en cada uno de ellos el estilo correspondiente a cada elemento HTML, en caso de que existiera. De igual forma, los ficheros .CSS deben estar en la misma carpeta que el documento HTML, de lo contrario, la etiqueta href de la línea <link rel = “stylesheet” type = “text/css” href = “estilo.css” />, deberá contener la ruta correspondiente donde se encuentre el fichero .CSS.

Es importante señalar que cuando se aplican estilos de estas tres formas dentro de un documento HTML, siempre va a prevalecer el orden inverso a como lo hemos explicado en este tutorial, es decir, si tenemos ficheros externos .CSS, además una sección “Style” dentro de nuestro documento y tenemos estilos aplicados directamente a los elementos HTML, se aplicarán los más cercanos al elemento HTML en primer lugar, nos referimos entonces a los estilos aplicados directamente al elemento HTML.

Si no hubiese estilos aplicados directamente al elemento HTML, se aplicarían entonces los estilos aplicados a través de la sección “Style” y por último los estilos aplicados a través de ficheros externos .CSS.

Propiedades CSS

Ahora que ya conocemos la manera de aplicar estilos CSS a nuestros documentos HTML, vamos a revisar algunas de las propiedades más importantes y comunes. Una de las ventajas prácticas de aplicar estilos CSS, es que la sintaxis a utilizar siempre es la misma, y se expresa de la forma:

Propiedad: valor;

por ejemplo: color: #FF0045;

Cada uno de los elementos HTML posee distintas propiedades CSS que se pueden aplicar, sin embargo, existen algunas comunes, las cuales mencionamos a continuación:

Colores y Fondos

Color: Define el color en primer plano del elemento HTML, normalmente especifica el color del texto en los elementos correspondientes. Por ejemplo, si queremos que todos los encabezados <h1> tengan textos de color azul podemos agregar el siguiente código a nuestra hoja de estilos:

h1 {

color: yellow;

}

Todos los valores para las propiedades que se refieren a colores en CSS se puede expresar con el nombre del color, tal como el ejemplo anterior, o con su equivalente valor hexadecimal, por ejemplo: #F3DE4E. También se puede expresar como valor rgb, por ejemplo: rgb(250,45,90).

Background-color: Define el color de fondo de un elemento HTML. Por ejemplo, para cambiar el color de fondo de nuestra página utilizamos la propiedad background-color con el valor blue.

body {

                background-color: blue;

}

background-image: Esta propiedad permite asignar una imagen de fondo al elemento HTML. Por ejemplo, para asignar una imagen de fondo a nuestra página web utilizamos el siguiente código:

body {

                background-image: url(“imagen1.gif”);

}

Observamos que hemos escrito entre paréntesis el nombre de la imagen que queremos colocar como fondo de pantalla. Esto es válido siempre y cuando el fichero expresado se encuentre en la misma carpeta que la hoja de estilo, de lo contrario, habría que especificar la ruta relativa en donde se encuentra la imagen o la dirección URL, en caso de que se encuentre en un sitio web externo.

Background-repeat: Permite especificar si la imagen de fondo se repite o no. Por ejemplo, en el siguiente código, la imagen se repite en el eje horizontal y vertical.

                body {

                background-color: blue;

                background-image:url(“imagen.jpg”);

                background-repeat: repeat;

                }

                h1 {

                color: black;

                font-size: 30px;

                }

                p {

                color: black;

                font-size: 24px;

                }

En el navegador se apreciaría de esta forma:

manual-de-css

Background-Attachment: Permite definir si la imagen de fondo permanece fija en su contenedor al momento de desplazarse en la página o no. El valor “scroll” permite que la imagen se desplace con su elemento contenedor, mientras que el valor “fixed” obliga a que la imagen no se mueva, aunque el usuario se desplace por la página utilizando las barras de “scroll”

Background-position: Permite cambiar la posición en la cual se ubica la imagen de fondo asignada a través de la propiedad Background-image.

Por defecto, la imagen siempre se ubica en la esquina superior izquierda de la pantalla, pero gracias a esta propiedad podemos cambiar esa premisa. Puede tomar valores como top, middle, bottom, left, center o right, así como también se pueden expresar coordenadas en pixeles, centímetros o inclusive números porcentuales.

En el caso de las coordenadas, siempre se deben indicar dos valores, los cuales representan la ubicación de la imagen con respecto al margen izquierdo y al margen superior. Ejemplos de estos valores serían: “Center”,”top left”, “10px 30px”, “50% 45%”

Las propiedades Background pueden combinarse en una misma línea, así por ejemplo tendríamos combinaciones como las siguientes:

background: #AB45C3 url(“imagen.jpg”) repeat fixed 45% 30%;

El orden en el que deben expresarse los valores para las distintas propiedades es el siguiente:

( background-color ) – ( background-image ) – ( background-repeat ) – ( background-attachment ) – ( background-position ).

Hosting Web

Para el Hosting de tu web te recomendamos

Raiola Networks y SiteGround

​Aloja tu web en un hosting de confianza


Fuentes

Vamos a estar mencionando las principales propiedades que determinan el estilo de las fuentes o letras utilizada en los textos de nuestra página web.

font-family: Permite definir una fuente en particular o una lista de fuentes que serán utilizadas en el elemento HTML correspondiente y dependen de que la fuente se encuentre instalada en el ordenador del usuario que está accediendo al sitio web, por ejemplo, supongamos que la lista que estaremos utilizando estará conformada por las fuentes:

  1. a) Arial
  2. b) Times New Roman
  3. c) Calibrí

Si en nuestro ordenador se encuentra instalada la fuente “Arial”, entonces éste sería el valor de fuente que utilizaría nuestro elemento HTML. En el caso de que no se encuentre la fuente “Arial” instalada en nuestro ordenador, se utilizará el valor siguiente “Times New Roman”, y así sucesivamente.

Se recomienda comenzar la lista de fuentes por aquellas que quisiéramos que tuvieran preferencia al momento de utilizarse. También se sugiere incluir en la lista de fuentes, algunos nombres genéricos como “serif”, “sans serif”, “fantasy”, “cursive”, entre otros. Todo esto previendo que el navegador pueda utilizar alguna fuente disponible en el ordenador del usuario visitante de nuestro sitio web.

No necesariamente se debe utilizar una lista de fuentes, también se puede utilizar el nombre de una fuente específica; esto obviamente aumentaría las posibilidades de que la fuente no se encuentre en el ordenador del usuario.

p {

font-family: “Times New Roman”, verdana, sans-serif;}

}

p {

font-family: “Arial”;}

}

font-style: Esta propiedad permite aplicar una determinada inclinación en las letras independientemente de la fuente utilizada. Puede tomar los valores “Normal”, “Itálica” y “oblicua”.  Cuando toma el valor “Normal”, la letra no cambia su apariencia original, sin embargo, cuando se especifica el valor “Oblicua”, aunque la letra no cambia, su inclinación si lo hace. En el caso del valor “Itálica”, las letras se inclinan y algunas veces también cambia la letra.

Para entender esta propiedad veamos el siguiente ejemplo:

h1 {

color: black;

                font-family: “Times New Roman”;

font-size: 30px;

font-style: italic

}

<h1> Mi primera página utilizando CSS </h1>

En este caso, nuestro navegador mostraría algo como esto:

Dirección de Correo electrónico

¡Suscríbete a nuestra Newsletter!

Únete a nuestra comunidad y te ayudaremos a crear tu proyecto en internet, desde el dominio web hasta las Redes Sociales...

aprendiendo css

Ahora cambiaremos el valor de la propiedad fon-style de “italic” a “oblique”

h1 {

color: black;

                font-family: “Times New Roman”;

font-size: 30px;

font-style: oblique

}

<h1> Mi primera página utilizando CSS </h1>

El resultado sería:

mi-primera-página-css

Podemos notar que, aunque hemos utilizado la fuente “Times New Roman” en ambos casos, la inclinación de las letras varía ligeramente en la utilización del valor “italic” del valor “oblique”. También podemos notar la diferencia en la letra “a” en ambos casos.

font-variant: Esta propiedad permite que todas las letras se muestren en mayúsculas, incluyendo las letras expresadas originalmente como minúsculas, sin embargo, las letras mayúsculas se distinguen de aquellas originalmente minúsculas, en que éstas ´´ultimas tendrán una altura ligeramente menor que las mayúsculas.

Veamos el siguiente código de ejemplo:

                h1 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 30px;

                font-variant: small-caps;

                }

<h1> Mi primera página utilizando CSS </h1>

El resultado se vería así en nuestro navegador:

css-en-español

Podemos apreciar que, aunque todas las letras se muestran en mayúsculas, la letra “M” y las letras que conforman la palabra CSS” tienen mayor altura que el resto.

font-weight: Define el grosor de la fuente. Puede tomar valores como “Normal” y “Bold” (Negritas) así como ciertos valores numéricos que van variando de 100 en 100 hasta 900 (100, 200, 300…900). Mientras mayor sea el valor, más gruesa será la letra. Los grosores variarán dependiendo del tipo de letra (aunque tenga el mismo valor asignado), inclusive en algunos casos los valores 800 y 900 se mostrarán más gruesos que el valor Bold.

Observemos como se vería en nuestro navegador el siguiente código:

                h1 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 30px;

                font-weight: 400;

                }

                h2 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 30px;

                font-weight: bold;

                }

<h1> Mi primera página utilizando CSS </h1>

<h2> Mi primera página utilizando CSS </h2>

css fácil

font-size: Establece el tamaño de la fuente utilizada. Los valores asignados se pueden expresar de varias maneras, tamaño absoluto o relativo, inclusive en porcentajes.

Cuando hablamos de tamaño absoluto nos referimos a ciertos valores interpretados como: “xx-small”, “x-small”, “small”, “médium”, “large”, “x-large” y “xx-large”. Cada uno de ellos son interpretados por el navegador dependiendo del tamaño de la fuente, resolución de pantalla entre otros parámetros.

En nuestro navegador podemos observar el siguiente código:

                h1 {

                color: black;

                font-family: “Times New Roman”;

                font-size: x-large;

                }

                h2 {

                color: black;

                font-family: “Times New Roman”;

                font-size: x-small;

                }

propiedades css

En el caso de tamaño relativo, la propiedad font-size puede tomar los valores “smaller” o “larger”, los cuales toman como referencia la fuente utilizada por el elemento padre y toman el valor anterior o siguiente de la lista de valores absolutos.

Observemos el ejemplo:

ul {

font-size: smaller;

}

<ul>

<ul>Aprendiendo CSS 1<ul/>

<ul>Aprendiendo CSS 2<ul/>

<ul>Aprendiendo CSS 3<ul/>

<ul>Aprendiendo CSS 4<ul/>

</ul>

atributos-css

Cuando hacemos uso del valor numérico con unidades absolutas, podemos utilizar unidades como px, pt, cm, etc.  En el siguiente ejemplo utilizaremos las unidades px y pt.

                h2 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 30px;

                }

                h3 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 30pt;

                }

<h1> Mi primera página utilizando CSS </h1>

<h2> Mi primera página utilizando CSS </h2>

El resultado en el navegador sería:

font-css

Si utilizamos valor numérico con unidades relativas porcentajes (%) o em, teniendo en cuenta que 1 em es equivalente a 100%.

Ejemplo:

                h2 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 1em;

                }

                h3 {

                color: black;

                font-family: “Times New Roman”;

                font-size: 3em;

                }

<h1> Mi primera página utilizando CSS </h1>

<h2> Mi primera página utilizando CSS </h2>

color css

line-height: Permite definir el interlineado de un bloque de texto. La propiedad permite el uso de cualquier unidad de longitud, lo más recomendable es utilizar cualquier unidad porcentual.

Veamos la comparación de esta propiedad con un valor del 100%, y luego un valor del 200%.

line-height al 100%

p {

  line-height: 100%;

}

<p> Este documento contiene código HTML. </br>

También estoy aplicando estilos CSS a través de un fichero externo llamado “estilo.css”, </br>

el cual está siendo referenciado a través de la línea &lt;link rel=”stylesheet” type=”text/css” href=”style.css” /&gt;</p>

line-height al 100%

Al combinar las variantes de las propiedades revisadas, y teniendo en cuenta que el orden jerárquico es: font-style | font-variant | font-weight | font-size/line-height | font-family, podemos obtener el siguiente código con su correspondiente visualización en el navegador:

                p {

                               font: oblique normal bold 25px/200% “Times New Roman”, sans-serif;

                }

manual-básico-css-en-español

Feedly el feed para seguirnos

Texto

Acá extremos revisando algunas propiedades que CSS nos ofrece para embellecer el texto utilizado en nuestras páginas web.

text-indent: Permite aplicar una sangría al principio de cada bloque de texto. Se pueden establecer valores numéricos en cualquiera de las unidades de longitud conocidas.

Observemos el siguiente código:

p {

  text-indent: 25px;

}

<p > ¡Estoy aprendiendo CSS! </p>

<p > Este documento contiene código HTML, es muy fácil de entender y utilizar</br>

También estoy aplicando estilos CSS a través de un fichero externo llamado “estilo.css”, el cual, </br> está siendo referenciado a través de la línea &lt;link rel=”stylesheet” type=”text/css” href=”style.css” /&gt;</p>

Nuestro navegador muestra lo siguiente:

text-align: Permite definir la alineación horizontal de un bloque de texto. Los valores que esta propiedad puede tomar son:

  • Left: Para indicar alineación a la izquierda.
  • Right: Para indicar alineación a la derecha.
  • Center: Para indicar alineación central.
  • Justify: Para indicar una alineación justificada entre derecha e izquierda.

Veamos el ejemplo de esta propiedad:

                h1 {

                color: black;

                text-align: left;

                }

                h2 {

                color: black;

                text-align: right;

                }

                h3 {

                color: black;

                text-align: center;

                }

<h1> Mi primera página utilizando CSS </h1>

<h2> Mi primera página utilizando CSS </h2>

<h3> Mi primera página utilizando CSS </h3>

  css en español fácil

Vertical-align: Permite establecer la alineación vertical de un texto u objeto con respecto al elemento que lo contiene. Los posibles valores que puede tomar esta propiedad son: baseline, sub, super, top, text-top, middle, bottom y text-bottom.

Observemos el siguiente ejemplo:

tr

{

height:50px

}

td

{

vertical-align: bottom;

}

<table border=”solid”>

<tr>

      <td> Casilla 1 </td>

<td> Casilla 2 </td>

        </tr>

         <tr>

<td> Casilla 3 </td>

<td> Casilla 4 </td>

       </tr>

</table>

tabla-css

Cambiando la propiedad vertical-align a “Top” obtendríamos lo siguiente:

tabla-css-en-español

letter-spacing: Permite definir un espaciado entre cada una de las letras que conforman un bloque de texto. Estos valores, pueden ser positivos o negativos, y se pueden expresar en propiedades de longitud.

Veamos este código de ejemplo:

p {

  letter-spacing: 3px;

}

<p> ¡Estoy aprendiendo CSS! </p>

<p> Este documento contiene código HTML, es muy fácil de entender y utilizar</br>

También estoy aplicando estilos CSS a través de un fichero externo llamado “estilo.css”, el cual, </br>

 está siendo referenciado a través de la línea &lt;link rel=”stylesheet” type=”text/css” href=”style.css” /&gt;</p>

    letter spacing css

Ahora veamos el mismo ejemplo, pero con un valor de 8px.

p {

  letter-spacing: 8px;

}

ejemplo css

Word-spacing: Esta propiedad es muy parecida a la anterior, pero en lugar de expresar la separación entre letras, se refiere a la separación de las palabras que conforman un bloque de texto.

Utilizando un valor de 10px veríamos lo siguiente en nuestro navegador:

p {

  word-spacing: 10px;

}

<p> ¡Estoy aprendiendo CSS! </p>

<p> Este documento contiene código HTML, es muy fácil de entender y utilizar</br>

También estoy aplicando estilos CSS a través de un fichero externo llamado “estilo.css”, el cual, </br>

 está siendo referenciado a través de la línea &lt;link rel=”stylesheet” type=”text/css” href=”style.css” /&gt;</p>

ejemplo-css-en-español

Ahora utilizando un valor de 50px, nuestro navegador muestra lo siguiente:

p {

  word-spacing: 50px;

}

aprendiendo css en español

text-decoration: Permite aplicar distintos tipos de efectos a un bloque de texto, tales como subrayados, tachados, entre otros. Los posibles valores que puede tomar esta propiedad son: none (ninguno), underline(subrayado), overline (sobrerayado) y line-through (tachado).

En este ejemplo podemos visualizar cada uno de los cuatros valores que puede tomar esta propiedad:

                h1 {

                text-decoration: none;

                }

                h2 {

                text-decoration: underline;

                }

                h3 {

                text-decoration: overline;

                }

                h4 {

                text-decoration: line-through;

                }

<h1> Mi primera página utilizando CSS none</h1>

<h2> Mi primera página utilizando CSS underline</h2>

<h3> Mi primera página utilizando CSS overline</h3>

<h4> Mi primera página utilizando CSS line-through</h4>

manual-css-en-español

text-transform: Establece la posibilidad de cambiar el texto a minúsculas o mayúsculas.  Los posibles valores que puede tomar esta propiedad son: none (ninguno), capitalize (la primera letra de cada palabra en mayúsculas), uppercase (todas las letras en mayúsculas) y lowercase (todas las letras en minúsculas).

Veamos el ejemplo:

                h1 {

                text-transform: none;

                }

                h2 {

                text-transform: capitalize;

                }

                h3 {

                text-transform: uppercase;

                }

                h4 {

                text-transform: lowercase;

                }

<h1> Mi primera página utilizando CSS none</h1>

<h2> Mi primera página utilizando CSS underline</h2>

<h3> Mi primera página utilizando CSS overline</h3>

<h4> Mi primera página utilizando CSS line-through</h4>

manual-básico-css

text-shadow: permite añadir una o varias sombras al texto. Es necesario indicar como parámetros, el color de la sombra (por defecto se utiliza el color del texto), la distancia horizontal (positiva o negativa), la distancia vertical (positiva o negativa) y el diámetro de desenfoque.

Observemos como se ve el siguiente ejemplo:

                h1 {

               text-shadow: gray 0 -6px;

                }

<h1> Ejemplo de utilización del efecto de sombra en texto</h1>

código-css

¿Qué tal si combinamos los efectos aprendidos?

                h1 {

  font-size: 150%;

  font-weight: bold;

  letter-spacing: 10px;

  text-align: center;

  text-shadow: black 6px 6px 2px;

  text-decoration: underline;

  text-transform: capitalize;

  word-spacing: 5px;

                }

<h1> Qué divertido es Aprender CSS </h1>

curso-de-css-en-español

Hosting Web

Para el Hosting de tu web te recomendamos

Raiola Networks y SiteGround

​Aloja tu web en un hosting de confianza


Bordes

Border: A través de la propiedad border y sus combinaciones, podemos aplicar estilos a los bordes superior, inferior, derecho e izquierdo de cualquier elemento HTML. Si no se especifica ninguna variante, el valor definido aplicará a los cuatro bordes del elemento (superior, derecho, izquierdo e inferior). También se puede especificar a cuál de los bordes queremos aplicar el valor especificado, por ejemplo:

Acá se aplicaría un grosor de borde de 10 px para cada uno de los cuatro bordes que rodean el elemento HTML:

p {

  border-width: 10px;

}

Acá se aplicaría la misma propiedad solo a los bordes derecho y superior:

p {

  border-right-width: 10px;

  border-top-width: 10px;

}

border-width: Como podemos suponer luego de nuestro ejemplo anterior, la propiedad border-width, permite definir el grosor del borde de un elemento HTML. Puede tomar como valores cualquier valor absoluto de longitud, así como los valores thin (delgado), médium (medio) o thick (grueso).

Algunos ejemplos de esta propiedad serían:

p {

  border-width: 10px;

}

h1 {

  border-width: medium;

}

border-color: Permite establecer el color del borde de un elemento HTML. Como valor, se puede utilizar cualquiera de las formas ya revisadas en propiedades anteriores en este tutorial.

Ejemplos de esta propiedad serían:

p {

  border-color: #ff459c;

}

h1 {

  border-color: blue;

}

border-style: Permite definir el estilo del borde de un elemento HTML. Los valores que puede tomar son los contenidos en la siguiente lista:

  • None (ninguno)
  • Hidden (Oculto)
  • Dotted (Punteado)
  • Dashed (segmentado por guiones)
  • Solid (Línea Continua)
  • Double (Línea Continua Doble)
  • Groove, Ridge, Inset, Outset: Estos estilos producen un efecto tridimensional en el borde dependiendo de los colores utilizados para su diseño.

Ejemplos de esta propiedad son:

p {

  border-style: solid;

}

h1 {

  border- style: ridge;

}

Combinando las propiedades de bordes, podemos apreciar el siguiente ejemplo, en donde utilizamos la propiedad border seguida de los valores para color, grosor y estilo:

                h1 {

                border: blue 5px dotted;

                }

                h2 {

                border: red 10px solid;

                }

                h3 {

                border: white 5px ridge;

                }

                h4 {

                border: green 5px double;

                }

<h1> Ejemplo de Borde Dotted </h1>

<h2> Ejemplo de Borde Solid</h2>

<h3> Ejemplo de Borde Ridge</h3>

<h4> Ejemplo de Borde Double</h4>

curso-básico-css

Border-radius: Esta propiedad permite dar un estilo redondeado a las esquinas del elemento HTML para el cual se ha definido un borde.

                h1 {

  border: Blue 5px double;

  border-radius: 20px;

                }

<h1> Ejemplo de propiedad border-radius </h1>

curso-básico-css-en-español

Márgenes

El margen exterior de un elemento HTML se define como el área que rodea el borde del elemento, independientemente de que el borde sea visible o no.

Margin: A través de esta propiedad podemos definir el margen exterior del elemento HTML.

p {

  border: red 2px solid;

  margin: 20px;

}

Veamos el siguiente ejemplo:

                h1 {

               border: red 2px solid;

                 margin: 20px;

                }

                h2 {

                border: red 2px solid;

                }

<h1> Texto con margen a 20 px </h1>

<h2> Texto sin margen definido </h2>

margin-css

De igual manera que la propiedad border, la propiedad margin puede complementarse especificando el margen al cual queremos aplicar un determinado valor: top (superior), right (derecho), left (izquierdo), bottom (inferior).

Cuando queremos centrar un elemento en su contenedor podemos utilizar el valor “auto”. Veamos el siguiente ejemplo, en donde centramos un elemento H1 en la pantalla:

                h1 {

                width: 50%;

               border: blue 4px solid;

               margin-left: auto;

               margin-right: auto;

text-align: center;

                }

css básico en español

Padding: Existe otro tipo de margen, llamado margen interior o padding, y se define como el área situada entre el elemento HTML y su borde. En la propiedad padding se sigue el mismo patrón de la propiedad margin, es decir, se puede aplicar a cada uno de los cuatro márgenes en grupo o de manera individual. Utilizaremos el mismo ejemplo anterior pero esta vez agregaremos la propiedad padding con un valor de 20 px y observemos como este espacio se ve representado entre el texto y el borde del elemento h1.

h1 {

                width: 50%;

               border: blue 4px solid;

               margin-left: auto;

               margin-right: auto;

text-align: center;

padding: 20px;

                }

padding-css

Posicionamiento

En esta sección estaremos revisando la manera en que se distribuyen los elementos HTML en la pantalla y como CSS permite modificar la posición de cada uno de ellos.

El posicionamiento en CSS puede definirse de cinco maneras:

  • Posicionamiento normal: Es el modelo usado por defecto por los navegadores. Los elementos se van mostrando en pantalla en el mismo orden en que aparecen en el código HTML. Los elementos pueden ser de bloque o elementos en línea. Los elementos de bloque ocupan todo el ancho y su altura es la mínima necesaria para mostrar todos los elementos que contienen. Los elementos en línea se encuentran dentro de los elementos en bloque.bloques cssElementos-en-línea
  • Posicionamiento relativo: Desplaza la caja del elemento HTML respecto de su posición original definida mediante el posicionamiento normal. Se controla con las propiedades top, left, right y bottom.

posicionamiento-normal-y-relativo

Podemos observar en la imagen superior que, aunque se mueve el elemento identificado como “caja2”, el resto de los elementos mantiene su posición.

  • Posicionamiento Absoluto: establece la posición exacta de un elemento HTML en el documento. Se controla también, mediante las propiedades top, left, right y bottom.

posicionamiento-absoluto

Podemos observar que cuando el elemento identificado como “caja 2” se desplaza de su posición, el elemento identificado como “caja 3” pasa a ocupar su lugar.

  • Posicionamiento fijo: Es una variante del posicionamiento absoluto. La principal característica de este modelo de posicionamiento es que los elementos mantienen una posición inamovible dentro del navegador, sin importar que el usuario se desplace por la página. Esta característica es muy útil a la hora de posicionar encabezados o menús.
  • Posicionamiento flotante: Es el más complejo de los modelos de posicionamiento, pero al mismo tiempo es el más utilizado. Puede definirse como flotante a la derecha o flotante a la izquierda.

Cuando un elemento es definido como flotante a la derecha, se ubicará en la zona más a la derecha de su contenedor mientras que el resto de los elementos ocuparán el lugar que originalmente ocupaba el elemento al cual se le aplicó la propiedad.

Veamos algunos ejemplos de esta propiedad:

float-left-2

float-left-3

Float-leftFloat-Right

Identificación y agrupación de elementos

No quisiera terminar este tutorial de CSS en español, sin mencionar la importancia del atributo “class”, el cual nos permitirá aplicar estilos CSS a un elemento o grupo de elementos en particular. Hasta ahora hemos visto código del tipo:

p{

text-align: center;

}

Cuando nos encontramos con código similar al del ejemplo anterior, sabemos que el mismo se aplicará a todos los elementos tipo párrafo (<p>) que estén incluidos en nuestro documento HTML. Ahora bien, si quisiéramos aplicar el estilo a alguno, o algunos de nuestros elementos tipo párrafo solamente y al resto no, ¿cómo podemos hacerlo?

Bien, acá es donde aparece el atributo “class” y nos resuelve ese problema. Simplemente debemos especificar el atributo “class” en el elemento HTML indicado, y en nuestro código CSS debemos hacer la diferenciación correspondiente, dependiendo del valor que hayamos utilizado, por ejemplo:

h1.encabezado1 {

  border: green 5px double;

  background-color: yellow;

                }

                h1.encabezado2 {

  border-radius: 20px;

  background-color: white;

  border: red 1px solid;

                }

<h1 class=”encabezado1″> Ejemplo de Encabezado 1 </h1>

<h1 class=”encabezado2″> Ejemplo de Encabezado 2 </h1>

class-css

Se puede notar que, aunque nuestro código HTML utiliza dos elementos de encabezado h1, se ha agregado el atributo “class” para cada uno de ellos con un nombre distinto, “encabezado1” y “encabezado2”. Esto permite que se puede aplicar distintos estilos de CSS a cada uno de los elementos, aunque sean de la misma naturaleza, dentro del código HTML.

Conclusiones

A lo largo de este tutorial hemos abarcado los conceptos de CSS básico, para que puedas aprender CSS y comenzar a darle un estilo profesional a tus páginas HTML. Te invitamos a que practiques cada una de las propiedades presentadas y des rienda suelta a tu creatividad, aprovechando todo el potencial que CSS ofrece.

A medida que vayas familiarizándote con las propiedades y sus posibles valores encontrarás infinidad de combinaciones de estilos y pasarás al siguiente nivel en donde encontrarás propiedades más avanzadas que ofrece este maravilloso lenguaje.

¿Qué te ha parecido éste artículo? ¿Nos cuentas tus dudas? Te esperamos en los comentarios aquí abajo y, si quieres, compártelo también.

Dirección de Correo electrónico

¡Suscríbete a nuestra Newsletter!

Únete a nuestra comunidad y te ayudaremos a crear tu proyecto en internet, desde el dominio web hasta las Redes Sociales...

 

Aprender CSS: Tutorial Básico en Español
5 (100%) 2 votos