Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

HTML – CSS

CSS Stands for Cascading Style Sheet which helps in controlling the styling of a webpage and have the efficiency to control multiple pages styling from one place. 

With CSS, we can control anything like color, font, background color, size, the spacing between two content. Also, we can control different styling for different screen sizes using media queries.

CSS file is defined with extension as .css.

CSS can be added to any of the HTML document using three ways:-

  • Inline Styling
  • Internal Styling
  • External Styling

Inline Styling

Whenever we want to target only single element styling, use inline styling. It uses style attribute with it. The following example sets text color to white and background color of the paragraph <p> to green.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>
Page title goes here</title>
</head>
<body>
   <p style:"color: white; background-color: green;">This is heading with green background. By using Inline styling.</p>

</body>
</html>

Internal Styling

An internal styling is used whenever we want to target only single page. It is defined within the style tag in head tag. The following example sets background color to blue and text color to white of heading <h1>.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>
Page title goes here</title>
   <style>
	h1{ color: white; background-color: blue;  }
   </style>
</head>
<body>
   <p>Using internal styling</p>
</body>
</html>

External Styling

External styling is used whenever we want to target multiple pages. It is defined within the link tag in head tag.

Example:

<!DOCTYPE html>
<html>
<head>
   <title>
Page title goes here</title>

   <link rel="stylesheet" href="file-path/style.css">
</head>
<body>
   <h1 class="external_style_h1">This is your heading line.</h1>
   <p class="external_style_p">Using external styling.</p>
</body>
</html>

The external style sheet is preferred as it targets the whole page by making changes from a single file and that is your style sheet which can be written in any editor. To save a style sheets we always use .css extension.

Let’s create a style sheet.

style.css

h1{
   color: red;
   font-weight:bold;
}
p{
   color: green;
   font-size: 14px;
}

In the above mentioned style.css file, code is written to give style to the HTML elements.


Some common CSS styling properities:-

Let’s create a common HTML webpage for all the styling properties and then we move one-by-one.

Input:

<!DOCTYPE html>
<html>
<head>
   <title>
This is document title</title>

   <link rel=”stylesheet” href=”file-path/style.css”>

</head>

<body>
   <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy </p>
</body>
</html>

CSS Font Family: This CSS property is used to change the font-family of any of the content within the webpage.

“style.css” file input is as following:

p{ font-family: verdana; }

Output:


CSS Font Size: This CSS property used to change the font-size of any of the content within the webpage.

“style.css” file input is as following:

p{ font-size: 40px; }

CSS Border: This CSS property used to provide a border to any of the elements within a webpage.

“style.css” file input is as following:

p{ border: 1px solid #000; }

CSS Padding: This CSS property used to provide space between the text and the border within a webpage.

“style.css” file input is as following:

p{ border: 1px solid #000; padding: 10px; }

CSS Margin: This CSS property used to provide space outside the border within a webpage.

“style.css” file input is as following:

p{ border: 1px solid #000; margin: 20px; }