LEARN BASIC CSS - Building a Cafe Menu
* HTML define la forma y estructura de una página web, mientras que el CSS es un lenguaje que funciona a través de hojas de diseño, que decide la apariencia visual a través de estilos.
VIDEO INTRODUCTORIO A CSS: Cascading Style Sheets
https://www.youtube.com/watch?v=aNEOu7de_FQ
CURSO CSS:
https://www.freecodecamp.org/learn/
ETIQUETAS DEL CURSO:
LANG atribute (etiqueta para Lenguaje)
<p lang="fr">Ceci est un paragraphe.</p>
SIMPLE HTML DOCUMENT: (html, head, title, body)
<!DOCTYPE html>
<html lang="en">
<head> <title>Title of the document</title>
<style> h1 {color:red;} p {color:blue;} h1 { text-align: center; }</style> </head>
<body>
<style>
<body>
<main>
<section> <h1>This is SECTION1</h1> </section>
<section> <p>This is SECTION2.</p> </section>
</main>
</body>
</html>
META element is self-closing
<meta charset="UTF-8">
<style>
h1 { text-align: center; }
h2 { text-align: center; }
p { text-align: center; }
</style>
SELECTORS: In CSS, selectors are patterns used to select the element(s) you want to style.
Click a selector to see which element(s) that gets selected in the result:
style.css:
h1, h2, p { text-align: center; }
REL attribute: Import an external stylesheet:
<link rel="stylesheet" href="styles.css">
meta element (to look similar on mobile as it does on a desktop or laptop)body {background-color: coral;}
The
<div> tag defines a division or a section in an HTML document.------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cafe Menu</title>
<link href="styles.css" rel="stylesheet"/>
</head>
<body>
<div id="menu">
<main>
<h1>CAMPER CAFE</h1>
<p>Est. 2020</p>
<section>
<h2>Coffee</h2>
</section>
</main>
</div>
</body>
</html>
------------------------------
COMMENT lines in CSS file: /* commands */
Comentar una linea en CSS la deshabilita.
div {
position: absolute;
height: 80%;
width: 80%;
top: 10%;
left: 10%;
background-color: #FFCC00;
}A class selector is defined by a name with a dot directly in front of it
.class-name { styles}
Add a CLASS:
<div class="myDiv">
Comentarios
Publicar un comentario