While the web was introduced to the public in the early 1990s, all websites were as boring as typical Word documents with no room for multimedia, let alone image assets. This all changed when another language called CSS was made available, paving way for more personalized web destinations.
We can activate this feature in our website by making a link between our index.html
and style.css
files:
We can now directly write in our style.css
to change the website presentation. Syntax is rather straightforward:
As you can see, each CSS rule follows a specific pattern: target name, followed by a series of semicolon-separated rules enclosed in braces. The target names coincide with the tags we have been creating in HTML, and we will talk about more specific ways to target elements down the road.
Where do we find all the CSS rules? You will start to remember a few frequently used rules by heart, but you can also find the comprehensive list here: https://www.w3schools.com/cssref/default.asp
https://drive.google.com/file/d/1VEv-680e-3YBvZinIIroAL7VKtt715fI/view?usp=drive_link
(Updated October 23, 2023)
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/style.css">
<title>My first website</title>
</head>
<body>
<img src="images/header.jpg" alt="Sky">
<h1>John Doe</h1>
<p>John Doe is a Toronto-based creative.</p>
<p>
<a href="http://google.com">Google</a>
</p>
</body>
</html>
body
{
background-color:#eeeeee;
text-align:center;
font-family:"Helvetica";
}
h1
{
letter-spacing:2px;
color:#00789f;
}
p
{
color:#000;
}
a
{
color:black;
}
img
{
width:400px;
}