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.
<h2>HTML Index Page</h2>
Let's start off by creating an index.html page.
<pre><code class="hljs language-html">&#x3C;!DOCTYPE html>
&#x3C;html>

&#x3C;head>
 &#x3C;title>Css Workshop&#x3C;/title>
 &#x3C;link rel="stylesheet" href="./styles.css" />
&#x3C;/head>

&#x3C;body>

 &#x3C;h1>Title&#x3C;/h1>
 &#x3C;div class="green">Hello World&#x3C;/div>
 &#x3C;div class="green">Hello World 2&#x3C;/div>
 &#x3C;div>Getting Started&#x3C;/div>

&#x3C;/body>

&#x3C;/html></code></pre>
This is a basic html page that we use to link another file called styles.css
<pre><code class="hljs language-html">&#x3C;link rel="stylesheet" href="./styles.css" /></code></pre>
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.
<h2>First CSS class</h2>
<pre><code class="hljs language-css">.green {
 background-color: green;
}</code></pre>
By putting a dot in front of the CSS name it will treat that as a class. Then in our HTML when we write:
<pre><code class="hljs language-html">&#x3C;div class="green">Hello World&#x3C;/div></code></pre>
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.

This is a beginners introduction to writing CSS.

CSS Workshop - Getting Started

This course requires a subscription to view