HTML Css

What actually CSS is?

It stands for Cascading Style Sheets.

CSS is used in HTML to describe how HTML elements are to be displayed on a browser or in any media.

CSS helps in controlling the layout of multiple web pages at the same time, thus works effectively in saving a lot of work of managing the layout of each web page individually.

CSS is added to HTML elements in three ways. These are:

● Inline

● Internal

● External

The easiest way to add CSS is to store the External stylesheets in separate CSS files.

Here, we will Inline CSS, Internal CSS, and External CSS

Inline CSS

Inline CSS is used to define the unique style to an HTML element. For this, style attribute of an HTML element is used.

It helps you to determine how you want to display HTML elements on screen.

Example:

<h1 style="color:green;"> It displays the heading in green color</h1>

Internal CSS

Internal CSS is used to define a style to a single HTML page. It is defined in the<head> section of HTML document within a style attribute.

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: yellow; }
h1 { color: blue; }
p { color: red; }
</style>
</head>
<body>

<h1>It displays the heading in blue color</h1>
<p>It displays a paragraph in red color</p>

</body>
</html>

External CSS

External CSS is used to define a style to multiple HTML pages.

When you want to change the look of a complete website, you just need to change one file using an external style sheet.

It is defined in the<head> section of HTML page, where you can add a link to an external style sheet.

Example:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css">
</head>
<body>

<h1>It displays the heading in blue color</h1>
<p>It displays a paragraph in red color</p>

</body>
</html>

You can write an external style sheet in any text editor as per your choice. Also, make sure that this file should not include any kind of HTML code and should be saved using .css extension.

Here is the content included in styling.css file

body
{
background-color: yellow;
}

h1
{
color: blue;
}

p
{
color: red;
}

CSS Fonts

To the specific color to the text, CSS color property is used.

To define the font type, CSS font-family property is used.

To define the size to the text, CSS font-size property is used.

This example includes all these CSS properties to help you to understand them in a better way.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body { background-color: yellow; }
h1 { color: blue; font-family: cambria; font-size: 200%; }
p { color: red; font-family: calibri; font-size: 130%; }
</style>
</head>
<body>

<h1>It displays the heading in blue color</h1>
<p>It displays a paragraph in red color</p>

</body>
</html>

CSS Border

To define a border around an HTML element, CSS border property is used.

Example:

p
{
border: 1px solid green;
}

CSS padding property is used when you want to define a space between the text and the border.

Example:

p
{
border: 1px solid green;
padding: 20px;
}

CSS margin property is used when you want to define a space outside the border.

Example:

p
{
border: 1px solid green;
margin: 20px;
}

Keep in mind that each CSS property is always defined within a style attribute.