Techno

What is CSS in Website design ? | Make a website using HTML and CSS

CSS stands for the Cascading style sheet. CSS is used to design a website. You can create a website using HTML but without CSS used can't design a website. HTML only structures the website page and CSS design that structure. CSS is known a Stylesheet. You can say stylesheet only. The website should be attractive and feelable for visitors. CSS makes the website fully attractive and feelable. Whenever you are going to create a website you have to design differ from the millions of website. It is important that how to manage DOM by HTML HTML and design a website using CSS. You can design a website according to your need.


Syntax of CSS -

The syntax of CSS is very simple . CSS written under the style tag . The CSS syntax is---


<style>

CSS elements/Attributes goes here 
</style> 

<style>

The CSS <style> is known as opening CSS tag . Before create a CSS , Must open the style tag .

</style>

The CSS <style> is known as closing CSS tag . after complete the CSS you must close the style tag .

Types of CSS

There are three types of CSS to use under the HTML . CSS is known as cascading stylesheet that is used to design a webpage. Every HTML page includes CSS to design the website. There are three types of CSS using in HTML page.
1. Inline CSS

2. Internal CSS

3. External CSS

How to create a CSS for Website

As you know that CSS designs the website . HTML is used to manage the structure of website and CSS works on HTML . To make CSS you have to learn about the CSS elements .There are various CSS attributes or Properties availabe.
Create a CSS . 1. Open the Style tag .
2. Create Class name and Use the CSS elements(attributes ) .
3.Close the Style tag .
4. Use the div element to call the CSS class.

CSS in HTML


<!DOCTYPE>
<html>
<head>
<title>Simple CSS  </title>

<head>

Welcome to our Website

This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This is a paragraph.

</body> </head> </html>
Run

Design website header using CSS

CSS is used to design a website. Here you can see the three parts of design the website.

1. Website Header.

2. Website Body.

3. Website footer.

Website Header

Header is the top part of website . You can design the header using CSS .An example will show you the designing part of website header .

Website Header



<html>
<head>
<title>Header  </title>








Website content goes

</div> </body> </html>
Run

In the above example. We created the CSS under the Style tag . Under the Style tag , we have included the CSS attributes . Every attribute has a different effect on the website header.

After design the website when you have run on the Mobile device then you got a website is not visible proper. Here we have made the responsive the HTML structure using @meadia .Meadia is used to responsive a website



@media screen and (max-width: 500px) {

Now we will create the body part of a website. The body part can contain the contents (image, text, video, etc). Design the website main body using CSS.

Website body and Sidebar

Main Title

Time , Sep 2, 2017
Image 1

Write the long description here . About your business , About article , Write your thought .

TITLE HEADING

Time , Sep 2, 2017
Image

Small Text here

Write the long description here . About your business , About article , Write your thought

About Author

Image 2

Write about the author

Blog Post

Image1

Post Heading

Image2

Post Heading

Image3

Post Heading

Subscribe

Subscribe us .

Run

For example, we have designed the blog main body part. You can design them according to your need using the above example. If you want to remove something then search for code and remove it.

Create Website footer using CSS

Footer is the bottom part of website . A footer contains the links or about your website etc . You can design the website footer using CSS .

Website Footer using CSS


<!DOCTYPE>
<html>
<head>







</body>
</html>
Run

In this way you can design your website using CSS . The modification is a very easy process. Just go through the process.