2. BASIC ELEMENTS
<h1></h1>
<h3></h3> ...
<p></p>
<a href="youtube.com"></a>
<div></div>
<button>Click</button>
<img src="image_link">
<input type="text">
<br>
<!-- This is for comments, the
code will ignore this line -->
cmd + /
<p>This is a <br> line of text </p>
This is a
line of text
8. Basic styling for <a>
a {
color: red;
text-align: center;
font-size: 30px;
font-weight: bold;
font-style: italic;
text-decoration: none;
}
a {
color: black;
text-decoration: none;
}
default
9. Basic styling for <input>
<input
type="text"
placeholder="This will disappear when
u start typing"
>
index.html
input {
height: 40px;
width: 400px;
/* border: none; */
}
style.css
Input is self closing!!!
10. Styling <div> to make a container
.this_is_a_div {
width: 500px;
height: 400px;
background-color: red;
}
500px
400px
11. Styling <div> to make a container
.this_is_a_div {
width: 500px;
height: 400px;
border: 1px solid red;
border-radius: 20px;
}
500px
400px
12. How to create space for text
<input
type="text"
placeholder="This will disappear when u
start typing"
>
index.html
input {
height: 40px;
width: 400px;
padding: 30px;
}
style.css
before
after
13.
14. How to create space for text
<h1>Hello</h1>
<h2>huh</h2>
index.html
h1 {
margin-bottom: 100px;
}
style.css
before
after