CSS Workshop - Getting Started
This is a beginners introduction to writing CSS.
In todays world of the internet, having a styled website is key. By default a webpage has a style to it that is pretty basic and with CSS (Cascading Style Sheets) we can style websites to make them more appealing to look at.
In this tutorial workshop we will be going over how to write CSS in an HTML page. This article and video is the getting started tutorial on how to write a basic HTML page, include a CSS file, and start to begin writing styles.
HTML Index Page
Let's start off by creating an index.html page.
<!DOCTYPE html>
<html>
<head>
<title>Css Workshop</title>
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<h1>Title</h1>
<div class="green">Hello World</div>
<div class="green">Hello World 2</div>
<div>Getting Started</div>
</body>
</html>This is a basic html page that we use to link another file called styles.css
<link rel="stylesheet" href="./styles.css" />By including this in the head tag it will include this style sheet in our index.html webpage.
Then we have a few div tags that have class names on them.
First CSS class
.green {
background-color: green;
}By putting a dot in front of the CSS name it will treat that as a class. Then in our HTML when we write:
<div class="green">Hello World</div>It will style that div tag with the green class, making the background color green.
Next article we will go over some more style properties.