CSS Tutorial || Introduction

author
January 27, 2024
Introduction to CSS



  • CSS stands for Cascading Style Sheet.
  • CSS is an extension of basic HTML that allows you to style your web pages.
  • External stylesheets are stored in CSS files




  1. <!DOCTYPE>  

  2. <html>  

  3. <head>  

  4. <style>  

  5. h1{  

  6. color:white;  

  7. background-color:red;  

  8. padding:5px;  

  9. }  

  10. p{  

  11. color:green;  

  12. }  

  13. </style>  

  14. </head>  

  15. <body>  

  16. <h1>hello!</h1>  

  17. <p>This is Paragraph.</p>  

  18. </body>  

  19. </html>  



Result


hello!


This is Paragraph.




CSS Syntax







Selector
 It indicates the HTML element you want to style. It could be any tag like <p>, <title> etc.
Declaration
Each declaration includes a CSS property name and a value, separated by a colon.


  1. color: red;
  2. font-size: 10 px;

Property
 A Property is a type of attribute of HTML element. It could be color, border etc.

Value
 Values are assigned to CSS properties. In the above example, value "red" is assigned to color property.

Insert CSS

three ways of inserting a style sheet

  1. External CSS

  2. Internal CSS

  3. Inline CSS
1.External CSS

External styles are defined within the <link> element, inside the <head> section

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

<h1>heading</h1>
<p>paragraph1.</p>

</body>
</html>

An external style sheet can be written in any text editor, and must be saved with a .css extension.

mystyle.css

body {
  background-color: red;}

h1 {
  color: blue;
  margin-left: 20px;}

2.Internal CSS

Internal styles are defined within the <style> element, inside the <head> section of an HTML page

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: red;}

h1 {
  color: blue;
  margin-left: 20px;}</style>
</head>
<body>

<h1>heading</h1>
<p>paragraph1.</p>

</body>
</html>

3.Inline CSS

Inline styles are defined within the style="" attribute of the relevant element

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;font-size:122px">heading</h1>
<p style="color:red;">paragraph.</p>

</body>
</html>