TIPS | HTML5, CSS3 Y BOOTSTRAP

border
border: tipo tamaño color
border: solid 5px yellow

Para ver todos los colores a aplicar por letra u otras propiedades
En el inspector, click en la flecha (parte superior derecha del inspector) y se selecciona el objeto, a
la derecha aparecen sus propiedades, se hace click en el color y al colocar una letra se iran
mostrando los colores correspondientes a la misma:

NOTA: Lo que se cambia en el Inspector no modifica el archivo original.

Colores hexadecimales
#000000 Esta es la sintaxis y muestra lo siguiente:
#00 Los primeros pares corresponden al Rojo
00 Los segundos pares corresponden a Verde
00 Los terceros pares corresponden a Azul

Para consultar paleta de colores hexadecimal:

http://html-color-codes.info/codigos-de-colores-hexadecimales

Con transparencia:
background:rgba(180,0,70,.5); || Rojo, Verde, Azul, Transparencia
Se recomienda formatear los valores que viene por defecto en las hojas de estilo
*{
margin:0;
padding:0;
list-style:none;
}

NOTA: * es el selector universal. Modifica toda la página. Por defecto los textos vienen en 16px.

Para centrar una caja principal en cuanto a posición es:

position: relative;

NOTA: Esto ya tiene un valor importante en cuanto a sus márgenes. Las cajas principales siempre
son relative.

Y si queremos centrar esa caja le colocamos:

margin: auto;

NOTA: Esto ubica la caja en la parte central y superior de la página.

Margen con los cuatro valores:

margin: top right bottom left;

Margen con dos valores:

margin: vertical horizontal;

Se puede poner asi

margin: 20px auto; || Es decir, 20px en la parte superior e inferior

Margen con un solo valor:

margin: 20px;

NOTA: Esto proporciona un margen de 20px alrededor de la caja.

Margen en un solo lado:

margin: 0px 0px 0px 20px;

NOTA: Se está dando margen de 20px sólo a la parte izquierda.

Margenes según necesidad:
margin-left: Margen izquierdo
margin-right: Margen derecho
margin-top: Margen superior
margin-bottom: Margen inferior

Las cajas internas deben ser absolute:

position: absolute;

NOTA: Es asi porque esta propiedad nos va a permitir colocar una caja interna dentro de una caja
principal. Por defecto viene top y left en 0 y por ello todo lo que coloquemos se ira a la parte
superior izquierda.

Al estar en position absolute se pueden manejar los márgenes con las propiedades:
top: 0;
left: 0;
bottom: 0;
right: 0;

Si por ejemplo dejamos estas dos:

top: 0;
right: 0;
La caja se ubicará en la parte superior derecha dentro de la caja principal que la contiene.

NOTA: No pueden estar top y bottom juntos pues es el mismo eje, al igual que left y right.
Ejemplo:

Por ejemplo, teniendo estos 3 círculos se haría así:

.redes{
position:absolute; || Para que permanezca dentro de la caja padre
width:42px; || Ancho igual a alto
height:42px; || Alto igual a ancho
background:#ccc; || Fondo
border-radius:100%; || Borde totalmente redondo
}

#icono1{
top:42px;
right:120px; || Margen respecto al borde derecho de la página
}

#icono2{
top:42px;
right:71px; || Margen respecto al borde derecho de la página
}

#icono3{
top:42px;
right:19px; || Margen respecto al borde derecho de la página
}
float
Esta propiedad cambia la orientación de por ejemplo un listado como este:
<nav>
<ul>
<li class="botones"></li>
<li class="botones"></li>
<li class="botones"></li>
<li class="botones"></li>
<li class="botones"></li>
</ul>
</nav>

Es decir, todo se vería hacia abajo que en el caso de esta barra de navegación de 5 botones no se
veria:

Por ello se le coloca float: left; en css

.botones{
float:left;
width:196px;
margin:0px 2px;
height:48px;
background:#333;
}

Es decir, la lista inicia de IZQUIERDA a DERECHA. Con esto cambiamos un listado que este en
posición vertical a horizontal.

Para vincular tipografías de Google:

<link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet'
type='text/css'>
line-height
Para alinear en la mitad del valor dado verticalmente. Por ejemplo:
#logo{
position:absolute;
top:30px;
left:30px;
width:200px;
height:60px;
font-family: 'Kaushan Script', cursive;
font-size:50px;
text-align:center;
line-height:60px;
}

text-align es para alineación horizontal.

En este caso, line-height al ser 60px, se esta alineando el texto en 30px. Esto también debibo a que
el alto de la caja es de 60px como se puede observar en height.

Rutas en css
Por ejemplo:

Para llamar a la imagen se hace así:

article p img{
float:left;
margin-right:20px;
}

Primero el article, luego el p y finalmente la img.

Para llamar un objeto desde el atributo type
aside#der input[type="text"]{
background:url(usuario.png); || Icono usuario dentro del input
background-repeat:no-repeat; || Para que no se repita en todo el input
background-position:right; || Que se desplace a la derecha
background-size:contain; || Para que la imagen se ajuste al contenedor
}

Pseudoclases
<nav>
<ul>
<a href="#"><li class="botones">Botón 1</li></a>
<a href="#"><li class="botones">Botón 2</li></a>
<a href="#"><li class="botones">Botón 3</li></a>
<a href="#"><li class="botones">Botón 4</li></a>
<a href="#"><li class="botones">Botón 5</li></a>
</ul>
</nav>

Por ejemplo, para que cuando se pase el cursor por encima de un botón suceda algo se coloca:
a .botones:hover{
background:rgba(100,0,255,.4);
}

O cuando se de click:
a .botones:active{
background:rgba(255,0,100,1);
}

position: fixed;
Por ejemplo para colocar un chat:

Colocamos estas propiedades css

fixed pega una caja a la pantalla.
Para que quede abajo se coloca bottom 0 y right 20px
z-index para manipular las cajas en ejes de profundidad. Por defecto todas vienen en cero.
En border-radius se coloco sólo en la esquina superior izquierda y derecha.

Bootstrap | Instalación
Se descargan los archivos fuente en la página oficial:

Se instala Koala que es un compilador Sass.

Se arrastra la carpeta scss de los archivos que descargamos en Bootstrap.
Click derecho en bootstrap.scss y Establecer ruta de salida.
La ruta será la carpeta css de nuestro proyecto.
Se llama al archivo como se desee, en este caso Bootstrap.css
Luego click bootstrap.scss y en la parte inferior derecha click en compilar.
Si da error UTF-8 verificar que los nombres de carpetas no tengan caracteres especiales.
Para cargar Bootstrap en nuestro proyecto en vez de llamarlo en línea (Ya que tenemos los
archivos fuente):
<link rel="stylesheet" href="css/bootstrap.css">

Para cargar los js de Bootstrap y JQuey en vez de llamarlo en línea (Ya que tenemos los archivos
fuente):
Para JQuery se copia el archivo en la ruta C:\Users\Asus\Documents\Robert\Recursos\Bootstrap -
Fuente\bootstrap-4.5.0\site\docs\4.5\assets\js\vendor y lo pegamos en la carpeta js de nuestro
proyecto. Luego en nuestro index.html colocamos los siguiente:
<script src="js/jquery.slim.min.js"></script>

Para el js de Bootstrap se copia el archivo en la ruta

C:\Users\Asus\Documents\Robert\Recursos\Bootstrap - Fuente\bootstrap-4.5.0\dist\js y lo
pegamos en la carpeta js de nuestro proyecto. Luego en nuestro index.html colocamos los
siguiente:
<script src="js/bootstrap.min.js"></script>

Se instala una fuente desde Font Awesome para tener iconos disponibles.
En la página oficial se descargan los archivos fuente.
Se copian todos los archivos de la ruta C:\Users\Asus\Documents\Robert\Recursos\Font
Awesome\fontawesome-free-5.14.0-web\webfonts y se pegan en la carpeta fonts de nuestro
proyecto.
Se copia el archivo de estilos Font-awesome.min.css que contiene los estilos en
C:\Users\Asus\Documents\Robert\Recursos\Font Awesome\fontawesome-free-5.14.0-web\css y
se pega en la carpeta css de nuestro proyecto.
Luego le llamamos desde nuestro index.html así:
<link rel="stylesheet" href="css/fontawesome.min.css">
NOTA: Así no lo pude hacer funcionar…

CAMBIO DE CURSO…

TUTORIAL BOOTSTRAP…

1. INTRODUCCIÓN - 0:10
- Que es bootstrap y para que sirve
- Novedades estructurales
- Requisitos
Se crea estructura HTML en SublimeText (html:5 + TAB).
2. INSTALACIÓN - 02:12
- Descargar e instalar bootstrap
- Creación de directorios
- Descarga procesador de codigo
- Encabezado html 5
- Llamado de javascript
Se descargan archivos acá:

Esto proporciona dos carpetas: css y js… las mismas se copian a la raíz del proyecto y se incluye
una carpeta images de una vez para las practicas.

JQuery, en la misma página se copia: https://code.jquery.com/jquery-3.5.1.slim.min.js, se pega en

el navegador. Luego CTRL+S y se guarda en la carpeta js del proyecto con el mismo nombre que
dicho archivo genera.

Popper, en la misma página se copia:

https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js, se pega en el navegador.
Luego CTRL+S y se guarda en la carpeta js del proyecto con el mismo nombre que dicho archivo
genera.

3. FLEXBOX Y SISTEMA DE REGILLA - 17:11

- containe
- container-fluid
- row
- col
- col-xs
- col-sm
- col-md
 - col-lg
- col-xl
COL (XS) (< 575) Celular
SM (576 - 767) Celular
MD (768 - 991) Smartphone + Tablet
LG (992 - 1199) Tablet + Monitor
XL (1200 >) Monitor

NOTA IMPORTANTE
Si por ejemplo colocamos esto:
<div class="col-xl-5 col-lg-5 col-md-5 col-sm-12 col-12">

Es lo mismo que colocar esto:

<div class="col-12 col-md-5">

Es mejor comenzar por la medida más pequeña (XS que es lo mismo que col-), de allí Bootstrap va
a asumir que la medida que viene hacia arriba que en este caso es col-sm tendrá igualmente 12
columnas (col-sm-12). Se corta la medida de 12 columnas cuando se aplica col-md-5 y acá
entonces Bootstrap asume que col-lg y col-xl tendrán también 5 columnas.

4. OCULTACIÓN - 46:57
- d-xs-none
- d-sm-none
- d-md-none
- d-lg-none
- d-xl-none
- d-sm-block
- d-sm-inline
NOTA IMPORTANTE
container genera un margen predefinido por Bootstrap mientras que container-fluid lo quita y el
contenido ocupará todo el div.

Para ocultar o mostrar elementos según medida de pantalla (d-none, d-sm-none) (d-sm-block).

5. ALINEACIÓN - 1:02:51
- clearfix
- float-left
- float-right
- mx-auto
- justify-content-start
- justify-content-center
- justify-content-end
- justify-content-between
- justify-content-around
- align-items-start
- align-items-center
- align-items-end
- align-self-start
- align-self-center
- align-self-end
- fixed-top
- fixed-bottom

clearfix permite que un contenedor envuelva a sus hijos flotantes. Sin un clearfix o un estilo
equivalente, un contenedor no se envuelve alrededor de sus hijos flotantes y se colapsa, como si
sus hijos flotantes estuvieran colocados absolutamente.

d-block puede hacer que incluso los div hijos ocupen todo el espacio así:
<div class="container">
<div class="row d-block">
<div class="float-sm-right">
UNO
</div>
<br>
<div class="float-md-right">
DOS
</div>
</div>
</div>

mx-auto centra un div dentro de un contenedor padre

<div class="container">
<div class="row d-block">
<div class="mx-auto border" style="width: 100px;">
CENTRO
</div>
</div>
</div>
justify-content-center para alinear el contenido de un div
<div class="container borde" style="height: 500px">
<div class="row justify-content-center borde1">
<div class="col-4 borde2">
<p>UNO</p>
</div>
<div class="col-4 borde3">
<p>DOS</p>
</div>
</div>
</div>

justify-content-between distribuye los elementos colocando márgenes fijos.

<div class="container borde" style="height: 500px">
<div class="row justify-content-between borde1">
<div class="col-3 borde2">
<p>UNO</p>
</div>
<div class="col-3 borde3">
<p>DOS</p>
</div>
<div class="col-3 borde2">
<p>TRES</p>
</div>
</div>
</div>

justify-content-around alinea y distribuye los elementos dentro de un div y les asigna el mismo
margen a la derecha y a la izquierda.

align-items-center alinea los elementos verticalmente.

<div class="container borde" style="height: 500px">
<div class="row align-items-center borde1" style="height: 300px">
<div class="col-3 borde2">
<p>UNO</p>
</div>
<div class="col-3 borde3">
<p>DOS</p>
 </div>
<div class="col-3 borde2">
<p>TRES</p>
</div>
</div>
</div>

align-self-center alinea a si mismo el elemento dentro del div padre

<div class="container borde" style="height: 500px">
<div class="row borde1" style="height: 300px">
<div class="col-3 align-self-center borde2">
<p>UNO</p>
</div>
<div class="col-3 borde3">
<p>DOS</p>
</div>
<div class="col-3 borde2">
<p>TRES</p>
</div>
</div>
</div>

fixed-top fija un elemento en la parte superior. Es decir como un menú estatico.

6. TAMAÑO - 1:25:31
- w (ancho)
- h (alto)
- p (padding)
- m (margin)
- t (top)
- b (bottom)
- l (left)
 - r (right)
Los parametros se especifican en %, por ejemplo si queremos un width de 50% y un height de
25%:
<div class="container borde">
<div class="row borde1 w-50 h-25">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Magnam recusandae quasi suscipit debitis, aliquam commodi! Rem dolores perspiciatis, porro,
molestias velit fuga voluptas dolore qui, placeat aspernatur, laborum dicta est!</p>
</div>
</div>
</div>

Los márgenes van del 0 al 5.

7. TIPOGRAFÍA - 1:33:41
- display
- small
- mark
- abbr
- blockquote
- ol
- ul
- dl
- code
- kbd
- pre

8. BACKGROUND - 1:51:18
- bg-primary
- bg-secondary
- bg-success
- bg-info
- bg-warning
- bg-danger
- bg-dark
- bg-light

9. TABLAS - 1:54:21
- table
- table-striped
- table-bordered
- table-hover
- table-dark
- table-striped
- table-hover
- table-primary
- table-secondary
- table-success
- table-danger
- table-info
- table-warning
- table-active
- table-dark
- table-light
- table-sm
- table-responsive
- table-responsive-sm
- table-responsive-md
- table-responsive-lg
- table-responsive-xl

10. IMÁGENES - 2:06:22

- rounded
- rounded-circle
- img-thumbnail
- float-left
- float-right
- img-fluid

11. JUMBOTRON - 2:11:39

- jumbotron
- jumbotron-fluid

12. ALERT - 2:14:27

- alert
- alert-success
- aler-info
- alert-warning
- alert-danger
- alert-primary
- alert-secondary
- alert-light
- alert-dark
- alert-link
- alert-dismissable

13. BOTONES - 2:23:38

- btn
- btn-primary
- btn-secondary
- btn-success
- btn-info
- btn-warning
- btn-danger
- btn-dark
- btn-linht
- btn-link
- btn-outline-primary
- btn-outline-secondary
- btn-outline-success
- btn-outline-info
- btn-outline-warning
- btn-outline-danger
- btn-outline-dark
- btn-outline-light
- btn-outline-link
- btn-lg
- btn-sm
- btn-block
- active
- disabled

14. GRUPO DE BOTONES - 2:30:35

- btn-group
- btn-group-lg
- btn-group-sm
- btn-group-xs
- btn-group-vertical
- dropdown-menu
- dropdown-item

15. INSIGNIAS - 2:37:44

- badge
- badge-primary
- badge-secondary
- badge-success
- badge-danger
- badge-warning
- badge-info
- badge-light
- badge-dark
- badge-pill
- inside

16. BARRA DE PROGRESO - 2:43:14

- progress
- striped
- progress-bar-striped
- progress-bar-animated

17. PAGINACIÓN - 2:51:34

- pagination
- active
- disabled
- sizing
- pagination-lg
- pagination-sm
- breadcrumbs

18. LISTAS - 2:58:45

- list.group
- list-group-item
- active
- disabled

19. TARJETAS - 3:04:48

- card
- card-header
- card-body
- card-footer
- card-title
- card-text
- card-link

20. DROPDOWN MENU - 3:11:27

- dropdown-toggle
- dropdown-menu
- dropdown-item
- dropdown-divider
- dropdown-header
- dropup
21. PLEGABLES - 3:18:44
- callapse
- show

22. MENÚS DE NAVEGACIÓN - 3:28:20

- nav
- nav-item
- nav-link
- disabled
- justify-content-start
- justify-content-center
- justify-content-end
- flex-column
- nav-pills
- nav-justified
- dropdown
- nav-pills

23. BARRA DE NAVEGACIÓN - 3:39:32

- navbar
- navbar-nav
- navbar-item
- navbar-link
- nav-expand-sm
- navbar-brand
- colapsable
- nav-expand-sm
- navbar-collapse
- navbar-toggler
- navbar-toggler-icon
- dropdown
- nav-item
- nav-link
- dropdown-toggle
- dropdown-menu
- dropdown-item
- fixed-top
- fixed-bottom

24. FORMULARIOS - 3:59:12

- form-control
- form-check-label
- form-check-input
- form-control
- disabled
- textarea
- form-check
- form-check-input
- form-check-inline
- form-check-label
- radio-inline
- select

25. CAROUSEL - 4:16:09

- carousel
- slide
- carousel-indicators
- carousel-inner
- carousel-item
- carousel-caption
- carousel-control-prev
- carousel-control-next
- carousel-control-prev-icon
- carousel-control-next-icon

26. MODAL - 4:29:45

- modal
- fade
- modal-dialog
- modal-content
- modal-header
- modal-title
- modal-dialog
- modal-body
- modal-footer

27. TOOLTIP - 4:38:14

- toltip

TIPS…
El margen en el row es negativo -15 y las columnas son padding 15

CURSO CSS | YONEY GALLARDO

1. INTRODUCCIÓN - 00:10

2. SELECTORES - 15:06
Lo especifico manda sobre lo general. Ejemplo, no es lo mismo:
div {
color: pink;
}

Que colocar:
div section article p span {
color: red;
}

Cuando se coloca así afecta directamente al inmediato sin importar cual sea:
article > p

Pero si dentro de p hay un span no podemos colocar así;

article > span

Se debe colocar así

article span

O así, que viene a ser la forma correcta

article > p > span

Para identificar por medio de dos formas puede ser asi:

div#uno
Es decir, la etiqueta HTML y el ID

section.primero
Acá es la etiqueta HTML y una clase.

3. PSEUDOSELECTORES - 48:05
.first a:hover {
color: red;
}

Por ejemplo, para poner en rojo el primer elemento de esta lista:

<div class="tres">
<ul>
<li>Uno</li>
 <li>Dos</li>
<li>Tres</li>
<li>Cuatro</li>
<li>Cinco</li>
</ul>
</div>

Se coloca así:
.tres ul li:first-child {
color: red;
}

first-child es el primer elemento hijo y se puede identificar así sin colocarle un id o clase
específicos

MEJOR DOCUMENTACION EN:

https://developer.mozilla.org/es/docs/Web/CSS

4. TAMAÑOS - 01:01:04
Los tamaños de texto pueden variar entre px, cm, mm, in y pc

5. COLORES - 01:07:46
Los colores RGB van así:
0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F

# 00 00 FF
Red Green Blue

#0000FF
Red es nulo (00), Green es nulo (00) y Blue esta en su valor máximo (FF). Entonces el color es
totalmente AZUL.

Cuando es color: rgb(), es igual, solo que los 3 colores tienen desde 0 a 255 tonalidades:
rgb(255, 255, 255)

6. MODELO DE CAJA - 01:19:06

Por ejemplo si hay dos contenedores con margin: 15px; y al ambos pegarse, no se va a sumar
ambos márgenes para dar 30px, se va a mantener 15px entre los dos.

7. MANIPULACIÓN DE CAJAS - 01:25:33

- Margen
- Relleno
- Borde

border: 1px solid red;

Es lo mismo que:
border-width: 1px;
border-style: solid;
border-color: red;

El border-width también se puede asi:

border-top-width: 5px;
border-left-width: 5px;
border-rigth-width: 5px;
border-bottom-width: 5px;

Al igua que con style, color, etc.:

border-top-style: dotted;
border-rigth-color: blue;

8. POSICIONES - 01:45:03
display: none; | Oculta el elemento y su espacio
visibility: hidden | Oculta el elemento pero queda su espacio
Los elementos por defecto son display: inline; por ejemplo tenemos este SPAN:

Allí es display: inline; y si lo cambiamos a display: block;:

.posicion1 span{
display: block;
color: red;
border: 1px solid green;
}

Se verá así:

Es decir, el elemento pasa a ser independiente.

Si por ejemplo ponemos un width a un elemento inline no lo va a respetar pues debe mantenerse
en línea a su elemento padre. En cambio si el block allí si va a respetar el width que le asignemos.

Veamos:

Al ser inline, que es el valor por defecto, no esta respetando el width asignado
Al ser block, se hace independiente y toma el valor de width donde incluso se puede notar que el
borde indica el mismo.

Cuando es inline-block:

Se mostrará así… respetando el widh y manteniéndose en línea.

En cuanto a la posición por defecto es relativa (position: relative;) pero si tenemos dos elementos
y colocamos a uno absolute este flotará libremente y se montará encima del otro.

Estando allí, si le damos un margen top por ejemplo, el mismo será a partir del margen superior. Si
le damos, un top: 200px; y left: 100px; se verá así:
NOTA: Cuando position es absolute se pasa a manejar su posición con las propiedades top, left,
rigth y bottom. Es decir, si se colocan top y left como en el ejemplo anterior y se coloca position en
relative, PRIMERO tomará los valores pero SEGUNDO no va a flotar, o sea va a respetar la posición
que tenia PRIMERO y su espacio, por ello dicho espacio queda en blanco porque hemos movido
PRIMERO.

Estando los dos alineados en fila, si colocamos por ejemplo un height de 400px sucederá esto:

Quiere decir que sigue estando encima de SEGUNDO y por ello

tomara ese alto de 400px tal cual en su contenedor y su espacio
original.

Cuando position es fixed, el elemento se quedará en el mismo lugar aún cuando se haga scroll a la
página:

Con z-index asignamos la prioridad para mostrar un elemento. Por ejemplo PRIMERO con z-index:
0; y SEGUNDO con z-index: 1; se vería así:
En cuanto a float, por defecto es left… pero si por ejemplo estando los contenedores relativos
colocamos a PRIMERO float: rigth; pasará esto:

Con clear limpiamos los laterales de un contenedor, por ejemplo si colocamos clear: rigth; va a
quitar todo lo que este a la derecha y se va a bajar así:

9. DIMENSIONES - 02:10:42
NOTA: Para alinear al centro un contenedor se puede colocar margin: auto;

NOTA: max-width: 400px; si un contenedor tiene esto, será siempre de 400px mientras la pantalla
sea más grande, si es más pequeña el mismo se va a ajustar.

10. FONDO Y COLOR - 02:18:51

Al colocar estos valores:

La imagen dentro del contenedor se verá así

Es decir, se tiene un contenedor de 500x500px dentro de cual se

ha colocado una imagen más grande y para poderla ver completa
se coloca background-size: 100%;
Para colocar la imagen más pequeña y alinearla al centro se coloca así:

Y quedaría de esta manera:

También podría ser background-position: center top; y se vería así:

También se puede colocar background-position: 50px 60px; y en

% incluso…

El efecto PARALAX es cuando un fondo dentro de un contenedor queda fijo mientras se hace
scroll:
También se pueden agrupar todos los valores en un solo background así:

Y se verá así:

11. TEXTOS - 02:33:25

text-indent: 50px; para dar margen a la primera línea de un párrafo:

Para dar sombra:

text-shadow: horizontal vertical difuminado color;

text-shadow: 5px 5px 5px gray;

Para espacio entre letras:

letter-spacing: 5px;

Para transformar texto:

text-transform: capitalize; Para primera letra de cada palabra en mayúscula. Para otros valores:
uppercase para todas las letras en mayúscula, lowercase en minúscula, etc.

Para espacio entre líneas:

line-height 25px;
NOTA: Por defecto es de 18px
12. FUENTES - 02:46:14
Se puede buscar en Google Fonts y se copia el link:
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@100;200&display=swap"
rel="stylesheet">

Y se llama en CSS así:

font-family: 'Raleway', sans-serif;

Si por ejemplo se quiere garantizar que se muestre al menos un tipo de letras entre varias que
tengamos se coloca asi:
font-family: arial, helvética, sans-serif;
Quiere decir que si no se muestra arial, pasará a buscar helvetica y si tampoco esta buscara sans-
serif.

NOTA: Esto font: bold italic 20px Raleway; es lo mismo que esto:
font-weight: bold;
font-style: italic;
font-size: 20px;
font-family: 'Raleway', sans-serif;

Para quitar puntos a li:

ul li {
list-style: none;
}

IMPORTANTE:
CASCADA:
En un primer nivel de simplicidad, la cascada en las hojas de estilo significa que el orden de las
reglas importa en CSS: cuando dos reglas tienen la misma especificidad, se aplica la que viene en
último lugar en el CSS.
En el ejemplo siguiente tenemos dos reglas que pueden aplicarse al título de encabezamiento h1.
El título h1 acaba siendo de color azul porque estas normas tienen un selector idéntico y, por lo
tanto, tienen la misma especificidad. Por esta razón, se aplica la última que aparece.
ESPECIFIDAD:
La especificidad es el modo que tiene el navegador de decidir qué regla se aplica si diversas reglas
tienen selectores diferentes pero podrían aplicarse a un mismo elemento. Básicamente, la
especificidad mide cuán específica es la selección de un selector:
- Un selector de elementos es menos específico si selecciona todos los elementos de aquel
tipo que aparecen en la página; entonces presenta una puntuación más baja en
especificidad.
- Un selector de clase es más específico si selecciona solo los elementos de una página que
tienen un valor de atributo class específico; entonces recibe una puntuación mayor.
Veamos un ejemplo. Más abajo, encontrarás dos reglas que pueden aplicarse al elemento h1. Este
elemento h1 termina siendo de color rojo: el selector de clase confiere a esta regla una mayor
especificidad, así que se aplicará a pesar de la regla para el selector de elemento que aparece más
abajo en el orden del código.

HERENCIA:
La herencia también debe entenderse en este contexto: algunos valores de las propiedades CSS
que se han establecido para los elementos padre los heredan los elementos hijo, pero otros no.
Por ejemplo, si para un elemento se establece el color (color) y el tipo de letra (font-family), cada
elemento que se encuentre dentro de aquel elemento también se mostrará de ese color y con ese
tipo de letra, a menos que se haya aplicado un color y un tipo de letra diferentes directamente en
estos.

Algunas propiedades no se heredan. Por ejemplo, si para un elemento se establece un ancho

width del 50%, sus descendientes no tendrán un 50% de ancho con respecto al de sus padres. Si
este fuera el caso, ¡sería muy frustrante usar CSS!.
TIPS…

FONTELLO
Para usar fontello, desde http://fontello.com/ en el buscador digitamos los iconos por nombre,
estos iran siendo agregados en Customize Names y se le da click en la parte superior derecha
Download webfont… Esto genera un archivo comprimo, de allí al descomprimir copiamos la
carpeta font y la pegamos en la carpeta de nuestro proyecto.
Tambien se copia el archivo css/fontello.css y lo pegamos en nuestra carpeta css del proyecto.
Luego en nuestro HTML le colocamos el link <link rel="stylesheet" href="css/fontello.css">.

box-sizing: border-box;
Para que cuando le demos padding o borders a un elemento sea dentro del mismo modelo de caja
y no se expanda ni se salga

GOOGLE FONTS
Para integrar una fuente de Google en la página oficial elegimos la requerida con click en Select
this style y en la parte superior derecha click en View your selected families

Se copia el @import y se pega al inicio de nuestro archivo css

Tambien se copia font-family: 'Open Sans', sans-serif; y se coloca en nuestro css asi:
body {
    font-family: 'Open Sans', sans-serif;
}

Importar otro css que tangamos en el proyecto

Desde el principal que tenemos linkeado por ejemplo que sea styles.css, en el inicio del mismo
colocamos así:
@import url(menu.css);
Cambio de posicion de contenedores en responsive:
Por ejemplo tenemos esto en desktop:
<section class="specialist">
<div class="container">
<div class="row">
<div class="col-lg-6 content-specialist">
<h1 class="title2">Need to speak to<br>one of our specialists?</h1>
<div class="box-text1">
<p>Lorem ipsum dolor sit amet</p>
</div>
<a href="#" class="btn-design1">Get in touch</a>
</div>
<div class="col-lg-5 img-specialist">
<img src="assets/img/card-dog-lovers1.jpg" alt="">
</div>
</div>
</div>
</section>

Para cambiar el orden en mobile, colcando primero la imagen y luego el texto con el botón se colocar así en
el @media del css:
@media screen and (max-width: 480px) {
.specialist .row {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.specialist .row .img-specialist {
width: 100%;
order: 1;
}
.specialist .row .content-specialist {
width: 100%;
order: 2;
}
}

Y se verá así:
Cuando hay cache y no se actualizan estilos:
Style.css?v=1.1.1” y se va subiendo uno a uno

Para descargar svg

https://www.flaticon.com/

Para darle color a svg

Dentro del archivo svg, abierto desde el editor de código, se coloca en la etiqueta path el atributo
fill:
<path d="M17.778,44.857v11.026L0,38.105l17.778-17.781v11.163c20.952-
1.58,37.88-12.49,41.993-26.64
            c0.627,2.158,0.96,4.393,0.96,6.682C60.731,28.812,41.931,43.037,1
7.778,44.857z" fill="#3860FC" />