Skip to content

Commit 0a26a4e

Browse files
fdejesusmazzonifdejesusmazzoni
authored
Merge pull request #526 from Lemoncode/#524-layout-css_basics
#524 layout css basics
2 parents 2b48f92 + 43cc9e9 commit 0a26a4e

File tree

47 files changed

+1231
-2210
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+1231
-2210
lines changed

‎01-layout/01-css-fundamentals/00-basics/README.md

+128
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
# Basics
2+
3+
Tenemos la posibilidad de hacer estos ejercicios de dos formas:
4+
5+
- Con Codesandbox: <https://codesandbox.io/>
6+
- En local descargando el Visual Code. <https://code.visualstudio.com/>
7+
8+
Con visual Code:
9+
10+
- Creamos una carpeta "Layout"
11+
- Abrimos en Visual Code desde esa Carpeta
12+
- Creamos un fichero "index.html"
13+
- Usamos la plantilla html5 para crear el esquelo de la web
14+
15+
```diff
16+
<body>
17+
+ <h1>Welcome to CSS</h1>
18+
+ <h2>Basic example</h2>
19+
</body>
20+
```
21+
22+
Vamos a añadir estilos inline:
23+
24+
```diff
25+
- <body>
26+
+ <body style="background-color: brown">
27+
<h1>Welcome to CSS</h1>
28+
<h2>Basic example</h2>
29+
```
30+
31+
Vamos a hacer lo mismo con los h1 y h2
32+
33+
```diff
34+
- <h1>Welcome to CSS</h1>
35+
+ <h1 style="color: white">Welcome to CSS</h1>
36+
- <h2>Basic example</h2>
37+
+ <h2 style="color: white">Basic example</h2>
38+
```
39+
40+
Es la mejor solucione para el problema? Que opinais?
41+
42+
- Esta acoplada.
43+
- Problema de ir copiando y pegando la solucion.
44+
- ...
45+
46+
Vamos a desacoplar los estilos en un primer paso:
47+
48+
```diff
49+
<head>
50+
<title>Parcel Sandbox</title>
51+
<meta charset="UTF-8" />
52+
+ <style>
53+
+ body {
54+
+ background-color: brown
55+
+ }
56+
+ h1 {
57+
+ color: white
58+
+ }
59+
+ h2 {
60+
+ color: white
61+
+ }
62+
+ </style>
63+
</head>
64+
```
65+
66+
Y eliminamos los estilos inline:
67+
68+
```diff
69+
- <body style="background-color: brown;">
70+
+ <body>
71+
- <h1 style="color: white;">Welcome to CSS</h1>
72+
+ <h1>Welcome to CSS</h1>
73+
- <h2 style="color: white;">Basic example</h2>
74+
+ <h2>Basic example</h2>
75+
```
76+
77+
Bueno y ahora que pensais de esta aproximacion?
78+
79+
- No puedo aplicar los estilos a otras paginas.
80+
- No se puede descargar el fichero de forma asincrona.
81+
- No puedo organizarlo en diferente carpetas o subcarpetas
82+
83+
Antes de eliminarlo vamos a ver como se aplica una regla a diferentes elementos:
84+
85+
```diff
86+
- h1 {
87+
- color: white
88+
- }
89+
- h2 {
90+
- color: white
91+
- }
92+
+ h1, h2 {
93+
+ color: white
94+
+ }
95+
```
96+
97+
Vamos a crear un nuevo fichero y añadimos los estilos que hemos creado
98+
99+
_./mystyle.css_
100+
101+
```css
102+
body {
103+
background-color: brown;
104+
}
105+
h1,
106+
h2 {
107+
color: white;
108+
}
109+
```
110+
111+
Y lo referenciamos desde la pagina:
112+
113+
```diff
114+
<head>
115+
<title>Parcel Sandbox</title>
116+
<meta charset="UTF-8" />
117+
- <style>
118+
- body {
119+
- background-color: brown;
120+
- }
121+
- h1,
122+
- h2 {
123+
- color: white;
124+
- }
125+
- </style>
126+
+ <link rel="stylesheet" type="text/css" href="./mystyle.css"/>
127+
</head>
128+
```

‎01-layout/01-css-fundamentals/01-simple-selectors/README.md

+73-60
Original file line numberDiff line numberDiff line change
@@ -1,93 +1,106 @@
1-
# Module 1 - Layout
2-
31
# Simple Selectors
42

5-
## Steps:
3+
Vamos a jugar con los selectores simples.
64

7-
### 1. Create a basic HTML
5+
Vamos a añadir tres elementos nuevos:
86

9-
```html
10-
<body>
11-
<h1>Heading 1</h1>
12-
<h2>Heading 2</h2>
13-
<div>A div</div>
14-
<p>A paragraph</p>
15-
<div>
16-
<p>A paragraph inside a div</p>
17-
</div>
18-
<p id="content">A paragraph hit by id selector</p>
19-
<p class="quotation">A paragraph hit by class</p>
20-
<a href="#">I am a link!!!</a>
21-
</body>
7+
```diff
8+
<body>
9+
+ <div id="app">
10+
<h1>Welcome to CSS</h1>
11+
<h2>Basic example</h2>
12+
+ <div class="title">Hey I'm a title</div>
13+
+ <div id="myid">Hello from id myid</div>
14+
+ </div>
15+
</body>
2216
```
2317

24-
#### Note: For demos we will use an online font: @import 'https://fonts.googleapis.com/css?family=Raleway';
18+
Vamos a darle estilos a los div.
2519

26-
### 2. We can select elments by tag name.
20+
Podriamos estar tentados a darle el estilo al elemento _div_ pero que pasa? Vamos a probarlo:
2721

28-
```css
22+
```diff
2923
body {
30-
font-size: 80%;
31-
font-family: "Raleway", sans-serif;
32-
background-color: yellowgreen;
24+
background-color: brown;
3325
}
34-
35-
a {
36-
text-decoration: none;
37-
color: black;
38-
background-color: rgba(255, 0, 0, 0.5);
26+
h1,
27+
h2 {
28+
color: white;
3929
}
30+
+div {
31+
+ background-color: blue;
32+
+}
4033
```
4134

42-
### 3. Another important feature is the use of pseudo clases. A pseudo class defines a state of a HTML element. For example we can have an anchor (a tag) when user clicks on anchor the state of the anchor changes to visited. We can target such pseudo classes in CSS (:hover, :focus)
35+
Vamos a cambiar el estilo a uno basado en clases:
4336

44-
```css
45-
a:hover {
37+
```diff
38+
body {
39+
background-color: brown;
40+
}
41+
h1,
42+
h2 {
4643
color: white;
4744
}
45+
-div {
46+
- background-color: blue;
47+
-}
48+
49+
+ .title {
50+
+ color: blue;
51+
+ font-size: 500%;
52+
+ }
4853
```
4954

50-
### 4. We can target multiple elements using the ',' separator. In this case we are using just simple tag elements selectors, but we can use other kind of selectors here.
55+
Y ahora le aplicamos estilo al elemento con Id _myId_
5156

52-
```css
53-
h1,
54-
h2 {
55-
background-color: yellow;
57+
```diff
58+
.title {
59+
color: blue;
60+
font-size: 500%;
5661
}
62+
+ #myid {
63+
+ margin: 25px;
64+
+ }
5765
```
5866

59-
> NOTE ### 5. Just for introduce the concept, here we can think that p rule overrides div style rule.
67+
Podemos ver que cada div tiene su propio estilo.
6068

61-
### 5. The selector rule gets applied even when the HTML element it's nested inside another HTML element. There is more going on here but we will discuss it later.
69+
Que limitacion tenemos con aplicar los estilos por ID?
6270

63-
```html
64-
<div>
65-
<p>A paragraph inside a div</p>
66-
</div>
67-
```
71+
- En teoria, de esta forma solo podemos usar una vez pero con la clase podemos usar varias veces.
6872

69-
```css
70-
div {
71-
background-color: red;
72-
}
73+
Podemos aplicar _class_ _title_ al elemento _h1_?
7374

74-
p {
75-
background-color: aqua;
76-
}
75+
```diff
76+
<body>
77+
<div id="app">
78+
- <h1>Welcome to CSS</h1>
79+
+ <h1 class="title">Welcome to CSS</h1>
80+
<h2>Basic example</h2>
81+
<div class="title">Hey I'm a title</div>
7782
```
7883

79-
### 6. Another simple selector is the id selector
84+
Ahora tenemos conflictos:
8085

81-
```css
82-
#content {
83-
background-color: green;
84-
}
85-
```
86+
- Tenemos un selector para _h1_ donde establece el color de la fuente a blanco.
87+
- Tenemos una clase que establece el color de la fuente a azul.
88+
89+
Que pasa si le añadimos al selector _h1_ la propiedad _background-color: yellow_.
90+
91+
Tenemos que por un lado hay conflicto y por otro se mezclan estilos, eso es en esencia el Cascading Style Sheets:
8692

87-
### 7. And for last the class selector
93+
- Primero se aplica los estilos del selector _h1_.
94+
- Y luego se aplica el estilo de la clase (sobreescribiendo las propiedas con conflictos)
8895

89-
```css
90-
.quotation {
91-
background-color: blueviolet;
96+
En este caso para evitar el conflicto se podría hacer mas especifico el selector. Podemos aplicar la regla solo a los elementos div con esa clase especifica.
97+
98+
```diff
99+
- .title {
100+
+ div.title {
101+
color: blue;
102+
font-size: 500%;
92103
}
93104
```
105+
106+
Al hacer esto se esta indicnado que todos los div que contengan la clase _title_ usaran esta regla. Podemo ver que se aplica al _div_, pero no al _h1_

‎01-layout/01-css-fundamentals/01-simple-selectors/index.html

-21
This file was deleted.

‎01-layout/01-css-fundamentals/01-simple-selectors/style.css

-36
This file was deleted.

0 commit comments

Comments
 (0)