CSS: Introduction

What is CSS

CSS stands for Cascading Style Sheets. It describes how HTML elements are to be displayed including the design, layout and variations in display for different devices and screen sizes.

Take a look at this block of code. We have here a paragraph and a CSS code

<style>
p {color: blue; background-color:gray;}
</style>
<p>Sample Text</p>

This is how it would look like.

Sample Text

Adding CSS

There are 3 ways to insert a CSS.

• External

  You need to create a .css file and add a link inside you HTML head using:
  <link rel="stylesheet" href="filename.css">

• Internal

  The example above is an internal CSS. The <style> </style> is inserted inside the HTML head, and the css is inserted inside the style element

• Inline

  Inline styles are defined within the "style" attribute of the relevant element. For example:
  <p style='color: blue; background-color:gray;'>Sample Text</p>

CSS Syntax

A CSS code is made up of selectors and declarations. And a declaration is made up of property and value seperated by a colon :. For a selector with multiple declaration, you need to seperate each declaration with a semicolon ;

Take this block of code for example. The selector is p, the property is color, and the value is red

p {
color: red;
}


This CSS code will turn all <p> elements in your webpage into red color

CSS Selectors

There are 5 types of CSS Selectors

Type	Definition	Example
Universal	Selects all elements	* {...}
Type selector	Selects all elements that have the given node name	input {...}
Class selector	Selects all elements that have the given class attribute	.classname {...}
ID selector	Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document	#idname {...}
Attribute selector	Selects all elements that have the given attribute.	a[href*="example"]{...}

Cheat sheet

There are HUNDREDS of CSS properties and even the best developers cant memorize them all. So here is a handy guide from websitesetup.org to help you

CSS Exercise

Take your HTML code from the previous code and let's add CSS to it.

For new learners, copy this code below

Now apply the following CSS. Feel Free to modify the values and experiment.

* {
margin: 0;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
header {
background-color: aqua;
padding: 10px;
}
h3 {
text-align: center;
font-size: 50px;
}
ul {
text-align: center;
background-color: #333;
padding: 10px;
}
li {
color: white;
display: inline;
padding: 10px;
}
a {
text-decoration: none;
color: rgb(255, 255, 255);
}
a:hover {
color: #00f38e;
}
article {
height: 200px;
padding: 30px;
}
footer {
background-color: #ccc;
padding-top: 1rem;
padding-bottom: 1em;
text-align: center;
}