coding180 icon
Coding180
CSS properties: their values

CSS properties: their values

Home > Tutorials > CSS > CSS Introduction


At this point you will surely have assimilated the basic key concepts of the CSS language.
Let's go, now, to explore its properties.

The CSS properties are nothing more than those characteristics to which we are going to assign values ​​that will define the concrete style of our HTML elements.
We already covered this when we told you about the CSS syntax. Do you remember what a statement is? Exactly! A property-value pair.
Let's refresh your memory with this example:
 

selector {
property: value;
}


The values ​​to assign to CSS properties are diverse and numerous. To facilitate learning, we will divide them into macro-categories.

Colors
The values ​​you can give to the "color" property in the CSS language can be expressed in different ways:

  • the css property "color:" + the name of the color
    example:
     
    h1 {
       color: red;
    }
  • the css property “color:” + hexadecimal value
    example:
     
    h1 {
       color: #ff0000;
    }
  • the css property “color:” + hexadecimal value with transparency that is applied by adding two digits ranging from 00 (completely transparent) to ff (completely opaque) to the hexadecimal
    example:
     
    h1 {
       color: #ff000088;
    }
  • the css property "color:" + rgb value (values ​​range from 0 to 255 and must be separated by a comma)
    example:
     
    h1 {
       color: rgb(255,0,0);
    }

     

  • the css property "color:" + rgba value (the value "a" gives transparency, which goes from 0 - completely transparent - to 1 - completely opaque -)
    example:
     
    h1 {
       color: rgba(255,0,0,0.5);
    }

     


Keywords
A value type composed of keywords that are specific to a given property.
It would be impossible to list them all, we will see them as we explore the CSS properties.


Text strings
An optimal example to understand a value expressed through text strings is that of the value attributed to the font-family property in our CSS document.
The aforementioned property allows us to indicate to our web page which font to use.
Let's see the syntax:
 

* { 
    font-family: ‘Montserrat’, sans-serif;
}



The text string, in this case, is the name of the font, ie the 'Montserrat'.
Sans serif, below, is instead a keyword of the font-family property.
It indicates that, if the link to the Montserrat font is missing, the font to be used would be the sans-serif (therefore a sans-serif font) by default of the browser used.
 

Whole numbers
or with commas, it may not immediately occur to you the usefulness of a value expressed in numbers without a unit of measure.
A concrete example could be the value to be assigned to the z-index property, a property that allows us to establish which element of our web page will be in the foreground and which will go behind.

Imagine that you have two elements to which you have assigned a different z-index property value.
You have assigned element 1 a z-index of “10”, element 2 a z-index of “11”.
Item 1 will be placed behind item 2.


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel