Lists of CSS declarations

Properties are defined as lists of CSS declarations, they are very heterogeneous and cannot be applied to all HTML tags

We can find examples in w3schools or in MDN Web Docs Mozilla

Below we will address some of the main lists of statements

Units of measure

Many properties accept as the value of a unit of measure

En general, es recomendable utilizar medidas relativas en vez de absolutas

For example, for a web page we could indicate that we want 20 pixels high, however, if our users change devices, such as a mobile or a tablet, that size would be too large or the content would appear disproportionate.

To avoid that or similar problems, CSS declarations support the following units:

Percentage: sets the size in percent with respect to the inherited value
```
* {
    font-size: 80%;
}
```
em: sets the size according to the current font (or the legacy font, if no font size is defined)
```
* {
    font-size: 2em;
}
```
px: sets the size in pixels (a pixel represents a specific point on the screen that shows our page), being an absolute measure, as it can cause problems, we should limit its use to specific cases
```
* {
    font-size: 12px;
}
```

We may use CSS declarations to indicate the visual appearance of the web page on different devices, such as a printer. For those cases we can use other types of measures:

cm, mm, in: the size is set to one of the international units (cm for centimeters, mm for millimeters, and in for inches)
```
header {
    font-size: 12cm;
}

body {
    font-size: 30mm;
}

p {
    font-size: 10in;
}
```
pt: the size is set in points (one point equals \frac{1}{72} inch)
```
* {
    font-size: 12pt;
}
```

The use of relative measures (percentages or em) allow our page to be displayed correctly on any device. This practice is called design adaptive or responsive, that is, our design will adapt to the device on which it is viewed (a browser, a mobile, a tablet, etc.)

Colors

Another of the fundamental elements for a web page is the treatment of the colors

There is a list of 140 basic colors that we can find predefined, we can also define them manually using the RGB notation (Red, Green, Blue) to indicate the amount of red, green and blue that make up that color

To define the color we will use a value between 0 and 255 (in its value hexadecimal), starting the encoding with the '#' symbol followed by a 6 digit hexadecimal number

We can define color in the following ways:

color: value where value is one of the predefined colors
```
h1 {
    color: red;
}
```
colour: code dónde código es un valor que empieza por el símbolo ‘#’ seguido de un número hexadecimal de 6 cifras
```
h1 {
    color: #FF0000;
}
```
color: RGB(entero, entero, entero): dónde RGB es una función que admite 3 valores entre 0 y 255 que corresponden a la cantidad de rojo, verde y azul que componen ese color
```
h1 {
    color: RGB(255, 0, 0);
}
```
color: RGB(entero%, entero%, entero%): igual que la anterior, pero el valor entero es un porcentaje
```
h1 {
    color: RGB(100%, 0%, 0%);
}
```
color: transparent: the color transparent is also a valid color in CSS3
```
h1 {
    color: transparent;
}
```

Text properties

Las principales propiedades que se pueden utilizar en los elementos de texto son:

color

indica el color de la fuente. Su valor es un color, ya lo hemos descrito en el previous paragraph
```
p {
    color: #FF0000;
}
```
font-size

representa el tamaño de la fuente, como ya se ha descrito en el previous paragraph it is recommended to use relative values
```
p {
    font-size: 80%;
}
```
font-style

admite un estilo de letra para el texto, podemos elegir entre uno de los siguientes estilos:
- normal es el estilo por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-style: normal;
}
```
- italic it is the default style of the browser for the letter in italics
```
p {
    font-style: italic;
}
```
- oblique es el estilo por defecto del navegador para la letra oblique, es similar a la cursiva, si la fuente no permite el tipo oblique tomará el estilo como italic
```
p {
    font-style: oblique;
}
```
- initial is used to set a CSS property to its default value
```
p {
    font-style: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    font-style: inherit;
}
```
font-weight

supports a bold font style for the text, we can choose between one of the following bold types:
- normal is the default bold of the browser, if not specified, this value will be taken
```
p {
    font-weight: normal;
}
```
- bold defines the bold with bold
```
p {
    font-weight: bold;
}
```
- bolder defines the bold font with the characters more thick
```
p {
    font-weight: bolder;
}
```
- lighter defines the bold with the characters thinner
```
p {
    font-weight: lighter;
}
```
- integer define la negrita con un valor múltiplo de 100, con el valor 400 por defecto y el 700 para bold
```
p {
    font-weight: 600;
}
```
- initial is used to set a CSS property to its default value
```
p {
    font-weight: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    font-weight: inherit;
}
```
text-decoration-line

establece el tipo de decoración del texto para el subrayado, podemos elegir entre uno de los siguientes tipos de decoración:
- none valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    text-decoration-line: none;
}
```
- underline the underline will be below the text
```
p {
    text-decoration-line: underline;
}
```
- overline the underline will be on the text
```
p {
    text-decoration-line: overline;
}
```
- line-through the underscore will be through text
```
p {
    text-decoration-line: line-through;
}
```
- initial is used to set a CSS property to its default value
```
p {
    text-decoration-line: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    text-decoration-line: inherit;
}
```
text-decoration-color

establece el color para la decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- color where color is one of the values seen in the previous paragraph
```
p {
    text-decoration-color: #FF0000;
}
```
- initial is used to set a CSS property to its default value
```
p {
    text-decoration-color: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    text-decoration-color: inherit;
}
```
text-decoration-style

establece el tipo de decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- solid valor por defecto del navegador, si no se especifica, se tomará este valor. Mostrará la línea en una única línea
```
p {
    text-decoration-style: solid;
}
```
- double show the line with a double line
```
p {
    text-decoration-style: double;
}
```
- dotted show the line as a dotted line
```
p {
    text-decoration-style: dotted;
}
```
- dashed show the line as a dashed line
```
p {
    text-decoration-style: dashed;
}
```
- wavy show the line as a wavy line
```
p {
    text-decoration-style: wavy;
}
```
- initial is used to set a CSS property to its default value
```
p {
    text-decoration-style: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    text-decoration-style: inherit;
}
```
text-transform

establece el texto en letras minúsculas o mayúsculas, podemos elegir entre uno de los siguientes tipos de transformación:
- none valor por defecto del navegador, si no se especifica, se tomará este valor. No se tomarán letras mayúsculas
```
p {
    text-transform: none;
}
```
- capitalize transforms the first letter of each word to uppercase
```
p {
    text-transform: capitalize;
}
```
- uppercase transform all letters to uppercase
```
p {
    text-transform: uppercase;
}
```
- lowercase transform all letters to lowercase
```
p {
    text-transform: lowercase;
}
```
- initial is used to set a CSS property to its default value
```
p {
    text-transform: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    text-transform: inherit;
}
```
letter-spacing

aumenta o disminuye el espacio entre caracteres en un texto, podemos elegir entre uno de los siguientes:
- normal valor por defecto del navegador, si no se especifica, se tomará este valor. No hay espacios extra
```
p {
    letter-spacing: normal;
}
```
- length dónde lenghth es la cantidad de espacios extra entre caracteres (también están permitidos valores negativos)
```
p {
    letter-spacing: 5px;
}
```
- initial is used to set a CSS property to its default value
```
p {
    letter-spacing: initial;
}
```
- inherit is used to inherit a property value from its parent element
```
p {
    letter-spacing: inherit;
}
```
- word-spacing
  
  aumenta o disminuye el espacio entre las palabras en un texto, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    word-spacing: normal;
}
```
  - length dónde length es la cantidad de espacios extra entre palabras (también están permitidos valores negativos)
```
p {
    word-spacing: 5px;
}
```
  - initial is used to set a CSS property to its default value
```
p {
    word-spacing: initial;
}
```
  - inherit is used to inherit a property value from its parent element
```
p {
    word-spacing: inherit;
}
```
- line-height
  
  especifica la altura de una línea, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    line-height: normal;
}
```
  - number where number is a value that will be multiplied by the current font size to set the height of the line
```
p {
    line-height: 2;
}
```
  - length dónde length es la altura para esa línea (también están permitidos valores negativos)
```
p {
    line-height: 5px;
}
```
  - % is the height for that line, in percentage of the size of the current font
```
p {
    line-height: 15%;
}
```
  - initial is used to set a CSS property to its default value
```
p {
    line-height: initial;
}
```
  - inherit is used to inherit a property value from its parent element
```
p {
    line-height: inherit;
}
```
- text-align
  
  especifica la alineación horizontal del texto en un elemento, podemos elegir entre uno de los siguientes:
  - left the text is aligned to the left
```
p {
    text-align: left;
}
```
  - right the text is aligned to the right
```
p {
    text-align: right;
}
```
  - center the text is aligned centered
```
p {
    text-align: center;
}
```
  - justify el texto las líneas son estiradas para que cada línea tenga el mismo ancho (como en los periódicos y las revistas)
```
p {
    text-align: justify;
}
```
  - initial is used to set a CSS property to its default value
```
p {
    text-align: initial;
}
```
  - inherit is used to inherit a property value from its parent element
```
p {
    text-align: inherit;
}
```
- text-indent
  
  especifica la sangría de la primera línea en un bloque de texto, podemos elegir entre uno de los siguientes:
  - length dónde length es la sangría de la primera línea en un bloque de texto (también están permitidos valores negativos, en ese caso se usará una sangría a la izquierda)
```
p {
    text-indent: 5px;
}
```
  - % is the indentation of the first line in a block of text in percentage of the size of the parent element
```
p {
    text-indent: 15%;
}
```
  - initial is used to set a CSS property to its default value
```
p {
    text-indent: initial;
}
```
  - inherit is used to inherit a property value from its parent element
```
p {
    text-indent: inherit;
}
```
Es muy importante definir una fuente que sea coherente con el estilo de nuestra web. Para ello se dispone de la propiedad font-family, en la cual especificaremos la fuente (verdana, arial, time new roman, etc) que será usada para ese texto

Sin embargo nos encontraremos con un problema si esa fuente en concreto no está definida en el navegador, por eso es recomendable especificar varias fuentes en caso de que no existiera alguna de ellas

Another limitation is that we can only use sources that meet standards allowed by the browsers

To solve problems related to the sources there are servers text sources they offer the possibility to load the font that we need of that server
```
<!DOCTYPE html>
<html>
    <head>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>

        
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="https://fonts.google.com/css?family=Roboto" />
    </head>

    <body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

    
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1733245033&k=461f2db4572802169954e48844e70493&__muid="></script>

</body>
</html>
```
In the above example we have used one of the reference sources from Google called Roboto, and we have added to our header

Background properties

To set the background of an element we will use the property background-color

Can also be used as a background image using the property background-image, que se repetirá vertical y horizontalmente para cubrir todo el elemento

We may limit the way in which it repeats that image with the properties background-repeat: repeat-y and background-repeat: repeat-x
```
body {
    background-image: url('background.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}
```
In the example above we have used the property background-repeat: no-repeat para desactivar la repetición de la imagen, estableciendo además una posición fija, en la esquina inferior derecha, con la propiedad background-position: right bottom

Para mantenerla fija y que haga scroll en la página, se ha utilizado la propiedad background-attachment: fixed

Dimensions and edges

To indicate the dimensions of an element, we use the properties width and height

We have to take into account if their margins are internal or external

To do this we first define the margin from the edge to the other elements with the property margin

In the second place, we define the inner margin to the edge of the item with the property padding

We can assign an outer margin to the four sides of the property margin or we can tell an outer margin, in particular, for each side using margin-top, margin-bottom, margin-left or margin-right

De forma análoga, se puede realizar para los márgenes internos utilizando padding-top, padding-bottom, padding-left or padding-right

Una vez difinidos los márgenes externos e internos, podremos configurar la apariencia que tomará el borde

First we will establish the style with the property border-style, la cual admite los valores dotted, dashed, solid or double

También es posible usar valores para crear bordes biselados, pero las guías de estilo modernas desaconsejan su uso por estar “pasados de moda”

In the second place, we are able to customize the width of the stroke with the property border-width and your color with border-color

Properties for lists

Podemos utilizar las siguientes propiedades para manejar elementos lista:
- list-style-type: representa el tipo de marcador que se utilizará en la lista
  Existen estos valores predefinidos:
  - circle
  - square
  - decimal
  - lower-roman
  - upper-roman
  - none
- list-style-position: indica si el marcador se incluirá dentro del texto (propiedad inside) o fuera (propiedad outside), siendo esta última la más habitual
- list-style-image: permite añadir una imagen como marcador
  We may use the values none or url(‘url de la imagen’)
Other properties

Además de las propiedades anteriores vamos a destacar un par más que nos serán de especial utilidad a la hora de dar formato a nuestros elementos:
- visibility: indica si el elemento está visible o no
  Puede tomar uno de los siguientes valores:
  - visible: el elemento está visible
  - hidden: el elemento está no visible
  - collapse: solo podremos usarlo con los elementos de tablas para no visualizar una fila o una columna concreta
- display: cambia el tipo de caja del elemento, puede tener los valores:
  - block
  - inline
  - none

Cookie	Duration	Description
CookieLawInfoConsent	Until the end of the browser session	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Until the end of the browser session	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Until the end of the browser session	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Until the end of the browser session	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Secarcam's Computer Science Web

Lists of CSS declarations

Lists of CSS declarations

Units of measure

Colors

Text properties

color

font-size

font-style

font-weight

text-decoration-line

text-decoration-color

text-decoration-style

text-transform

letter-spacing

word-spacing

line-height

text-align

text-indent

Background properties

Dimensions and edges

Properties for lists

Other properties

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Lists of CSS declarations

Units of measure

Colors

Text properties

color

font-size

font-style

font-weight

text-decoration-line

text-decoration-color

text-decoration-style

text-transform

letter-spacing

word-spacing

line-height

text-align

text-indent

Background properties

Dimensions and edges

Properties for lists

Other properties

Web page of Sergio Cárcamo Garcia dedicated to the computing and related topics such as programming languages, statistics, mathematics, etc

Cookie policy