What is CSS, An Introduction to Style Sheets

what-is-css-introduction

What is CSS, Introduction

As we know we create web pages in HTML actually HTML is used to create basic structure for web page. We can say we can draw a simple pencil sketch of web page with HTML but to make it more colorful and attractive we need to use CSS. So what is CSS actually its Makeup for your website, as human use makeup to make face beautiful and attractive in same way websites use CSS to look pretty. CSS stands for (Cascading Style Sheets). I mean you can use CSS to make a better and beautiful look of web page. You can set colors for different controls using css colors and size to fit in a specific part of webpage. Also you can make responsive web pages to fit in any display size.

 

Everything related to sizing and styling is programmed and configured by CSS. We can access HTML elements and tags from CSS and can apply effects and styles to HTML documents. We can also target HTML elements from CSS using class and ID attributes of any HTML tag. Website Designers have their own way to write CSS but there are main three ways to add CSS to HTML document.

 

  • External Style Sheet
  • Internal Style Sheet
  • Inline Style

 

If we have a smaller website project then we can use Internal Style Sheet or we can use Inline Style Sheet. But if we have a larger project then its recommended to use External Style Sheet CSS.

 

 

External Style Sheet CSS

What is external style sheet? If you are using External Style Sheet you can change look and style of your entire website just by changing one file. What you need to do is just include reference to every webpage of CSS file. Below is the syntax how to add external style sheet in website.


<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

 

Always include all references to your head tags before body tag. Here in this example we added a reference of our external style sheet file by including its path as a link.

 

Internal Style Sheet

 What is Internal Style Sheet ? While using internal style sheet you can give a unique style to every single page of your website. if you want to choose different style for every page of your website then Internal Style Sheet is useful for you.


<head>

<style>

body {

background-color: red;

}

 

h1 {

color: blue;

margin-left: 40px;

}

</style>

</head>

This is an example of internal CSS which we can use in head tag. Just we need to place style tag and after it we can write CSS right after style tag. In this example we used selectors like H1 and body. By these selectors we can target our CSS elements.

 

Inline Style CSS

 Sometime we have to unique style a single element from a document. For this purpose we use inline CSS its rarely used because usually all web pages have same formatting for a whole website to look similar.


<h1 style="color:blue;margin-left:50px;">This is a heading.</h1>

while using inline CSS we can add a style tag inside of main tag and then we can assign CSS properties to related element.

 

We will use CSS in HTML project where we will create a complete HTML website project. If you like our tutorial please share with your friends.

I hope now you can easily understand what is CSS? and How to use CSS.

Related Posts

Share with friends