Lección 2: Sintaxis
Todo estilo posee la siguiente estructura.
selector {
estilo: valor;
}
selector: Indica que parte del documento aplicará el estilo o estilos.estilo: Nombre del estilo.valor: Valor del estilo.
En el siguiente ejemplo cambiamos el tamaño de la tipografía en todos los párrafos.
p {
font-size: 3rem;
}
Se dará el caso de varios valores u otros estilos.
p {
font-size: 3rem;
border: 1px solid black;
}
comentarios
Deben empezar por /* y terminar por */.
/* Estilos de tabla */
table {
/* Añade un margen izquierdo de 2.5rem */
margin-left: 2.5rem;
/* color: pink */
}
Etiqueta <style>
Si deseas incrustar los estilos en el propio documento HTML puedes hacerlo dentro de <head> con la etiqueta <style>.
<head>
<style>
body {
color: yellow;
}
</style>
</head>
Etiqueta <link>
El CSS puede estar vinculado desde un archivo externo. Dentro de <head> usa <link> con la ruta relativa al fichero.
<head>
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
En el siguiente ejemplo podemos ver un caso real de una sencilla web que hace uso de 2 normalizadores.
<head>
<!-- Normalizador normalize.css: Equilibra los estilos entre los Navegadores -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<!-- Tú CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Un normalizador es un conjunto de CSS que modifica los estilos generales para equilibrar el diseño en todos los navegadores evitando discrepancias visuales.
Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.
¿Me ayudas?
No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.
- 1 café: Se mantiene el dominio durante 4 meses.
- 2 cafés: Se liquida 1 mes del Servidor Web.
- 3 cafés: Se paga 1 mes de Newsletter.
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios