Cómo usar CSS

Introducción al como usar CSS con HTML

  • CSS significa "Cascading Style Sheets".
  • CSS se utiliza para el estilo de elementos HTML.

Hay 3 formas de agregar css a tu proyecto html

  • en linea estilo
  • Interno
  • Externo

En linea CSS

En linea estilo - usando el attributo <style> en tus elementos HTML, como lo hemos hecho en una lección anterior.

Ejemplo
<h2 style="background-color: verde;color:blanco;padding:10px;">Hello World</h2>
<p style="text-align: centrar;">Aprende a programmar!</p>
Resultado:

Hola Mundo

Aprende a programmar!


Interno CSS

Interno - se utiliza un CSS interno para definir un estilo para una sola página HTML.

Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
h2 {  
 background-color: verde;
 color:blanco;
 padding: 10px;    
} 
p {  
 text-align: centrar;    
} 
</style> 
</head>
        
<body>
 <h2>Hola Mundo</h2>
 <p>Aprende a programmar!</p>
</body>
</html>
Resultado:

Hola Mundo

Aprende a programmar!


Externo CSS

Ejemplo
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="estilo.css">
</head>
        
<body>
 <h2>Hola Mundo</h2>
 <p>Aprende a programmar!</p>
</body>
</html>
estilo.css
h2 {  
 background-color: verde;
 color:blanco;
 padding: 10px;    
} 
p {  
 text-align: centrar;    
} 
Resultado:

Hola Mundo

Aprende a programmar!