Selector básicos y Sintaxis CSS

CSS tiene su propia terminología para escribir el lenguaje.

Regla CSS:

Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ( { ), otra parte denominada "declaración" que inclue la "propiedad" y el "valor" y por último, un símbolo de "llave de cierre" ( } )

Selector:

Es la declaración del HTML elemento.

Propiedad:

La propiedad css que se está utilizando se ingresará en la sección de propiedades

Valor:

El color verde y center es el valor, el valor será diferente dependiendo en la propiedad CSS que utilice.

Brackets: {}

Es muy importante ingresar siempre las brackets después de ingresar el elemento selector / nombre de id / nombre de clase. Sin las brackets el css no funcionará.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h1 { color: green; } 
</style> 
</head>
          
<body>
  <h2>Ejemplo usando el selector css </h2>
</body>
</html>
Resultado:

Ejemplo usando el selector css


El clase selector

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
.ejemplo {  
 color: green;
 text-align: center;    
} 
</style> 
</head>
        
<body>
 <h2 class="ejemplo">Ejemplo usando el clase selector</h2>
</body>
</html>
Resultado:

Ejemplo usando el clase selector


El id selector

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
#titulo {  
 color green;
 text-align: center;    
} 
</style> 
</head>
        
<body>
 <h2 id="titulo">Ejemplo usando el id selector</h2>
</body>
</html>
Resultado:

Ejemplo usando el id selector