HTML/CSS - HackMD

HTML/CSS ======== ### I. HTML #### 1. HTML file structure ```htmlmixed <!DOCTYPE html>   <html>  <head> <title>F8-Shop</title> <meta charset="utf-8"> </head>  <body> Hello </body> </html> ``` HTML file often start with ```<!DOCTYPE html>``` card alongsided with an ```<html> </html>``` tag. The content of the webpage is inside the tag. The content includes 2 part. 1. The head with ```<head> </head>``` tag 2. The body with ```<body> </body>``` tag #### 2. Comments in HTML ```htmlmixed  ``` Use the tag `````` to make a comment, the content is written in the middle of the tag Content of comment will not display on the webpage, it is only used to take note and help understand code. #### 3. Common HTML tags #### 3.1 Heading tags There are 6 heading tags, declare by letter ```h``` from ```h1``` to ```h6```. The ```h1``` is largest heading and ```h6``` is smallest ```htmlmixed <!DOCTYPE html> <h1> </h1>  <h2> </h2>  <h3> </h3> <h4> </h4> <h5> </h5> <h6> </h6>  ``` #### 3.2 Paragraph tags ```htmlmixed <!DOCTYPE html> <p> Content of the paragraph </p> ``` #### 3.3 Image tags ```htmlmixed <!DOCTYPE html> <img src="" alt=""> ``` There are 2 attributes ```src``` and ```alt``` in ```img``` tag. The ```src```1 is the source link or directory of image while the ```alt``` is the auto display if the link of ```src``` is error. #### 3.4 Anchor tags ```htmlmixed <!DOCTYPE html> <a href="This is a link">Replace the long link with a name</a> ``` Anchor ```a``` tag is used to display link to navigate to other sections of the web or other website. The ```href``` attribute is the reference, its content is the link of directory of the destination. The content in ```a``` tag is to name the link with instead of displaying it purely. #### 3.5 List tags ```ul``` is for unordered list while ```ol``` is for oredered list. ```li``` is for eachitem of the list. ```htmlmixed <!DOCTYPE html> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ol> ``` #### 3.6 Table tags ```htmlmixed <!DOCTYPE html> <thead> <th>No</th> <th>Name</th> <th>Add</th> </thead> <tbody> <tr> <td>1</td> <td>Viet</td> <td>Hanoi</td> </tr> <tr> <td>2</td> <td>Viet-2</td> <td>Hano-2</td> </tr> <tr> <td>3</td> <td>Viet-3</td> <td>Hanoi-3</td> </tr> </tbody> </table> ``` The ```thead``` is the 1st head row of the table, which define the heading in each column of the body row. Each ```th``` represents for one column heading. The ```tbody``` display the content of each item in each row. Each ```tr``` represents for one item in a row and each ```td``` represents for column content of the item. Number of ```tr``` have to be equal to number of ```th``` #### 3.7 Input tags ```htmlmixed <!DOCTYPE html> <input type="text" name="ip1" id=""> <input type="radio" name="ip2" id=""> <input type="checkbox" name="ip3" id=""> ``` Use to get input from users. There are three types of inputs. 1. The text input defined by ```type="text"``` 2. The radio selection input defined by ```type="radio"``` 3. The square checkbox input defined by ```type="checkbox"``` If many radio input have same attributes ```name```, the user can only check 1 of the radio box. ```htmlmixed <!DOCTYPE html> <input type="radio" name="ip" id=""> <input type="radio" name="ip" id=""> <input type="radio" name="ip" id=""> ``` #### 3.8 Button tags ```htmlmixed <!DOCTYPE html> <button>sign up</button> ``` #### 3.9 Division tags ```htmlmixed <!DOCTYPE html> <div> Section content </div> ``` The ```div``` tag is used to divide the section of the webpage #### 3.10 Line break tag ```htmlmixed <!DOCTYPE html> <h1>Hello! <br/>How are you today</h1> ``` "How are you today" will be written as second line" #### 3.11 Example for all common type of tags ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <h1>Sinh viên thu nhập "nghìn đô" từ "Game siêu đạo chích" </h1>  <p>Với mong muốn tái hiện trò chơi gắp thú của tuổi thơ trong phiên bản online, Đặng Ngọc Sơn - Founder tại F8 cho ra mắt ứng dụng "Game siêu đạo chích". </p>  <img src="https://i3.ytimg.com/vi/aXwRFbXInyE/maxresdefault.jpg" alt="Sinh viên thu nhập nghìn đô từ Game siêu đạo chích" width="100%" />  <p>Về ý tưởng thực hiện dự án, Sơn chia sẻ: "Sau khi tìm hiểu về "Internet of things", mình nảy ra ý tưởng thực hiện một dự án điều khiển thiết bị qua Internet theo mô hình "Nhà thông minh", </p> </body> </html> ``` #### 4. Attribute Html elements can have attribute. For example, ```title``` and ```style``` is the attribute of ```h1``` tag as below. ```htmlmixed <h1 title="This is title attribute of h1" style="This is attribute style of h1"> Content of h1 </h1> ``` ### II. CSS #### 1. CSS in HTML Three ways to use CSS in HTML: 1. Internal 2. External 3. Inline #### 1.1 Internal CSS Formular of an CSS ``` tag(CSS selector) { attribute1: value1; attribute2: value2; ... } ``` CSS written anywhere inside html file is called **internal CSS** . Use ```style``` tag to write CSS. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> h1 { color: red; font-size: 20px; } </style> </head> <body>  <h1>Sinh viên thu nhập "nghìn đô" từ "Game siêu đạo chích"</h1> </body> </html> ``` #### 1.2 External CSS CSS written on external .css file is call **external CSS**. For example, create a main.css file separated from index.html file This is the most popular usage of CSS. Code in index.html ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1>Sinh viên thu nhập "nghìn đô" từ "Game siêu đạo chích"</h1> </body> </html> ``` Use ```link``` tag to refer to the .css file which contains the css via ```href``` attribute, in this case main.css. Code in main.css ```css h1 { color: red; font-size: 20px; } ``` This css will be applied on index.html #### 1.3 Inline CSS CSS written inside html line tag by using ```style``` attribute. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 style="color: red; font-size: 16px">Sinh viên thu nhập "nghìn đô" từ "Game siêu đạo chích"</h1> </body> </html> ``` #### 2. ID and Class Use to refer to specific CSS selectors to avoid that all the same html tags are aapplied similar css. #### 2.1 ID Use ```id``` attribute to specify the selector. Use ```#``` in css file to access the selector with ```id```. Code in HTML file ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 id="first-heading">Sinh viên thu nhập "nghìn đô" từ "Game siêu đạo chích"</h1> </body> </html> ``` Code in CSS file ```css #first-heading { color: red; font-size: 20px; } ``` **There cannot be more than 1 id with the same name** #### 2.2 Class Use ```class``` attribute to specify the selector. Use ```.``` in css file to access the selector with ```class```. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 id="first-heading">title 1</h1> <h1 class="second-heading">title 2</h1> <h1 class="second-heading">title 3</h1> <h1 class="second-heading">title 4</h1> </body> </html> ``` ```css #first-heading { color: red; font-size: 20px; } .second-heading { color: green; font-size: 16px; } ``` All ```h1``` with class second-heading can be applied similar css. **There can be more than 1 class with the same name** #### 3. CSS Selectors #### 3.1 .class All element with same class will be applied css Example: ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title">title 1</h1> <h1 class="title">title 2</h1> <h1 class="title">title 3</h1> <h1 class="title1">title 4</h1> </body> </html> ``` ```css .title { color: green; font-size: 16px; } ``` Three ```h1``` tags with class *title* will have green color and 16px font-size. The ```h1``` with class *title1* sees no change. #### 3.1 .class1.class2 All element with both class1 and class2 in its class attribute will be provoked. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title heading">title 1</h1> <h1 class="heading title">title 2</h1> <h1 class="title">title 3</h1> <h1 class="title1">title 4</h1> </body> </html> ``` ```css .title.heading { color: green; font-size: 16px; } ``` Only first two ```h1``` with class *heading* and *title* apply the css. #### 3.3 .class1 .class2 The element with class2(the more right selector) is subelement inside the element with class1(more left selector) ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title heading">title 1</h1> <h1 class="heading title">title 2</h1> <h1 class="title">title 3</h1> <div class="box"> <h1 class="title">title 4</h1> </div> </body> </html> ``` ```css .title.heading { color: green; font-size: 16px; } .box .title { color: red; font-size: 15px; } ``` The ```h1``` inside the ```div``` will be implemented with css red color and 15px font-size. #### 3.4 * ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title heading">title 1</h1> <h2 class="heading title">title 2</h2> <h3 class="title">title 3</h3> <p> asdasdadadsadasd </p> </body> </html> ``` ```css * { color: red; } ``` All ```h``` and ```p```, in other words all the element will be css. #### 3.4 Using element Use the html element name literally to css. ```css h1 { color: red; font-size: 20px; } ``` In this case ```h1``` is used. #### 3.4 element.class All element with class will be selected. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title">title 1</h1> <h2 class="title">title 2</h2> <h1 class="title">title 3</h1> <h1 class="title1">title 3</h1> <div class="box"> <h3 class="title">title 4</h3> </div> </body> </html> ``` ```css h1.title { color: red; } ``` Only two ```h1``` with class *title* are selected. #### 3.4 element, element (element, class / class,class /...) Css applied to all mentioned selectors at the same time ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h1 class="title">title 1</h1> <h2 class="title">title 2</h2> <h1 class="titl2">title 3</h1> <h1 class="title1">title 3</h1> <div class="box"> <h3 class="title">title 4</h3> </div> </body> </html> ``` ```css .title, .title1 , .title2{ color: red; } ``` All tag with class *title1*, *title2*, *title3* will be selected. #### 3.4 element1 element2 Element2 which is inside the element is selected ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h2> <div class="box"> <h3 class="title">title 4</h3> <div> <div> <h3 class="title">title 4</h3> </div> </div> </div> </body> </html> ``` ```css .box .title{ color: red; } ``` Both the ```h3``` are triggered. #### 3.4 element1 > element2 Element2 which is 1st level inside the element is selected. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h2> <div class="box"> <h3 class="title">title 4</h3> <div> <div> <h3 class="title">title 4</h3> </div> </div> </div> </body> </html> ``` ```css .box > .title{ color: red; } ``` Only the upper ```h3``` is triggered #### 3.4 element1 + element2 Element2 which is same level and right behind the element1 is triggered ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> </body> </html> ``` ```css .title + .title{ color: red; } ``` All three belower ```h3``` is triggered, only the first one not. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h3> <div> </div> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> </body> </html> ``` ```css .title + .title{ color: red; } ``` Only last two belower ```h3``` is triggered, the second one is not triggered anymore since it is not right behind the first dur to the ```div```. #### 3.4 element1 ~ element2 Element2 which is same level and behind the element1 is triggered ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h3> <div> </div> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> </body> </html> ``` ```css .title ~ .title{ color: red; } ``` All three belower ```h3``` is triggered, only the first one not since this selector not require right behind, behind is enough. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h3> <div> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> </div> </body> </html> ``` ```css .title ~ .title{ color: red; } ``` Only last 2 ```h3``` are selected. The second is not since it is not at the same level with the first. #### 4. CSS Priority #### 4.1 Internal vs External No real priority between internal and external, the one called later will be prioritized merely. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> <style> h3 { color: green; } </style> </head> <body>  <h3 class="title">title 2</h3> <div> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> </div> </body> </html> ``` ```css h3 { color: red; } ``` This case, ```link``` is before ```style```, so ```style``` or *internal* will be prioritized. Therefore, h3 is green. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> h3 { color: green; } </style> <link rel="stylesheet" href="main.css"> </head> <body>  <h3 class="title">title 2</h3> <div> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> <h3 class="title">title 2</h3> </div> </body> </html> ``` ```css h3 { color: red; } ``` This case, ```link``` is after ```style```, so *external* will be prioritized, h3 is red. #### 4.2 CSS selector point systems CSS selector point system: 1. Inline - 1000 2. #id - 100 3. .class - 10 4. tag - 1 If multiple css are use different way of css, the one with highest point is prioritized. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> .heading { color: yellow; } h3 { color: green; } </style> </head> <body>  <h3 class="heading">title 2</h3> </body> </html> ``` ```css h3 { color: red; } ``` ```.heading``` is higher in point than tag ```h3```, h3 will be yellow. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #title { color: blue; } .heading { color: yellow; } h3 { color: green; } </style> </head> <body>  <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css h3 { color: red; } ``` ```title``` is is highest point, h3 is blue. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #title { color: blue; } .heading { color: yellow; } h3 { color: green; } </style> </head> <body>  <h3 class="heading" id="title", color:"white">title 2</h3> </body> </html> ``` ```css h3 { color: red; } ``` Inline css ```color:"white"``` is highest in point, ```h3``` will be white. #### 4.2 Equal specificity ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #title { color: gray; } #title { color: blue; } .heading { color: yellow; } h3 { color: green; } </style> </head> <body>  <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css h3 { color: red; } ``` If a css selector is repeat, the latest will be prioritized,``` h3``` is blue, not gray. The point can be summed if there are more than 1 selector in a css. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> #title.heading { color: gray; } #title { color: blue; } .heading { color: yellow; } h3 { color: green; } </style> </head> <body>  <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css h3 { color: red; } ``` ```#title.heading``` is 110 point, higher than 100 points of ```#title```, ```h3``` is gray. #### 4.3 Universal and Inherited #### 4.3.1 Universal ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <h1 class="heading" id="title">title 2</h1> <h2 class="heading" id="title">title 2</h2> <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css * { color: red; } h1 { color: black; } ``` ```*``` is universal, its point is 0. ```h1``` is black (1>0). #### 4.3.2 Inherited ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <h1 class="heading" id="title">title 2</h1> <h2 class="heading" id="title">title 2</h2> <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css html { color: red; } h1 { color: black; } ``` ```html``` tag have ```h1```,```h2```,```h3``` tags inside. These inside tag will also inherit the css of there father. Inherited point is 0. This case, ```h1``` is black while others is red. #### 4.3.3 !Important ```!important``` makes the selector point become infinity. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <h1 class="heading" id="title">title 2</h1> <h2 class="heading" id="title">title 2</h2> <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css html { color: red; } h1 { color: blue !important; } h1 { color: black; } ``` ```h1``` is blue since ```!important``` make ```h1``` tag infinity. If there are more than 1 ```!important```, the point system will be considered. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <h1 style="color: violet !important" class="heading" id="title">title 2</h1> <h2 class="heading" id="title">title 2</h2> <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css html { color: red; } h1 { color: blue !important; } h1 { color: black; } ``` Now both ```h1``` and *inline css* have ```!important```. The point system is applied and ```h1``` is violet since (1000>1) #### 5. Variable in css Variable can be used to avoid the circumstance that we have to change the css of each element. Instead, use a general variable for that attribute and change the variable is mor convienient. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>  <h1 class="heading" id="title">title 2</h1> <h2 class="heading" id="title">title 2</h2> <h3 class="heading" id="title">title 2</h3> </body> </html> ``` ```css root: { --text-color: green; } h1 { color: var(--text-color); } h2 { color: var(--text-color); } ``` ```h1```, ```h2``` are green. ```--text-color``` is the variable and be used as value for attribute color. Now if we want to change the color of ```h1``` and ```h2```, we just need to change the value of ```--text-color``` in ```root``` instead of change value of color attribute in two below css. ```css :root { --text-color: violet; } h1 { color: var(--text-color); } h2 { color: var(--text-color); } ``` ```h1```, ```h2``` is violet now. ```:root``` is used to define global variable and can be applied for all css below it. We can also use local variable. ```css root: { --text-color: violet; } h1 { --my-color: green; color: var(--my-color); } h2 { color: var(--text-color); } h3 { color: var(--my-color); } ``` ```--my-color``` is local inside ```h1``` css, its range only in ```h1```. Therefore, ```h3``` can not be trigger by it. ```h1``` is green, ```h2``` is violet, ```h3``` is black as default. #### 5. Units in css #### 5.1 Absolute unit The value of this unit is fixed, it will remain contanst regardless of the changes of surrounded object and the webpage. There are 6 absolute unit, the most widely use is px. 1. px 2. pt 3. cm 4. mm 5. inch 6. pc ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> <style> .box { width: 100px; height: 100px; background-color: red; } h1 { font-size: 40px; } </style> </head> <body> <div class="box"> </div> <h1> Hello</h1> </body> </html> ``` Sometimes, using ```px``` will force us to make a lot of changes if the product need change in size of many elements. #### 5.2 Relative unit Relative unit will depend on the size tag contain it. 1. % 2. rem 3. em 4. vw 5. vh 6. vmin 7. vmax 8. ex 9. ch #### 5.2.1 % unit ```%``` relative unit will depend on the size of father tag containing it. Often use to divide layout. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> <style> .box { width: 50%; height: 100px; background-color: red; } h1 { font-size: 40px; } </style> </head> <body> <div class="box"> </div> <h1> Hello</h1> </body> </html> ``` The ```width``` in this case is half the width of the the ```body``` tag since the ```body``` tag directly contains it. ```body``` has the width of browser, so the ```div``` will always has the width of 50% the browser. When the browser changes its width, the width of ```div``` will also change. ```%``` only works if the father tag have a specific absolute height. ```htmlmixed <!DOCTYPE html> <div class="parent-1"> <div class="box-1">BOX 1</div> </div> <div class="parent-2"> <div class="box-2">BOX 2</div> </div> ``` ```css /* .box-1 không có chiều cao, vì .parent-1 mặc định height: auto */ .parent-1 .box-1 { height: 30%; background-color: green; } .parent-2 { /* Hãy thử comment height lại để thấy sự thay đổi */ height: 400px; background-color: #ccc; } /* .box-2 có chiều cao, vì .parent-2 được set height */ .parent-2 .box-2 { /* 30% của 400px */ height: 30%; background-color: orange; } ``` ```box-1``` will not has height since its father ```parent-1``` not contain a specific height #### 5.2.2 rem unit ```rem``` unit depends on the ```html``` tag. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> <style> html { font-size: 20px; } .box { width: 50%; height: 100px; background-color: red; } h1 { font-size: 2rem; } </style> </head> <body> <div class="box"> </div> <h1> Hello</h1> </body> </html> ``` ```h1``` will have font-size 2x20px = 40px, the ```1 rem``` is equal to the unit set up in ```html``` tag ```css html { font-size: 62.5%; } #heading { font-size: 2rem; } ``` Deafault font-size of browser is 16px, there for by use 62.5% of the default which is 10px, it is easier to calculate. #### 5.2.3 em unit ```em``` relative unit depends on the nearest father tag containing the same attribute with the selector using ```em```. ```htmlmixed <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="main.css"> <style> html { font-size: 20px; } .box { width: 50%; height: 100px; background-color: red; } h1 { font-size: 2em; } </style> </head> <body> <div class="box"> </div> <div style="font-size:50px"> <h1> Hello</h1> </div> </body> </html> ``` ```h1``` will have font-size 2x50px = 100px, the ```1 em``` is equal to the unit set up in ```div``` tag which is father tag and nearest to it. ```rem``` is easier to control tham ```em```, use ```rem``` more frequent. #### 5.2.4 vw , vh ```vw``` and ```vh``` stand for viewport width and height. ```1vw``` always equal to 1% of the browser's width. ```1vh``` always equal to 1% of the browser's height. If the size of the browser is change, the element using ```vw``` and ```vh``` also change. #### 6. Reset default css The browser has some default css attribute (```margin``` for example). Some tags like ```h1-h6```,```p``` are also. This creates unwanted white space. To cope with the problem, we reset the css for all tags. ```css * { margin: 0; padding: 0; } ``` ```padding``` is also an attribute that creates unwanted white space like ```margin```, they should be reset together. #### 7. Function in css 1. var() 2. linear-gradient() 3. rgba() 4. rgb() 5. calc() 6. attr() #### 7.1 var() Use to call the variable defined in root and take the value ```css :root { --heading-color: #333333; --text-color: #404040; } h1 { color: var(--heading-color) } p { color: var(--text-color) } ``` #### 7.2 liner-gradient() Use to create gradient color ```css /* A gradient tilted 45 degrees, starting blue and finishing red */ linear-gradient(45deg, blue, red); /* A gradient going from the bottom right to the top left corner, starting blue and finishing red */ linear-gradient(to left top, blue, red); /* Color stop: A gradient going from the bottom to top, starting blue, turning green at 40% of its length, and finishing red */ linear-gradient(0deg, blue, green 40%, red); /* Color hint: A gradient going from the left to right, starting red, getting to the midpoint color 10% of the way across the length of the gradient, taking the rest of the 90% of the length to change to blue */ linear-gradient(.25turn, red, 10%, blue); /* Multi-position color stop: A gradient tilted 45 degrees, with a red bottom-left half and a blue top-right half, with a hard line where the gradient changes from red to blue */ linear-gradient(45deg, red 0 50%, blue 50% 100%); ``` #### 7.3 rgba() & rgb() Function rgba() use R,G,B to define color, A to define opacity (0 to 1). ```css .box{ width :100%; height: 120pxl; background: rgb(190,124,157,0.8); } ``` Function rgb() use R,G,B to define color ```css .box{ width :100%; height: 120px; background: rgb(190,124,157); } ``` #### 7.4 calc() Function calc() use to calculate the formular inside it ```css .box{ width :calc(120px + 50px); height: 120px; background: rgb(190,124,157); } ``` ```css .box{ width :calc(80% + 50px); height: 120px; background: rgb(190,124,157); } ``` #### 7.5 attr() If this link below need updates, we have to change link in both ```href``` and tag content. ```htmlmixed <a href="https://web.edu.vn">Learn how to code https://web.edu.vn</a> ``` Use to define pseudo class value. Make it simplier to update an attribute. Now only need to change the ```href```, the link will be changed and added automatically after the tag content. ```css a::after { content: " ("attr(href)")" } ``` ```htmlmixed <a href="https://web.edu.vn">Learn how to code</a> ``` ```css .box::after { content: attr(data-title); } ``` ```htmlmixed <div class="box" data-title="Learn to code"></div> ``` #### 8. Pseudo class #### 8.1 :root Reference to the ```html```, contains global defined css variable. #### 8.2 :hover and :active css attribute inside hover class only be triggered if the mouse of user hover on it ```css h1:hover { color:red } .box:hover { background-color: blue } ``` css attribute inside active class only be triggered if the mouse of user click and keep on it ```css h1:active { color:red } .box:active { background-color: blue } ``` #### 8.3 :first-child and :last-child Use to select first child and last child tag. ```htmlmixed <!DOCTYPE html> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> <li>item 4</li> </ul> ``` ```css li:first-child { color:red } li:last-child { color:blue } ``` Select first and last item of the list. #### 9. Pseudo elements #### 9.1 ::before and ::after ```css .box::before { content: ""; /*mandatory attribue to create pseudo element */ display: block; /*use to define block properties in pseudo element */ width:50px; height:50px } .box::after { content: ""; display: block; width:50px; height:50px } ``` ```::before``` create a white box that always stands before and ```::after``` create a white box that always stands after all the child of a tag. #### 9.2 ::first-letter ```htmlmixed <!DOCTYPE html> <h1> This is the first line. <br/> This is the second line. </h1> ``` ```css h1::first-letter { font-size:50px } ``` Apply the css to the fisrt letter of h1 (letter T in the first line). #### 9.3 ::first-line ```htmlmixed <!DOCTYPE html> <h1> This is the first line. <br/> This is the second line. </h1> ``` ```css h1::first-line { font-size:50px } ``` Apply the css to the fisrt line of h1. #### 9.4 ::selection Apply css when the object is mouse select. ```htmlmixed <!DOCTYPE html> <h1> This is the first line. <br/> This is the second line. </h1> ``` ```css h1::first-line { font-size:50px } h1::selection { background-color: violet; } ``` If remove the selector infront of the psedo element, it means that css will apply to ```html``` tag selector. ### III. Padding, Border & Margin #### 1. Padding Order of level: content -> padding -> border -> margin (in to outside), its not widen the ```htmlmixed <!DOCTYPE html> <html> <head> <title>My First Webpage</title> <style> .box { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .box1{background-color: #333;} .box2{background-color: orange;} .box3 { background-color: firebrick; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; } </style> </head> <body> <div class="box box1">Box 1</div> <div class="box box2">Box 2</div> <div class="box box3">Box 3</div> </body> </html> ``` Padding is the first border level of an html element. Inspect by Rclick to element -> inspect Css can be short-handed. ```css .box3{ background-color: firebrick; padding: 10px 12px 8px 6px; } ``` Short-hand css: 1. 1 values: all direction 2. 2 values: up/down left/right 3. 3 values: up (both right & left) down 4. 4 values: up right down left #### 2. Border Border is the 2nd level of element size, it not a part of element,its not widen the element. ```css .box3 { background-color: firebrick; padding: 10px; border-width: 10px; border-style: solid; border-color: #333; } ``` ```border-style```: solid, dotted, dashed Css border can be shorted-hand ```css .box3 { background-color: firebrick; padding: 10px; border: 10px soilid #333; } ``` 4 directions, solid, #333 ```css .box3 { background-color: firebrick; padding: 10px; border-top: 10px soilid #333; } ``` Only the top border #### 3. Margin The last level of element size, it can use to create space among elements, not widen the element ```css .box3 { background-color: firebrick; padding: 10px; border: 10px soilid #333; margin-top: 10px; } ``` box2 will have 10px distance to box3 Margin can be shorted-handed 1. 1 values:all 2. 2 values: up/down left/right 3. 3 values: up left/right left 4. 4 values: up right down left #### 4. Box-sizing ```css .box3 { width:100px; height:100px background-color: firebrick; padding: 10px; border: 10px soilid #333; margin-top: 10px; box-sizing: border-box; } ``` Calculate content size base on keeping width and height. ### IV. Backgroud Atrribute #### 1. Background Image, size, repeat ```css .box { width: 60px; height: 60px; background-image: url(), url(); background-size:100%; background-repeat:no-repeat; } ``` ```background-image``` use to insert picture as background ```background-size``` set the horizontal size of picture ```background-repeat``` repeat picture Repeat can be use to create large background of single image. Can use multiple images by add more ```url()```, later image will be placed on top of previous ones. ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:100%; background-repeat:no-repeat; } ``` Can use linear-gradient also. #### 2. Background-size with contain, cover #### 2.1 Contain ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:contain; } ``` Use larger side of image to reference 100%, if larger size make the picture hided -> use smaller side instead. Contain may create white space if change the browser size. #### 2.2 Cover ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:cover; } ``` Use larger side of image to reference 100% n matter lost part of the picture or not. #### 3. Background-origin ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:100%; background-repeat:no-repeat; border: 20px dashed #ccc; padding: 20px; box-sizing: border-box; background-origin: padding-box; } ``` ```background-origin``` use to change backgrounf origin from padding, content or border. #### 4. Background-position Use bottom, top, left, right,... ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:100%; background-repeat:no-repeat; background-position: bottom center; } ``` Use 1 value, the next value is automatically center ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:100%; background-repeat:no-repeat; background-position: 10%; } ``` Use pos with value, move the element base on value ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:100%; background-repeat:no-repeat; background-position: top 20% right -20%; } ``` Use 2 values bases on co-ordinate system, first is horizontal, next is vertical (x,y) ```css .box { width: 60px; height: 60px; background-image: linear-gradient(0,red,blue), url(); background-size:100%; background-repeat:no-repeat; background-position: 30px 40px; } ``` Background can be use shorted-handed ```css .box { width: 60px; height: 60px; background: color url() no-repeat center / contain } ``` Need ```/``` before background size. ### V. Position Atrribute #### 1. Position Element use itself as origin, independence on other element. ```css h1 { position: relative; top: 100px; left:100px } ``` ```top,left,right,bottom``` attr only work ewhen position is enable. #### 2. Absolute Find nearest father containing position and used them as origin reference. ```css .box{ width: 100px; height: 120px; background-color:black; position: relative; } .box-child{ width: 50px; height: 50px; background-color:black; position: absolute; top:; bottom; right; left; } ``` Top and left are prioritized. If remove widt, heght of child -> filter the father by change all top, left, right bot to 0. #### 3. Fixed Element depend on the browser window. ```css .box{ width: 100px; height: 120px; background-color:black; position: fixed; top:0; } ``` Box always sat on top when surfing window. May use left:0 and right:0 instead of width. #### 4. Sticky (trial) ```css .box{ width: 100px; height: 120px; background-color:black; position: -webkit-sticky; top:0; } ``` ### V. Tip & Tricks #### 1. Center text #### 1.1 Center horizontally Center horizontally ```css .box{ background-color:orange; height:100px; text-align:center; } .h3{ } ``` ```text-align``` is inherited css atr. -> can be use in both father and child #### 1.2 Center vertically Set line-height equal to father's height ```css .box{ background-color:orange; height:100px; line-height:100px; } .h3{ } ``` #### 1.3 Flex Use flex and margin ```css .box{ background-color:orange; height:100px; display: flex; } .h3{ margin: auto; } ``` Use align-items and justify-content ```css .box{ background-color:orange; height:100px; display: flex; align-items: center; justify-content: center; } .h3{ } ``` #### 1.4 Position and transform: translate ```css .box{ background-color:orange; height:100px; position: relative; } .h3{ position: absolute; top: 50%; transform: translateY(-50%, -50%); left: 50%; } ``` #### 2. Fallback image For img. ```htmlmixed <img onerror="this.src='/img/200x200.png'" src=""> ``` For div. ```htmlembedded <div></div> ``` ```css div{ width:200px; height:200px; background-image: url(), url(/img/200X200.png); background-repeat: no-repeat; background-size:100%; } ``` ### VI. The Band. #### 1. Analyze and name the element. 1. Header (the bar on top of website) 2. Navigation (The buttons and link, click to move to other webpage) 3. Breadcrum (the position bar to show where user in the website) 4. Sidebar (A bar on left or right of the webpage may contain several menu option - a type of navigation) 5. Slider (Bunch of runing image, leters running horizontally like testimonials) 6. Footer (the bar at the bottom of webpage, often use to place logo, information,) 7. Content (content in the middle of webpage) 8. Banner (Often picture want people to see as advert #### 2. Analyze the band 1. Header 2. slider 3. content 1. about 2. tour 3. contact 4. image 5. footer #### 3. Create base for website Create files, folder (assets/css/styles.css) ```htmlembedded <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="assets/css/styles.css"> </head> <body> <div id="main"> <div id="header"> </div> <div id="slider"> </div> <div id="content"> </div> <div id="footer"> </div> </div> </body> </html> ``` ```css * { padding: 0; margin: 0; box-sizing: border-box; } ``` #### 4. Header CSS