ckportfolio.com - Website Styling via CSS

Website Styling via CSS

Stylesheet

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:

Syntax

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

Screencast Recording

https://drive.google.com/file/d/1VEv-680e-3YBvZinIIroAL7VKtt715fI/view?usp=drive_link

(Updated October 23, 2023)

Code Sample: HTML

<!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>

Code Sample: CSS

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;
}
Fin