HTML Styles- CSS

CSS stands for Cascading Style Sheet. It monitor the layout of several webpages, developer can write it once and can use it in several webpages.CSS allows to control the styling features of webpage like color, font, background, screen sizes and many more.

The CSS is basically a styling sheet which controls the layout of a webpage, the word Cascading means that if we apply a style to parent element than it will also be applied to children element.

Styling HTML with CSS

CSS can be added in Html documents in three different ways:

  • Inline: Style attribute is written within the html tag
  • Internal: Style element is used in head section
  • External: link element is used to link html document with external CSS file.

External CSS is mostly commonly used by developer because it can be reused whenever needed in multiple html documents by embedding it with particular html document.

Inline CSS

Inline CSS is used to add a specific style to a single HTML element. In inline CSS style attribute is written within relevant html element tag.

<p style="color:red;font-size:40px;background-color:blue">The style attribute is written within paragraph tag so its inline</p>
CSS

Internal CSS

As Inline CSS is used for a specific html element the internal CSS is used for a single html document. An internal CSS is defined within the same document but the <style> is written in head tag of html page.

Either the id attribute is set in the specific element and than by that id we can do styling of that html element or directly we can write the element name let see the example to get it more clearly.

	<!DOCTYPE html>
<html>

<head>
<style>
body
{
background-color: purple
}
#para{
      width:70%;
      text-align: center;
      height: 105px;
      background-color: pink;
	  }
</style>
</head>

<body>
<h1>Internal CSS Example</h1>
<p id="para">This is known as internal CSS because the style is written within same document in head tag</p>
</body>

</html>

External CSS

In External CSS an external style sheet is designed to define the style of html page and that is external sheet is linked with tag html page in which we want to use it.

The external CSS file will have .css extension and will be included in html page using <link> tag in head section.

Styles.css

body
{
background-color: Blue
}
#para{
      width:70%;
      text-align: center;
      height: 105px;
      background-color: #28a745;
}
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>External CSS Example</h1>
<p id="para">Welcome to tutorials art</p>
</body>

</html>

External CSS Example

Welcome to tutorials art

In the above code the rel attribute is used to tell the type of file we want to attach and in href attribute file name of file we want to link is given.

You can visit https://www.tutorialsart.com/css-syntax/ to learn more about CSS Syntax.