Cómo usar CSS con HTML

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 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:green;color:white;padding:10px;"> Hello World</h2>
<p style="text-align: center;"> 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:green;
 color: white;
 padding:10px;    
} 
p {  
 text-align: center;    
} 
</style> 
</head>
        
<body>
 <h2>Hola Mundo</h2>
 <p>Aprende a programmar! </hp>
</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! </hp>
</body>
</html>
estilo.css
h2 {  
 background-color:green;
 color:blanco;
 padding:10px;    
} 
p {  
 text-align:center;    
} 
Resultado:

Hola Mundo

Aprende a programmar!