Once you have a basic grasp of what CSS actually is, you need to be able to see it work. A great way to do that is to write and run your own CSS on your computer. This lesson assumes that you:
Have set up your workspace.
Are comfortable with basic HTML, and have completed the do-it-yourself project from the Basic HTML tutorial.
If you haven’t completed the Basic HTML tutorial, but you’re already comfortable with HTML, you can download the finished do-it-yourself project and be up to speed for this tutorial. All you need to do after downloading is unzip the file and move the Programming Tutorials folder you find inside to somewhere you'll remember.
Create the file
Follow these steps to create your first CSS stylesheet.
Open Sublime Text or Visual Studio editor.
Open the File menu and select New File.
You should see a new tab open in Sublime Text or Visual Studio editor labeled untitled.
Go back to the File menu and choose Save As.
Find your Programming Tutorials folder and double-click it.
Name your file styles.css and press the Save button.
You have now created an empty CSS stylesheet. Like the index.html file in your project, there isn’t anything fundamentally different about this file and a text file; the file extension is the only real distinction.
Also, just as index.html was a popular naming convention for the home page of a website, styles.css is a popular naming convention for the main stylesheet of a webpage. You could call it anything you wanted, but styles.css is a common choice.
Write your first CSS
Now that you have your empty styles.css stylesheet open in your text editor, you can write your first CSS. Type or copy the following into your empty stylesheet and save it:
p {
color: red;
}
This ruleset targets every <p> element on the page. We’ll talk about the color declaration more later on, but for now, all you need to know is that it’ll make your paragraph text red. However, before it can actually do that, your HTML document needs to know about your new stylesheet.
Connecting your HTML and CSS
Before your HTML and CSS can work together, the two files—index.html and styles.css—need to be connected to each other. Follow these steps to attach your CSS stylesheet to your HTML document:
In Sublime Text or Visual Studio editor, open your index.html file.
Find the <head> element. There should be nothing in there except for a <title> element right now.
Inside the <head> element, add this new element: <link rel="stylesheet" href="styles.css">
Like the other elements that go in the <head> element, the <link> element will not actually appear on the page. Instead, it defines a connection between two separate files using two HTML attributes:
rel: the rel attribute specifies the relationship between the two files. In this case, the relationship is “stylesheet” because the file you are linking is a CSS stylesheet.
href: like an <a> element, the <link> element also includes an href (hypertext reference) that points to the file you want to link. Because your files are all in the same folder, you can just use the name of the file to point to it. However, you could also use a full file path (C:\Users\You\styles.css) or a web address (https://yoursite.com/styles.css) if you had your styles.css file stored elsewhere.
View your webpage with CSS
Once you’ve added the <link> element inside the <head> element, save your index.html file and you can view your changes in your browser. Just follow these steps:
Open your Create a new file on your desktop
Open the new file
Open visual studio and ctrl+n for a new document
save the following text as the index.html file.
<html>
<head>
<title>
My first site
</title>
</head>
<body>
<h1>Cinema Classics Movie Reviews</h1>
<div>
<h2>Review: Basketball Dog (2018)</h2>
<img src="https://media.yourWebSite.org/global/coding/basketballdog.png">
<p><i>4 out of 5 stars</i>
<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p>
<p>This movie has everything you could ask for:</p>
<ul>
<li>Basketball</li>
<li>A dog</li>
<li>Nail-biting suspense</li>
</ul>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the <a href="https://edu.yourWebSite.org">Basketball Dog</a> website.</p>
<button>Show Next Review</button>
</div>
</body>
</html>
Creating a new css document ctrl+n for new document
copy the following code on the css document
p {
color: red;
}
save the file and name it styles.css
Navigate back to the index.html document and find the <title> tag</title>
paste the following code under the title tags
<link rel="stylesheet" href="styles.css">
save and then look at your code.
The file should open in your default web browser, but with red paragraph text. We'll change that back eventually, but for now, it should help us confirm that everything is working. First it looked like this, and now it should look more like this.
Congratulations, you just added CSS to your webpage!
<html>
<head>
<title>
My first site
</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Cinema Classics Movie Reviews</h1>
<div>
<h2>Review: Basketball Dog (2018)</h2>
<img src="https://media.yourWebSite.org/global/coding/basketballdog.png">
<p><i>4 out of 5 stars</i>
<p>From director <b>Vicki Fleming</b> comes the heartwarming tale of a boy named Pete (Trent Dugson) and his dog Rover (voiced by Brinson Lumblebrunt). You may think a boy and his dog learning the true value of friendship sounds familiar, but a big twist sets this flick apart: Rover plays basketball, and he's doggone good at it.</p>
<p>This movie has everything you could ask for:</p>
<ul>
<li>Basketball</li>
<li>A dog</li>
<li>Nail-biting suspense</li>
</ul>
<p>While it may not have been necessary to include all 150 minutes of Rover's championship game in real time, Basketball Dog will keep your interest for the entirety of its 4-hour runtime, and the end will have any dog lover in tears. If you love basketball or sports pets, this is the movie for you.</p>
<p>Find the full cast listing at the <a href="https://edu.yourWebSite.org">Basketball Dog</a> website.</p>
<button>Show Next Review</button>
</div>
</body>
</html>
p {
color: red;
}