# Day 2 [ HTML + CSS ]
### Day 1 Note: [Click Here](https://hackmd.io/@kaflenitish/ryBPfuxw9)
- Tue, May 17 2022
- Attributes in HTML5
- `<table>` tag is used in creating table. It is an important attribute. It represents the data in a tabular form.
- `<ul>` and `<ol>` tags are used to order elements. `<ul>` is used for unordered list and `<ol>` tag is used for ordered list.
- `<img>` tag is used to add an image. It's attributes are `src`, `alt`. It is a self enclosing tag.
Example:
```html
<img src="image.png" alt="this is a image" />
```
- `<div>` tag also known as division tag is used to make division of content in the web page.
It is great for grouping similar element as well as dividing elements as needed.
We can use large block and put it inside a div, and use that div with classes to style the entire block of elements.
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div title="tooltip text"> This tag will show tooltip </div>
<span> This is a span tag </span>
<div> This is a division tag </div>
</body>
</html>
```
- `<table>` Properties:
- `<thead>` → table header
- `<tbody>` → table body
- `<tr>` → rows
- `<td>` → columns
- Example: [Click Here](https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_test)
- `<button>` → creating a button
- `<input>` → create a element to ask a user for an input
- It can have attribute such as `type`, `value`, `placeholder`, `name`.
- `<select>` → provide options to the user using `option` attribute. It creates a dropdown button with multiple choice for the user. Other attributes include `value`, `name`, `id`, `class`.
- **FORM in HTML5**
- *Placeholder* → attribute that specifies a short hint for the expected value of an input field or text area.
- For break line, use block element such as `<div>` `<p>` as `<br>` is depreciated or not recommended.
```html
<body>
<div class = "form">
<div class = "name">
<label> First Name </label>
<input type="text">
<label> Last Name </label>
<input type="text">
</div>
<div class = "name">
<label>Select Gender</label>
<label> Male </label>
<input type = "radio" value= "Male"/>
<label> Female </label>
<input type = "radio" value= "Female"/>
</div>
<input type = "checkbox" value="">
<label> Password </label>
<input type="password"/>
<label> Phone Number </label>
<input type="number">
<input type = "date"/>
<label> Email </label>
<input type = "email"/>
<input type="submit" value = "Register"/>
<label> Country </label>
<select>
<option> USA </option>
<option> Nepal </option>
<option> Canada </option>
</select>
</div>
</body>
```
- **CSS in FORMS**
- For spaces, use margin and padding
- To select a class, you have to use a dot with the class name while you use # with the ids.
- You cannot apply width to the inline element.
```css
/*
This is a css file and css can be used with style attribute within HTML
*/
.form{
margin: 10px;
padding: 10px;
}
```
- *CSS Selectors* —> are used to select HTML elements that you want to apply style on.
There are class selectors, universal selector, grouping selectors and so on.
```css
/**
In this code, we used p element and applied style to it.
**/
p{
text-align: center;
color: blue:
}
/**
In the code below, we apply styles to the HTML element that has class.
For example, class="paragraph"
**/
.paragraph{
text-align: center;
color: purple;
}
/**
In this code, we used grouping selector to apply same style to a group.
**/
h1, h2, h3, p {
text-align : center;
color: red;
}
```
- **Questions & Answers:**
- Difference between display: inline vs inline-block vs block
| inline | inline-block | block |
| --- | --- | --- |
| displays an element as an inline element. | displays an element in an inline level block container | displays an element in a block |
| height & width will have no effect. | can use height and width | starts on a new line and takes whole width |
- *Inline CSS style has the highest priority over other style.*
If two CSS rules are target the same HTML element, then the first CSS rule take precedence over the second.
An Inline CSS has the highest priority and overrides the styles in the external style sheet. External style sheets have the least priority.
- **Resources**:
[HTML Color Picker](https://www.w3schools.com/colors/colors_picker.asp)
[Color Palettes for Designers and Artists - Color Hunt](https://colorhunt.co/)
[CSS Specificity](https://www.w3schools.com/css/css_specificity.asp)
Sign in with Wallet
Connect another wallet