¿Que es CSS? y ¿Qué me importa a mi?

¡Compártelo!

Cuando construyes tu negocio en internet, necesitas conocer varios puntos básicos para saber que es lo que tienes que mejorar y además entender a la persona que vas a contratar para poder tomar las medidas adecuadas. Esto que parece básico por regla general no se hace, y lo que es peor, los que tienen un negocio y se quieren adentrar en el mundo online no se forman.

Lo he repetido hasta la saciedad lo gratis en internet cuesta dinero, y además te sale muy caro en tiempo, y además no puedes abarcarlo todo. Por eso la formación es importante para aprender los conceptos que necesitas para manejarte en este mundo. No es necesario que seas un experto, ni que hagas cursos largos, sino que tengas una visión general y puedas controlar la mayoría de conceptos que vas a tratar de manera habitual.

Esto del CSS es infumable

CSS y que es CSS3 ¿Mande?

CSS son las siglas del inglés “Cascading Style Sheets” (Hojas de Estilo en Cascada) y básicamente consiste en la información que define como va a ser la presentación de una web. Cuando me refiero a presentación, me refiero a negritas, colores, efectos, tipos de letra que escogemos, … de tal manera que se independiza del HTML que es el lenguaje donde se estructura toda la información que se manda a nuestro ordenador para que el navegador nos presente esa bonita página web. Y CSS3 es la versión 3, donde se definen las características de este lenguje, digamos que en esta versión le han añadido muchas cosas y mejorado otras.

Siendo un poco más técnicos se refiere a la tecnología desarrollada para separar la presentación de la estructura HTML. Esta tecnología aplica reglas de estilo a los elementos HTML, quedando de esta manera separada de la estructura HTML. Poco a poco este lenguaje se ha ido haciendo más importante entre los diseñadores gracias a toda la facilidad de uso, y los resultados que son muy flexibles.

Para trabajar con CSS necesitas conocer los tres principales elementos:


Selectores
Atributos
Valores

Como hemos dicho anteriormente HTML define aquellas partes que son la estructura de una página web. Supongamos que una etiqueta HTML fuera una casa. Para definir el inicio de donde está la casa pondríamos <casa> y para definir el final pondríamos </casa>. Ahora CSS le dará una serie de información a esta etiqueta HTML.

Selectores

Estos se usan para definir sobre que etiqueta HTML vamos a aplicar Atributos y Valores. Existen tres tipos de selectores:

  • Los selectores de etiquetas HTML, los cuales se utilizan escribiendo el nombre de la etiqueta a la que le aplicaremos el estilo.
  • Los selectores de identificador, son aquellos que hemos creado y se aplican solo a las etiquetas que así lo identifiquemos.
  • El tercer selector es el de clase, se escribe en el documento CSS comenzando con un punto “.” y va seguido del nombre que queramos ponerle a la clase de la siguiente forma: .mi_clase.

Para que no te líes como las persianas ten en cuenta que los selectores por identificador (id) están pensados para que la etiquta que selecciones sea única, y las clases están pensadas para poder definir el mismo estilo a varias etiquetas de la página. Esto significa que puedes asignar una misma clase a varias etiquetas distintas en la página.

Por que tengas un ejemplo, si la etiqueta <casa> aparece solo una vez en toda nuestra estructura y queremos aplicarle algunos valores entonces tendríamos que utilizar un id, pero si tuviéramos grupos de casas, o quisiéramos aplicar a varias los mismos valores, entonces utilizaríamos una clase. Luego por supuesto tu puedes hacer lo que te de la gana.

Atributos

Son aquellos atributos que aplicaremos a las etiquetas HTML, si queremos cambiar el fondo utilizamos el atributo “background”, si queremos cambiar el tipo de letra usamos el atributo “font” y así con otros muchos.

Valores

Y por supuesto una vez definidas los selectores y los atributos, tenemos que darles un valor, como puede ser un color, tamaño, o lo que sea.

Curso Desarrollo web con bootstrap

Ahora to junto: La sintáxis

Esto ya es más sencillo que todo lo anterior junto, primero se coloca el selector (obvio), luego sea abre una llave “{” y se empiezan a colocar los atributos, seguidos de dos puntos “:” y luego el valor seguido de un punto y coma “;“, al final de todo pues nos toca cerrar el selector con el cierre de llave “}“, ya sabes todo lo que se abre luego tiene que cerrarse. Lo bueno es que en un mismo selector se pueden poner tantos atributos con los valores que quieras, separándolos con un espacio o con un salto de línea. También puedes poner comentarios antes de los selectores con “/*” para abrir y ponemos “*/” para cerrarlo. ¿Ha quedado claro o esto es un puto lio?

Vamos a ver un ejemplo, supongamos que tenemos una etiqueta global que se llama ciudad y queremos aplicarle un color, un fondo, un tipo de letra y un tamaño igual para todos los elementos, nos quedaría algo así:

/* Selector CSS sobre una etiqueta */
ciudad {
font-family: arial;
font-size: 12px;
color: blue;
background-color: #cccccc;
}

En este caso lo que conseguiríamos es que todas las etiquetas que fueran ciudad y todo lo que estuviese dentro de esta etiqueta HTML, tuviera los parámetros que le hemos definido el el selector CSS. Es decir todo en la ciudad tendría el tipo de letra y el color que hemos definido.

Para aplicar el selector identificador lo haríamos de la siguiente manera:

/* Selector de identificador CSS sobre una etiqueta */
#colorines {
background-color: #ff0000;
color: #ffffff;
font-size: 26px;
}

En este caso, aplicamos el selector a la etiqueta con solo colocarle el identificador de la siguiente manera:

<div id=”colorines”>Aquí ponemos lo que nos de la gana</div>

Y por último nos queda el selector de clase, que lo definiremos de la siguiente manera:

/* Selector de identificador CSS sobre una etiqueta */
.loquemeinvento {
margin: 5px;
height: 100px;
width: 200px;
}

Para aplicar este selector solo tenemos que añadir a la etiqueta HTML lo siguiente:

<div class=”loquemeinvento”>Aquí ponemos lo que nos de la gana</div>

Con esto y un bizcocho tienes lo suficiente para que investigues por internet más cosas sobre CSS y así puedas realizar pequeños cambios al diseño de tu página web. Ten en cuenta que esto es lo básico y que como supondrás el lenguaje CSS ofrece muchas más cosas, por lo que si quieres ponerte con muchos cambios sobre tu web, lo mejor es que busques a un profesional que te haga el diseño adecuadamente. También puedes encontrar más información aquí: w3schools.
Espero que este rollo macabeo te haya sido útil y le puedas sacar partido en tu web y poder darle algo más de vidilla y color. Si te ha gustado te agradecería enormemente que lo compartieses con tus amigos y me hicieras más feliz que una perdiz.

Opt In Image
¿Quieres conseguir más suscriptores?
  • Descubre los secretos para que tu lista crezca rápidamente.
  • Recibe el PDF 7 estrategias para duplicar tu lista de correo.
  • Tendrás más suscriptores con las mismas visitas.

100% libre de SPAM.

Acerca de Luis Miguel Delgado

Emprendedor en cambio permanente. Buscando nuevos proyectos y actividades que desarrollar. "Vive cada día como si fuera el último". Si quieres saber más sobre mí puedes leer mi página acerca de.

Comentarios

  1. Hola Luis,
    Yo aprendí sobre html, css… usando Blogger, y más que nada leyendo tutoriales y poniéndo en práctica lo que leía, durante muchos años. Lo que más me gusta de todo esto es que es algo creativo, cómo puedes crear (por ejemplo) un estilo cuando pasás el cursor sobre una palabra. Pequeñas cosas que hacés comprendiendo como funcionan las hojas de estilo (o css), se hace la diferencia con un blog.
    Gracias por el enlace a W3Schools, no conocía ese sitio y veo que tiene información muy úitl sobre estos temas.
    ¡Un saludo!

    • Luis Miguel Delgado dice:

      Ya lo he dicho en el blog, las profesiones actuales necesitan de creatividad, el resto se aprende con el tiempo.

  2. Yo soy nuebo por asi decirlo en este tema, me encanta el diseño web, pero solo conozco lo básico de css la sintaxis y las funciones, pero me gustaría entrar mas en este tema, para poder ser un muy buen diseñador, hace unas semanas empece a investigar harto sobre css y html (ya que de html se bastante) pero veo que para completar mis conocimientos se necesita css y javascript, esos 3 lenguajes son los que mas me fascinan, navegando me encontré con esta pagina la cual reforzó el poco conocimiento basico que sabia de css, muy bien ya que me queda esta parte claro ahora por lo mas complicado, gracias por la info me sirvió mucho.

    • Luis Miguel Delgado dice:

      Si sabes HTML, css te costará poco aprenderlo. Javascript te costará algo más aprenderlo pero con paciencia lo conseguirás. Me alegro de que te sirviese.

  3. Esto es lo bonito del desarrollo web pero esto es básico para ser un front end developer completo necesitas saber html css javascript y ahora conocer un framework backbone.js react.js angularjs node.js etc. asumiendo claro que ya sabes jQuery pero hay que adaptarse seguir aprendiendo no acaba nunca si te gusta no hay imposibles.

Opina

*