A quick run through on CSS:
CSS Stands for Cascading Style Sheet, and what it does, is to give a better structure and style to your HTML document, in the previous lesson, we used a<link> element to call an external style sheet that has been designed to be added to the HTML Document. Now CSS is not so different from your HTML syntax, in fact it’s similar and even easily implemented to HTML compared to other languages. in the sense that you can use HTML tags in CSS to style your HTML document,
CSS uses a left curly bracket after an element (an HTML element in CSS is called a selector) as it’s opening tag and a right curly bracket as its closing tag to contain all its syntax. Now css syntax is declared like this, first of all, you’ll have to declare an HTML element that the css will add styles to, after that is followed by a left curly bracket → “{” which opens up the content for css coding, then properties are added such as “color” followed by a colon →”:” then the value of the color →” black” followed by a semi-colon to end that property → “;” and finally after writing your whole code close the element by using a right curly bracket →”}”.

Example 1:


body {
color: black;
background-color: white;
}

In the above example, that’s the way a css declaration is structured. you’ll first need to insert your HTML element that you want the CSS to affect or you can declare your own tag by using the pound(“#”) or dot (.) signs before the declared group. the “#” sign is used in you HTML codes as “id” and the “.” sign is used in your HTML codes as “class” done like this:
CSS Document:


body {
color: black;
background-color: white;
}
#content{
font-family: Arial, Helvetica, sans-serif;
border: 1px;
border-color: black;
border-style: solid;
}
.header-title {
color: green;
}

HTML Document:


<html>
<head>
<title>Working with Style</title>
<link rel="stylesheet" type="text/css" href="somefolder/mystyles.css" />
</head>
<h1 class="header-title"> Including Styles</h1>
<body id="content" >
Some random text here
</body>
</html>

It will look like this on a browser

Including Styles

Some random text here

Wasn’t that easy? now that you have known how to implement CSS to your HTML document, note that css can also be added directly to your HTML documents known as inline styling or block styling, you don’t necessary have call your CSS from an external page. Confused? let me show you how.

Example 2:
HTML Document: Block-Styling using <style> element.


<html>
<head>
<title>Working with Style</title>
<style type="text/css">
body {
color: black;
background-color: white;
}
#content{
font-family: Arial, Helvetica, sans-serif;
border: 1px;
border-color: black;
border-style: solid;
}
.header-title {
color: green;
}
</style>
</head>
<h1 class="header-title"> Including Styles</h1>
<body id="content" >
Some random text here
</body>
</html>

HTML Document: Inline-Styling using any element tag with “style” attribute.


<html>
<head>
<title>Working with Style</title>
</head>
<h1 style="color: green;"> Including Styles</h1>
<body style="color: black;
background-color: white;font-family: Arial, Helvetica, sans-serif;
border: 1px;
border-color: black;
border-style: solid;" >
Some random text here
</body>
</html>

In both cases, it will look like this on your browser