Introduction to CSS

CSS (Cascading Style Sheets) is a style sheet language that is used to style HTML documents. To use CSS you need to have an HTML file.

Create a new CSS file

I will use Visual Studio Code to do this. If you want to install it, read this post. Click File and then New File

Introduction to CSS, <span>Introduction to CSS</span>, KandZ

It is good to save the file at the beginning, that helps Visual Studio Code understand what kind of file it is, and then will be available code autocomplete. As you see the file is untitled and cannot understand what h1 is.

Introduction to CSS, <span>Introduction to CSS</span>, KandZ

Press Ctrl + S, choose the filename (should have css extenstion, for example, style.css) and then click Save. Now you can see that h1 is recognized and if you put your mouse over h1 that has a line under you will see some information.

Introduction to CSS, <span>Introduction to CSS</span>, KandZ

CSS rule

CSS rule is a selector and a property, separated by curly braces.

Introduction to CSS, <span>Introduction to CSS</span>, KandZ

h1 is the selector and tells which HTML element will be affected. If you are new to HTML read this post.

color is the property and defines the style. blue is the value for this property. : separates the property and the value. ; should be at the end of the line. The selector can have more than one property and that is why we use ; to separate them.

h1{
color: blue;
}

Load a CSS file

If you want to load a CSS file so you can style an HTML file then you need to use the <link> tag. Let’s say you have this simple HTML file:

Introduction to CSS, <span>Introduction to CSS</span>, KandZ

If you load this file on a Web Browser you will see:

Introduction to CSS, <span>Introduction to CSS</span>, KandZ

Now load the css file:

<link rel="stylesheet" href="style.css">

Introduction to CSS, <span>Introduction to CSS</span>, KandZ
Introduction to CSS, <span>Introduction to CSS</span>, KandZ
This is the output.

Comments

Introduction to CSS, <span>Introduction to CSS</span>, KandZ
Introduction to CSS, <span>Introduction to CSS</span>, KandZ

THE END!!!

82790cookie-checkIntroduction to CSSIntroduction to CSS

Related posts

2 Thoughts to “Introduction to CSS

Comments are closed.