HTML CSS:-

CSS stands for cascading style sheet.

CSS solves our lot of problems of styling we can make many styling webs only creating one style sheet. One style sheet can control multiple webs.

What is CSS?

CSS(cascading style sheet) is used for formatting of the web. We can make the layout of any web. With CSS you can control the size, color, background color of any text, you can change the text position, you can insert image, video in any web page. With CSS you can set the display of your web for different devices and so many other things you can control with CSS.

Using CSS:-

There are 3 ways adding CSS in HTML document.

  • Inline CSS:- Used in line of any web document using style attribute.
  • Internal CSS:- Used in internally in any HTML document using <style> attribute.
  • External CSS:- Used in other page but can link in HTML document using <link> attribute.

The most common use to use external CSS because this is the best solution for any problem. You can solve easily if any problem will be occur.

Inline CSS:-

Inline CSS used when you want to style only single HTML element.

This is very lazy way to style the web they can take a lot of time.

You can style any HTML element using style attribute in any HTML line.

In below example the <h1> heading text color will be red and the <p> paragraph text color will be green.


<!DOCTYPE html>

<html>

<body>

<h1 style="color:red;"> Hello World </h1>

<p style="color:green;"> Hi my name sami bhatti </p>

</body>

</html> 

Try this code for a better experience 


Internal CSS:-

Internal CSS defines the style of an single HTML page.

This is the best that used by many people in this way make a <style> tag in <head> section from here you can control all over the page.


<!DOCTYPE html>

<html>

<head>

<style>

body{background-color:gray;}

h1{color:green;}

p{color:yellow;}

</style>

</head>

<body>

<h1> This is heading 1 </h1>

<h1> This is also heading 1 </h1> 

<p> This is a paragraph we will change the text of this paragraph using internal CSS. </p>

<p> This is another paragraph we will also change the text of this paragraph same like above paragraph. </p> 

</body>

</html>

Try this code for a better experience 


External CSS:-

External CSS used for any HTML page using <link> attribute.

You can change style of any web page by using <link> attribute.


<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<h1> This is a heading </h1>

<p> This is a paragraph. </p>

</body>

</html>

Try this code for a better experience 


CSS Colors, Fonts and Sizes:-

In this topic we will discuss about the colors of CSS, fonts of CSS and also discuss the sizes of the text used in CSS about detail of this topic will discuss in CSS portion.

The CSS color family defines the color of any text or background.

The CSS font family defines the font of any text.

The CSS font size family defines the font size of any text.


<!DOCTYPE html>

<html>

<head>

<style>

h1{color:blue;

font-size:200%

font-family:verdana;

}

p{color:gray;

font-size:400%

font-family:courier;

}

</style>

</head>

<body>

<h1> This is a heading </h1>

<p> This is a paragraph in this we will change the text color, text font size and text font family. </p>

</body>

</html>

Try this code for a better experience 


CSS Border:-

The CSS border property defines the border of any HTML element.


<!DOCTYPE html>

<html>

<head>

<style>

p{border:2px solid blue;

}

</style>

</head>

<body>

<p> In this we will determine the border </p>

</body>

</html>

Try this code for a better experience 


CSS Padding:-

The CSS padding property will creat the space between text.


<!DOCTYPE html>

<html>

<head>

<style>

p{border:2px solid blue;

padding:50px

}

</style>

</head>

<body>

<p> In this we will set the padding between the text. </p>

</body>

</html>

Try this code for a better experience 


CSS Margin:-

The CSS margin property defines the margin outside the border.


<!DOCTYPE html>

<html>

<head>

<style>

p{border:2px solid gray;

margin:40px

}

</style>

</head>

<body>

<p> This is a paragraph in this we will set the margin. </p>

</body>

</html>

Try this code for a better experience