2.
Sintaxis básica de CSS
La estructura de CSS es:
selector {
propiedad: valor;
}
Ejemplo
h1 {
color: red;
}
Significa:
h1 → selector
color → propiedad
red → valor
3. Formas de usar CSS
Existen 3 maneras.
3.1 CSS en línea
Se usa dentro de una etiqueta HTML.
Ejemplo
<p style="color:red;">Texto rojo</p>
Ventajas
Fácil
Rápido
Desventajas
Desordenado
Difícil de mantener
3.2 CSS interno
Se coloca dentro de la etiqueta <style>.
Ejemplo
<html>
<head>
<style>
h1{
color:blue;
}
p{
font-size:20px;
}
</style>
</head>
<body>
<h1>Título</h1>
<p>Párrafo</p>
</body>
</html>
3.3 CSS externo
Se guarda en un archivo separado .css.
Archivo HTML
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Hola</h1>
</body>
</html>
Archivo [Link]
h1{
color:green;
}
Ventajas
Más profesional
Reutilizable
Ordenado
4. Selectores CSS
Los selectores indican qué elemento modificar.
4.1 Selector por etiqueta
p{
color:blue;
}
Afecta todos los párrafos.
4.2 Selector por ID
Se usa #.
HTML
<h1 id="titulo">Hola</h1>
CSS
#titulo{
color:red;
}
El ID debe ser único.
4.3 Selector por clase
Se usa .
HTML
<p class="texto">Hola</p>
CSS
.texto{
color:green;
}
La clase puede repetirse.
5. Propiedades más usadas
5.1 Color de texto color: #FFFFFF;
5.2 Color de fondo background-color:red;
5.3 Tamaño de letra font-size:20px;
5.4 Tipo de letra font-family:Arial;
5.5 Centrar texto text-align:left;
5.6 Bordes border:2px solid black;
5.7 Ancho y alto width:300%; height:200%;
5.8 Márgenes Espacio externo. margin:20px;
5.9 Padding
PADDING
Espacio interno.
padding:20px;
6. Ejemplo completo
<!DOCTYPE html>
<html>
<head>
<title>Pagina 1 CSS en linea</title>
</head>
<body style="background:lightgray;">
<h1 style="color:blue; text-align:center;">
Bienvenidos </h1>
<p style="font-size:20px; color:red;">
Este es un parrafo con estilos CSS.</p>
<img src="[Link]" style ="width:300px;
height:200px; border:3px solid black;">
<br><br>
<a href=[Link]
style ="color:green; font-size:25px;">
Ir a Google</a>
<br><br>
<button style ="background:blue;color:white;
border:none; padding:10px; border-
radius:10px; ">Guardar</button>
</body>
</html>
Ejercicio 2 CSS
Crear una página web utilizando únicamente CSS en línea (style="") y las siguientes etiquetas
HTML:
h1
p
img
a
button
La página debe cumplir con las siguientes características:
Requisitos
ETIQUETAS ATRIBUTOS TEXTO
1. Fondo de la Color celeste claro
página
2. Título (h1) Texto centrado MI PRIMERA PAGINA WEB
Color azul CON CSS
Tamaño grande 30 px
3. Párrafo (p) Color negro Estoy aprendiendo
Tamaño 20px HTML y CSS en linea.
4. Imagen Ancho: 300px
(img) Alto: 200px
Borde negro de 3px
5. Enlace (a) Color verde Visitar Google
Tamaño 25px
6. Botón Fondo rojo ENVIAR
(button) Texto blanco
Bordes redondeados
Espaciado interno 10
px
<!DOCTYPE html>
<html>
<head>
<title>Tarjeta de presentacion</title>
</head>
<body style ="background-color: lightgray;">
<div style="
width: 400px;
background-color: white;
border-radius: 20px;
padding: 20px;
margin: auto;
text-align: center;
">
<img src="[Link]"
style ="
width: 150px;
height: 150px;
border-radius: 100%;
">
<h1 style ="
font-size: 30px;
font-weight: bold;
"> Juan Perez
</h1>
<p style ="font-size: 18px;">
Sistemas Informaticos
</p>
<p style ="font-size: 18px;">
juan@[Link]
</p>
<button style ="
background-color: green;
color: white;
border: none;
padding: 10px;
width: 150px;
border-radius: 10px;
">
Contactar
</button>
</div>
</body>
</html>
Hojas de Estilo en HTML (CSS)
Las hojas de estilo permiten dar diseño y formato a una página web.
Con CSS se puede cambiar:
Colores
Tamaños
Márgenes
Bordes
Posición
Fuentes
Fondos
Diseño de tablas
Distribución de elementos
CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada).
1. ¿Para qué sirve CSS?
HTML crea la estructura:
títulos
párrafos
tablas
imágenes
CSS se encarga del diseño visual.
Ejemplo sin CSS
<html>
<head>
<title>HOJAS DE ESTILO</title>
</head>
<body>
<h1>Bienvenido</h1>
<p>Mi primera página web</p>
</body>
</html>
Resultado:
Texto simple
Sin colores
Sin diseño
Ejemplo con CSS
<html>
<head>
<title>HOJAS DE ESTILO</title>
</head>
<body>
<h1 style="color:blue;">Bienvenido</h1>
<p style="font-size:20px;">Mi primera página
web</p>
</body>
</html>
Resultado:
Título azul
Texto grande