HTML & CSS
¿Qué es HTML?
Un lenguaje que nos permite indicarle al navegador cuál es el significado de cada una de las partes del documento.
encabezado principal
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, quos laudantium dolor illo assumenda veritatis ab doloremque laboriosam! Aut, commodi, sed quibusdam explicabo nemo autem molestias earum non fugit facilis natus et doloribus nulla eos dolor ipsa! Laborum facere itsum voluptate adipisci rem, incidunt vero nobis exercitationem eum cumque fuga magni dolores consectetur sapiente ducimus recusandae sit asperiores possimus odit ut suscipit quis in? Necessitatibus, laudantium.
- Lorem, ipsum dolor.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio voluptates corrupti enim eveniet voluptatem praesentium iusto officia repudiandae cum asperiores, quod voluptas consequatur inventore, modi est necessitatibus ab quibusdam quis error sequi expedita dolores quasi nobis numquam. Aliquid, ab amet?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam blanditiis tempora voluptas aliquid iusto soluta amet laborum incidunt unde quia!
lista sin orden particular
encabezado secundario
parrafo
link
texto importante
cita
¿Qué es CSS?
Un lenguaje que nos permite indicarle al navegador cómo se ven (estilos) cada uno de los elementos del documento.
Fuente Arial, azul oscuro y negrita
Lorem ipsum dolor sit.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet, quos laudantium dolor illo assumenda veritatis ab doloremque laboriosam! Aut, commodi, sed quibusdam explicabo nemo autem molestias earum non fugit facilis natus et doloribus nulla eos dolor ipsa! Laborum facere itsum voluptate adipisci rem, incidunt vero nobis exercitationem eum cumque fuga magni dolores consectetur sapiente ducimus recusandae sit asperiores possimus odit ut suscipit quis in? Necessitatibus, laudantium.
- Lorem, ipsum dolor.
- Lorem ipsum dolor sit.
- Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Distinctio voluptates corrupti enim eveniet voluptatem praesentium iusto officia repudiandae cum asperiores, quod voluptas consequatur inventore, modi est necessitatibus ab quibusdam quis error sequi expedita dolores quasi nobis numquam. Aliquid, ab amet?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam blanditiis tempora voluptas aliquid iusto soluta amet laborum incidunt unde quia!
elementos de la lista mas espaciados
link color rosado
texto en mayusculas
fondo gris claro
HTML
HTML Elements
The building blocks of HTML documents are HTML elements
<tag attribute="value">content</tag>element
open tag
close tag
content
tag attribute (could be 0, 1 or more)
(could be text or other elements)
tag name
HTML Document
Text file compose of HTML elements.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!--Here comes the content-->
</body>
</html>
HTML 5 👌
html
body
head
title
meta
You can represent the HTML document as a tree of HTML elements
Data about the document itself
Visible to the end user
Headings
The <h1> to <h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.
block element
Paragraph
The <p> element represents a paragraph.
block element
Lists
The <li> element is used to represent an item in a list. It must be contained in a parent element: an ordered list (<ol>), an unordered list (<ul>)
block element
Links (anchors)
The <a> element, with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address.
inline element
Relative and Absolute paths
Absolute: Always send you to the same place no matter where you are right now
inline element
https://my-blog.com/week20/articles.hmtl
<a href="http://www.google.com">...</a>
You are in:
You click:
You go to:
http://www.google.com
https://my-blog.com/week20/articles
<a href="/contact.html">...</a>
You are in:
You click:
You go to:
https://my-blog.com/contact.html
/ represents the root of the current domain
Relative and Absolute paths
Relative: Your destination is based on where you are right now
https://my-blog.com/week20/articles
<a href="./article-20.html">...</a>
You are in:
You click on:
You go to:
https://my-blog.com/week20/articles/article-20.html
<a href="article-20.html">...</a>
or
https://my-blog.com/week20/articles
<a href="../comments/comment-10.html">...</a>
You are in:
You click on:
You go to:
https://my-blog.com/week20/comments/comment-10.html
./ represents the current directory
../ represents the parent directory
Block vs Inline elements
Block elements (h1..h6, p, ul, ol, li...) fill all the horizontal space available. So next elements have no other choice to go to the next line.
Inline elements (a, strong, em...) only occupy the width of their content so the next elements can go on the same line if they have enough space.
In this example the color of the element's content has been set to blue (block) and purple (inline)
Strong and Emphasis
The <em> element marks text that has stress emphasis.
The <strong> element indicates that its contents have strong importance, seriousness, or urgency.
Images
The <img> element embeds an image into the document. It supports JPEG, PNG, SVG, GIF, WebP and AVIF. <img> is inline but <figure> is a block element.
CSS
CSS Declarations
A key-value pair of a CSS property and its value. Both separated by a colon and finished by a semi-colon.
css-property: value;Some examples:
color: blue;
font-family: Arial;
font-size: 16px;
background-color: gray;Change the text color
Change the text font
Change the text size
Change the background color
How to apply declarations
Directly on the style attribute on a specific HTML element
<h1>This is the main title</h1>
<p style="color: red; font-family: Arial;">This is a paragraph</p>
<p style="color: red; font-family: Arial;">This is another paragraph</p>
This is the main title
This is a paragraph
This is another paragraph
To apply the same style to both paragraph we are duplicating code. 😢
Create and include CSS Rules
To apply the rules, you can include them inside the a style element inside the html head.
body
h1
p
p
<head>
<style>
p {
color: red;
font-family: Arial;
}
</style>
</head>
<body>
<h1>This is the main title</h1>
<p>This is a paragraph</p>
<p>This is a another paragraph</p>
</body>This is the main title
This is a paragraph
This is another paragraph
selector {
property: value;
other-property: other-value;
}The selector defines to which element the declarations will be applied
Create and include CSS Rules
Better yet, create an external file and link it inside the document head element. Separation of concerns applied! 😎
body
h1
p
p
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is the main title</h1>
<p>This is a paragraph</p>
<p>This is a another paragraph</p>
</body>This is the main title
This is a paragraph
This is another paragraph
p {
color: red;
font-family: Arial;
}style.css
index.html
CSS Selectors
<!-- Selector by tag -->
p {
color: red;
}
<!-- Selector by class -->
.completed {
color: grey;
}
<!-- Selector by id -->
#lorem {
color: blue;
}
<!-- Combining selectors -->
.container p {
color: red;
}body
.container
p
p
p
p
CSS Selectors
The Box Model
...
The Box Model properties
margin collapsing
Cascade, specificity, and inheritance
...
Typography properties
...
Different way to define colors
...
Values and units
...
Mobile first
...
html-css-fundamentals
By Codeable
