First steps with CSS
In this part of the course we are going to see what is CSS and how useful it is.
So HTML is here in order to provide simple and semantic for your web page, CSS is here for the style.
In fact CSS stands for "Cascading Style Sheets".
You can either decide to include your CSS directly within the page with <style></style> itself or through a link to another page with <link rel="stylesheet" href="/file.css">.
Initially our web page was:
with the following source code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<meta charset="UTF-8">
</head>
<body>
<div align="center">Current bitcoin price is (source Bitfinex):</div><br>
<div
align="center"><form>Satoshis:<input type="number" name="satoshis"><br>
<input type="submit" value="Convert"><br>
US dollars:<input type="number" name="usdollars"></form></div><br>
<h1
align="center">What is the Satoshi to US dollar online converter?</h1>
<p align="center">The idea of this project is to offer you the possibility to get the price of a satoshi directly.</p>
</body>
</html>
with CSS it looks like:
and a source code like:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title></title>
<meta charset="UTF-8">
<style>
body {
font-family: "Arial";
background-color: lightblue;
text-align:
center;
}
h1 {
color: blue;
}
#bitcoinprice {
color: green;
}
</style>
</head>
<body>
<div
align="center">Current bitcoin price is (source Bitfinex):</div><div id="bitcoinprice">10,254</div><br>
<div align="center"><form>Satoshis:<input type="number" name="satoshis"><br>
<input
type="submit" value="Convert"><br>
US dollars:<input type="number" name="usdollars"></form></div><br>
<h1 align="center">What is the Satoshi to US dollar online converter?</h1>
<p align="center">The
idea of this project is to offer you the possibility to get the price of a satoshi directly.</p>
</body>
</html>
Ok, ok, it is not a masterpiece, as previously mentioned within the course, a lot of things are far from being perfect (some HTML tags are used such as the align attribute whereas it should be CSS, the doctype is not the right one...) but at least you understood what CSS is about and that's the most important. A better HTML page corrected by my colleague Lukas will be provided during the course. I promise.
Ok now let's see how to make the web page interactive with JavaScript.