Skip to main content Skip to docs navigation
Views 389

css-introduction

Advertisments

CSS is the language we use to style a Web page.

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

Example: 

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

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

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!


CSS WITH HTML FILE
Save the below file with index(dot)html

<!DOCTYPE>  
<html>  
<head>  
<style>  
h1{  
color:white;  
background-color:red;  
padding:5px;  
}  
p{  
color:blue;  
}  
</style>  
</head>  
<body>  
<h1>Write Your First CSS Example</h1>  
<p>This is Paragraph.</p>  
</body>  
</html>

Types of CSS 

There are 3 types of css

  1. Inline CSS

  2. Internal CSS

  3. External CSS

Inline CSS

We can apply CSS in a single element by inline CSS technique.
The inline CSS is also a method to insert style sheets in HTML document. This method mitigates some advantages of style sheets so it is advised to use this method sparingly.
If you want to use inline CSS, you should use the style attribute to the relevant tag.

Example of Inline Css
<h2 style="color:red;margin-left:40px;">Inline Css Are used inside the html tag with style attribute</h2>  
<p>This paragraph is not affected.</p>

Disadvantages of Inline CSS
 

  • You cannot use quotations within inline CSS. If you use quotations the browser will interpret this as an end of your style value.
  • These styles cannot be reused anywhere else.
  • These styles are tough to be edited because they are not stored at a single place.
  • It is not possible to style pseudo-codes and pseudo-classes with inline CSS.
  • Inline CSS does not provide browser cache advantages.

Internal CSS 

The internal style sheet is used to add a unique style for a single document. It is defined in <head> section of the HTML page inside the <style> tag.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
body {  
    background-color: linen;  
}  
h1 {  
    color: red;  
    margin-left: 80px;  
}   
</style>  
</head>  
<body>  
<h1>The internal style sheet is applied on this heading.</h1>  
<p>This paragraph will not be affected.</p>  
</body>  
</html>

External CSS

The external style sheet is generally used when you want to make changes on multiple pages. It is ideal for this condition because it facilitates you to change the look of the entire web site by changing just one file.
It uses the <link> tag on every pages and the <link> tag should be put inside the head section.

<head>  
<link rel="stylesheet" type="text/css" href="style.css">  
</head>

The external style sheet may be written in any text editor but must be saved with a .css extension. This file should not contain HTML elements.

Save This file as "style.css" 
body {  
    background-color: lightblue;  
}  
h1 {  
    color: navy;  
    margin-left: 20px;  
}

 

Comments