CURSO CSS
Abrir comentarios
Para abrir comentarios, a diferencia de HTML donde es con solo agregar - - a los lados para
que no afecte al documento, en CSS debemos colocar /* */ para que el texto o comentario pase a
segundo plano para que no afecte al documento.
SELECTORES.
Selector universal
Sirve para darle atributos a TODO el contenido del proyecto, sin excepciones, puede servir
para tener una fuente de texto predeterminada en el sitio en general. Para usarlo debemos abrir el
selector con " * " y abrir y cerrar corchetes, entre estos podemos agregar los atributos que deseemos.
Ejemplo:
*{
color: blue;
}
Selector de etiquetas
A diferencia del universal, esta vez solo tiene de objetivo a las etiquetas mencionadas
(cualquier etiqueta dentro del proyecto de web) haciendo que podamos editar una parte del sitio a la
vez. Para usarlo basta con que nombres la etiqueta correspondiente a la que quieras editar para luego
abrir y cerrar corchetes ({ } ) y agregar los atributos que desees entre estos. Ejemplo:
h1 {
color: cyan;
}
Selector descendiente
Que pasa si la etiqueta que queremos editar comparte una etiqueta común? Podemos usar
selectores descendientes para editar una en específico a para que no afecte al resto del archivo.
Ejemplo:
div p {
color: blue;
}
Selectores de clase
En HTML, tenemos el atributo class="---" donde podemos nombrar una porción que queremos
sea editable atravéz de ese nombre de clase en CSS, por ejemplo tenemos la siguiente linea en HTML:
<a href="#" class="rojo">Soy un enlace</a><br>
En donde ese enlace será llamado "rojo" dentro de CSS, para seleccionar ese enlace
llamandolo desde CSS, basta con un " . " y el nombre de la clase, como el siguiente ejemplo.
.rojo {
color: red;
font-size: 34px;
}
, Una etiqueta en HTML puede tener mas de una clase, para evitarnos tener que editar una clase
una por una, podemos crear una clase donde solo cambiemos el tamaño de un texto, y con otra clase
cambiemos su color.
Ejemplo:
<a href="#" class="rojo size38">Soy un enlace</a><br>
Donde cada clase en CSS puede ser de la siguiente manera:
.rojo {
color: red;
}
.size38 {
font-size: 38px;
}
Entonces tenemos por seguro, que cada clase agrega un atributo diferente, donde size38
aumenta el tamaño de la fuente a 38px desde el predeterminado, y rojo hace que la fuente sea de color
roja. Como resultado tendremos la fuente del enlace en color rojo y de tamaño 38px.
Selector de ID
Para seleccionar una parte del proyecto por su ID, basta con ingresar a nuestro codigo el
simbolo " # " y el ID de la etiqueta a editar. El proceso es similar con las clases pero la diferencia
radica en que el ID es único para cada etiqueta y tienen prioridad sobre las clases, por lo que primero
se aplica lo que agreguemos por ID y luego por clase, teniendo que ser editada o atributada de manera
individual en cada ID que deseemos manipular.
#1101 {
color: blue;
}
De esta forma se aplica el color azul a la etiqueta con el ID #1101
Selectores de hijos.
Si queremos seleccionar una etiqueta dentro de un div tenemos que especificarlo en el codigo
de CSS de la siguiente manera
div > p {
color: red;
}
De la misma manera se puede seleccionar otras etiquetas con nombrarlas.
, Selector de atributos
Podemos seleccionar un atributo en especifico dentro del codigo del proyecto HTML,
haciendo posible su estilado desde CSS. Hay más de una forma de seleccionarlos, listados a
continuación.
Selector de inputs universal
input {
color: red;
}
Selector de inputs especificos.
Para seleccionar un tipo especifico tenemos que nombrarlo correctamente entre " [ ] "con la
variable
input[Type = "text"] {
color: red;
}
De esta manera seleccionamos solo a los inputs que esten marcados como de tipo text.
Herencia.
La herencia en CSS es básicamente que cuando le damos atributos o cambios desde css a una
etiqueta que contiene otras etiquetas o elementos, le aplicará todo lo que apliquemos a la etiqueta
padre (chequear "Selectores de hijos") por lo que si no especificamos los atributos para algunos de los
hijos de la etiqueta padre, todos los elementos desde la etiqueta padre sufriran los mismos cambios.
<div> div {
<p>Soy un párrafo <a color: red;
href="#">dentro</a> de un div</p>
</div> }
<div> div article {
<article> color: cyan;
<p>Soy un párrafo dentro de un
Article y dentro de un Div</p> }
</article>
</div>
Ejemplo en formato HTML5 Ejemplo de atributos en CSS
Aquí vemos que la primera linea de codigo, por defecto, todo lo que tenga dentro de un div,
pasará a ser de color rojo, sin embargo, cuando hacemos con selección de hijos, vemos que el article
dentro de la siguiente linea de código que se encuentra dentro del div, tendrá un cambio por separado
de la herencia de su padre.
, Background y propiedades del cuerpo.
No siempre se recomienda utlizar imágenes de fotografía como fondos del sitio web, ya que
estas pesan mucho y entre mas pesen mas tardarán en cargar, haciendo que nuestro sitio pierda
atractivo. Siempre es mejor que sea lo mas mas ligero posible, la velocidad y agilidad de un sitio
puede ganarse clientes de una manera inigualable, por lo que si se desea patrones sencillos para el
fondo, en lugar de un color sólido, el sitio: https://www.toptal.com/designers/subtlepatterns/patterns/
es donde puedes buscar patrones sin derechos de autor para uso libre.
• background: color;
Sirve para cambiar el color en el fondo del sitio
Ejemplo: background-color: rgb(135, 184, 167);
• background: url( );
Sirve para agregar algo por dirección (fisica) del servidor, por ejemplo, una imagen,
para el fondo del sitio.
Ejemplo: background: url("Media/bodybackground.jpg");
• background-repeat: no-repeat / repeat / repeat-y / repeat-x;
Sirve para hacer saber que queremos que el atributo de background (imagen por
ejemplo) se repita (o no) y de que forma, si le damos a repeat, solo repetira la imagen
para llenar todo el sitio, lo cual no es muy estético, si le damos repeat-y la repetirá en
todo el sitio de arriba a abajo, si le damos en repeat-x, lo hará de izquierda a derecha,
y no-repeat, sirve para que no se repita para nada.
Ejemplo: background-repeat: repeat-y;
• background-position: (X)px (Y)px;
Sirve para cambiar la posición en donde queremos que el elemento se muestre,
teniendo en cuenta que X representa la posición en la tabla de manera horizontal, y Y
por la tabla de manera vertical.
Podemos hacernos la vida mas sencilla al aplicar ciertos atributos al background de una forma
mas limpia, agregando todos los atributos a la misma linea de código, pero solo algunos son
compatibles entre sí, por lo que para minimizar la linea de código, ahorrarnos tiempo y tener un
código más limpio, debemos entender cuales pueden tenerse en la misma linea sin crear
incongruencias y que funcione correctamente. En ejemplo tenemos lo siguiente:
background: url("Media/bodybackground2.jpg") no-repeat center center;
De esta manera la imagen que colocamos por este comando, no será repetiday estará centrada.
Pero será del tamaño fuente original del archivo "jpg" por lo que deberíamos agregar background-
size: luego para poder editar su tamaño si la queremos mas grande o mas pequeña.
Asignar propiedades a un Div
Creamos un div con nomenclatura de clase desde HTML, entonces en nuestro código de CSS
lo llamamos para poder darle atributos con los siguientes comandos:
width: es para asignar anchura en pixeles.
Height: es para asignar altura en pixeles.
background(revisar comandos extra de background): sirve para darle una imagen, color,
estilo, etc.
Abrir comentarios
Para abrir comentarios, a diferencia de HTML donde es con solo agregar - - a los lados para
que no afecte al documento, en CSS debemos colocar /* */ para que el texto o comentario pase a
segundo plano para que no afecte al documento.
SELECTORES.
Selector universal
Sirve para darle atributos a TODO el contenido del proyecto, sin excepciones, puede servir
para tener una fuente de texto predeterminada en el sitio en general. Para usarlo debemos abrir el
selector con " * " y abrir y cerrar corchetes, entre estos podemos agregar los atributos que deseemos.
Ejemplo:
*{
color: blue;
}
Selector de etiquetas
A diferencia del universal, esta vez solo tiene de objetivo a las etiquetas mencionadas
(cualquier etiqueta dentro del proyecto de web) haciendo que podamos editar una parte del sitio a la
vez. Para usarlo basta con que nombres la etiqueta correspondiente a la que quieras editar para luego
abrir y cerrar corchetes ({ } ) y agregar los atributos que desees entre estos. Ejemplo:
h1 {
color: cyan;
}
Selector descendiente
Que pasa si la etiqueta que queremos editar comparte una etiqueta común? Podemos usar
selectores descendientes para editar una en específico a para que no afecte al resto del archivo.
Ejemplo:
div p {
color: blue;
}
Selectores de clase
En HTML, tenemos el atributo class="---" donde podemos nombrar una porción que queremos
sea editable atravéz de ese nombre de clase en CSS, por ejemplo tenemos la siguiente linea en HTML:
<a href="#" class="rojo">Soy un enlace</a><br>
En donde ese enlace será llamado "rojo" dentro de CSS, para seleccionar ese enlace
llamandolo desde CSS, basta con un " . " y el nombre de la clase, como el siguiente ejemplo.
.rojo {
color: red;
font-size: 34px;
}
, Una etiqueta en HTML puede tener mas de una clase, para evitarnos tener que editar una clase
una por una, podemos crear una clase donde solo cambiemos el tamaño de un texto, y con otra clase
cambiemos su color.
Ejemplo:
<a href="#" class="rojo size38">Soy un enlace</a><br>
Donde cada clase en CSS puede ser de la siguiente manera:
.rojo {
color: red;
}
.size38 {
font-size: 38px;
}
Entonces tenemos por seguro, que cada clase agrega un atributo diferente, donde size38
aumenta el tamaño de la fuente a 38px desde el predeterminado, y rojo hace que la fuente sea de color
roja. Como resultado tendremos la fuente del enlace en color rojo y de tamaño 38px.
Selector de ID
Para seleccionar una parte del proyecto por su ID, basta con ingresar a nuestro codigo el
simbolo " # " y el ID de la etiqueta a editar. El proceso es similar con las clases pero la diferencia
radica en que el ID es único para cada etiqueta y tienen prioridad sobre las clases, por lo que primero
se aplica lo que agreguemos por ID y luego por clase, teniendo que ser editada o atributada de manera
individual en cada ID que deseemos manipular.
#1101 {
color: blue;
}
De esta forma se aplica el color azul a la etiqueta con el ID #1101
Selectores de hijos.
Si queremos seleccionar una etiqueta dentro de un div tenemos que especificarlo en el codigo
de CSS de la siguiente manera
div > p {
color: red;
}
De la misma manera se puede seleccionar otras etiquetas con nombrarlas.
, Selector de atributos
Podemos seleccionar un atributo en especifico dentro del codigo del proyecto HTML,
haciendo posible su estilado desde CSS. Hay más de una forma de seleccionarlos, listados a
continuación.
Selector de inputs universal
input {
color: red;
}
Selector de inputs especificos.
Para seleccionar un tipo especifico tenemos que nombrarlo correctamente entre " [ ] "con la
variable
input[Type = "text"] {
color: red;
}
De esta manera seleccionamos solo a los inputs que esten marcados como de tipo text.
Herencia.
La herencia en CSS es básicamente que cuando le damos atributos o cambios desde css a una
etiqueta que contiene otras etiquetas o elementos, le aplicará todo lo que apliquemos a la etiqueta
padre (chequear "Selectores de hijos") por lo que si no especificamos los atributos para algunos de los
hijos de la etiqueta padre, todos los elementos desde la etiqueta padre sufriran los mismos cambios.
<div> div {
<p>Soy un párrafo <a color: red;
href="#">dentro</a> de un div</p>
</div> }
<div> div article {
<article> color: cyan;
<p>Soy un párrafo dentro de un
Article y dentro de un Div</p> }
</article>
</div>
Ejemplo en formato HTML5 Ejemplo de atributos en CSS
Aquí vemos que la primera linea de codigo, por defecto, todo lo que tenga dentro de un div,
pasará a ser de color rojo, sin embargo, cuando hacemos con selección de hijos, vemos que el article
dentro de la siguiente linea de código que se encuentra dentro del div, tendrá un cambio por separado
de la herencia de su padre.
, Background y propiedades del cuerpo.
No siempre se recomienda utlizar imágenes de fotografía como fondos del sitio web, ya que
estas pesan mucho y entre mas pesen mas tardarán en cargar, haciendo que nuestro sitio pierda
atractivo. Siempre es mejor que sea lo mas mas ligero posible, la velocidad y agilidad de un sitio
puede ganarse clientes de una manera inigualable, por lo que si se desea patrones sencillos para el
fondo, en lugar de un color sólido, el sitio: https://www.toptal.com/designers/subtlepatterns/patterns/
es donde puedes buscar patrones sin derechos de autor para uso libre.
• background: color;
Sirve para cambiar el color en el fondo del sitio
Ejemplo: background-color: rgb(135, 184, 167);
• background: url( );
Sirve para agregar algo por dirección (fisica) del servidor, por ejemplo, una imagen,
para el fondo del sitio.
Ejemplo: background: url("Media/bodybackground.jpg");
• background-repeat: no-repeat / repeat / repeat-y / repeat-x;
Sirve para hacer saber que queremos que el atributo de background (imagen por
ejemplo) se repita (o no) y de que forma, si le damos a repeat, solo repetira la imagen
para llenar todo el sitio, lo cual no es muy estético, si le damos repeat-y la repetirá en
todo el sitio de arriba a abajo, si le damos en repeat-x, lo hará de izquierda a derecha,
y no-repeat, sirve para que no se repita para nada.
Ejemplo: background-repeat: repeat-y;
• background-position: (X)px (Y)px;
Sirve para cambiar la posición en donde queremos que el elemento se muestre,
teniendo en cuenta que X representa la posición en la tabla de manera horizontal, y Y
por la tabla de manera vertical.
Podemos hacernos la vida mas sencilla al aplicar ciertos atributos al background de una forma
mas limpia, agregando todos los atributos a la misma linea de código, pero solo algunos son
compatibles entre sí, por lo que para minimizar la linea de código, ahorrarnos tiempo y tener un
código más limpio, debemos entender cuales pueden tenerse en la misma linea sin crear
incongruencias y que funcione correctamente. En ejemplo tenemos lo siguiente:
background: url("Media/bodybackground2.jpg") no-repeat center center;
De esta manera la imagen que colocamos por este comando, no será repetiday estará centrada.
Pero será del tamaño fuente original del archivo "jpg" por lo que deberíamos agregar background-
size: luego para poder editar su tamaño si la queremos mas grande o mas pequeña.
Asignar propiedades a un Div
Creamos un div con nomenclatura de clase desde HTML, entonces en nuestro código de CSS
lo llamamos para poder darle atributos con los siguientes comandos:
width: es para asignar anchura en pixeles.
Height: es para asignar altura en pixeles.
background(revisar comandos extra de background): sirve para darle una imagen, color,
estilo, etc.
