Resúmen contenido FreeCodeCamp HTML, CSS y Bootstrap

...

ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.

5. Images NEED src and alt attributes

6. Nesting

a. To put an element inside another one

b. To nest a element in p element means to put an anchor in a parragraph

II. CSS (Cascading Style Sheets)

A. Properties

1. Color

a. It modifies the text’s colors

b. color:blue;

2. Font Size

a. It modifies the text’s size

b. font-size:10px;

i. You can use px or %

3. Font Family

a. It modifies the text’s font

b. font-family: Monospace;

c. Degrading

i. If one font is available, but the othe other isn’t, you can degrade the font

ii. font-family: Helvetica, Sans-Serif;

iii. If Heveltica isn’t available (either because of the browser or internet, etc.) then Sans-Serif is the next font in line of use

4. Width

a. Controls an element’s width

b. width: 10px;

i. You can use px or %

5. Border

a. Color

i. border-color:red;

b. Width

i. border-width: 5px;

ii. You can use px or %

c. Style

i. border-style: solid;

d. Radius

i. border-radius: 2px;

ii. You can use px or %

e. It is one of the three properties that modifies space around HTML elements

6. Background color

a. background-color:red;

7. Padding

a. Padding controls the amount of space between the element and its border

b. You can use the properties padding-top, padding-right, padding-bottom, and padding-left to modify the padding on all four sides

c. Also, you can use the Clockwise Notation (top, right, bottom, left) to specify the padding on all four sides

i. padding: 10px 20px 30px 40px

d. It is one of the three properties that modifies space around HTML elements

8. Margin

a. Margin controls the amount of space between an element’s border and surrounding elements

b. You can use the properties margin-top, margin-right, margin-bottom, and margin-left to modify the padding on all four sides

c. Also, you can use the Clockwise Notation (top, right, bottom, left) to specify the margin on all four sides

i. margin: 10px 20px 30px 40px

d. It is one of the three properties that modifies space around HTML elements

B. Selectors

C. Styles

1. Class

a. Reusable styles that can be added to HTML elements

b. .className{properties;}

2. Id

a. Styles that SHOULD be used once

b. #id {properties};

D. Google Fonts

1. Call/import the font via <link> code snippet

2. <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

3. Then use font-family as you nomally would

E. Font Awesome

1. Icon library

2. These icons are vector graphics

3. These icons are treated just like fonts

4. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>

5. The i element was originally used to make other elements italic, but is now commonly used for icons

6. Example

a. <i class="fa fa-info-circle"></i>

b. in class you have to put "fa" and "fa-[iconName]"

F. Rules

1. Selectors have a {} following them

2. After the property a ; is obligated

3. Overriding

a. The browser reads a web page from top to bottom, so if there is a class modifying an element (class a), and there is another class that modifies the same element (class b), CSS will use the properties of the last class mentioned to apply its properties to the element

i. .classA

.classB

<tag class="classA classB"

ii. On the last example CSS will use classB

b. ids are more important than classes

c. Inline Stylings are more important than ids and classes

d. !important is more important than Inline Stylings

i. .selector{