HTML Only
HTML defines the content (the bones of your application).
Let's display a header element and a division element:
Notice that the header tag is increasing the font size and adding the bold font style. It's also adding a margin above and below the text.
Because of how old HTML is and its legacy, most of its elements have some kind of basic styles already attached to them that were used in older versions of HTML before CSS existed.
HTML defines the content (the bones of your application).
Let's display a header element and a division element:
<h1>HTML Only</h1>
<div>This is what basic HTML looks like</div>
<div>This is what basic HTML looks like</div>
Notice that the header tag is increasing the font size and adding the bold font style. It's also adding a margin above and below the text.
Because of how old HTML is and its legacy, most of its elements have some kind of basic styles already attached to them that were used in older versions of HTML before CSS existed.
HTML Only
This is what basic HTML looks like.
HTML + CSS
CSS defines the style and decor (skin and clothes).
You can get very complex with CSS, including adding animations, but for this example we'll make things a little prettier for both and override some of the header element's default styles.
Our CSS code:
Our HTML code:
CSS defines the style and decor (skin and clothes).
You can get very complex with CSS, including adding animations, but for this example we'll make things a little prettier for both and override some of the header element's default styles.
Our CSS code:
.styled_header {
margin: 5px 0px;
background-color: #90EACF;
border: 2px solid #70CAAF;
display: inline-block;
padding: 10px 10px;
border-radius: 25px;
font-size: 25px;
}
.styled_div {
background-color: #EEFFEE;
border: 2px solid #AADDAA;
width: 300px;
text-align: center;
padding: 30px 20px;
margin-left: 30px;
}
margin: 5px 0px;
background-color: #90EACF;
border: 2px solid #70CAAF;
display: inline-block;
padding: 10px 10px;
border-radius: 25px;
font-size: 25px;
}
.styled_div {
background-color: #EEFFEE;
border: 2px solid #AADDAA;
width: 300px;
text-align: center;
padding: 30px 20px;
margin-left: 30px;
}
Our HTML code:
<h1 class="styled_header">HTML + CSS</h1>
<div class="styled_div">This is HTML + CSS!</div>
<div class="styled_div">This is HTML + CSS!</div>
HTML + CSS
This is HTML + CSS!
HTML + CSS + JS
Javascript adds logic and interactions (the muscles).
Javascript can also get very complex, but for now, let's add a mouse-click event that changes the color of the background.
Our Javascript (JS) code:
Our CSS code:
Our HTML code:
Javascript adds logic and interactions (the muscles).
Javascript can also get very complex, but for now, let's add a mouse-click event that changes the color of the background.
Our Javascript (JS) code:
let colorChoice = 1;
function clk() {
const div = document.getElementById('div_js');
if(colorChoice == 1) {
div.style.backgroundColor = '#FFEEEE';
colorChoice = 0;
}
else {
div.style.backgroundColor = '#EEFFEE';
colorChoice = 1;
}
}
function clk() {
const div = document.getElementById('div_js');
if(colorChoice == 1) {
div.style.backgroundColor = '#FFEEEE';
colorChoice = 0;
}
else {
div.style.backgroundColor = '#EEFFEE';
colorChoice = 1;
}
}
Our CSS code:
.styled_header_js {
border: 2px solid #808080;
background-color: #90EACF;
padding: 10px 10px;
border-radius: 25px;
font-size: 20px;
}
.styled_div_js {
cursor: pointer;
background-color: #EEFFEE;
border: 2px solid #606060;
width: 420px;
text-align: center;
padding: 30px 0;
margin: 0 30px;
}
border: 2px solid #808080;
background-color: #90EACF;
padding: 10px 10px;
border-radius: 25px;
font-size: 20px;
}
.styled_div_js {
cursor: pointer;
background-color: #EEFFEE;
border: 2px solid #606060;
width: 420px;
text-align: center;
padding: 30px 0;
margin: 0 30px;
}
Our HTML code:
<h1 class="styled_header_js">HTML + CSS + JS</h1>
<div class="styled_div_js" id="div_js" onclick="clk();">Click Me!</div>
<div class="styled_div_js" id="div_js" onclick="clk();">Click Me!</div>
HTML + CSS + JS
Click Me!