CSS formation





We use CSS to tell the browser how to format the HTML lines, according to our CSS lines.


We can place our CSS code, in three locations:


  • Internal CSS style tag
  • External CSS file (no tags)
  • Inline CSS (along with html line)

The most common way is to use external file or folder in the website main folder and internal CSS tag for some specific styling, we will explain each location and why to use it.







Part 1

Internal CSS


Internal CSS lines are placed inside the < style > tag as you can see in the example below, in this situation the CSS will ONLY controll this web page, we use internal CSS when we want to controll specific areas of specific pages.


Code Example:

                
                
                <!DOCTYPE html>
<html>
<head>
<style>
body { background-color: blue;}
p{ color: white;}
h1 { color: red;
  margin-left: 20px;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
                
                
            
Try yourself >>






Part 2

External CSS


It is best practice to use external CSS file for "global" controll of the web pages and internal CSS when we want to controll specific areas of specific pages, imagine you have 500 web pages, you can controll 500 side-bars or other page component from 1 CSS file, instead of editing 500 pages.


You must place a reference also called "link" to your global CSS folder / file to connect your Web page to the external css file.


Check the example below to understand how external CSS file works:


Code Example:

We created css file called HowTo.css (.css extension) inside learncss folder, it is now our global CSS file


the HTML web page receive the styling from the Global CSS file using link:


Notice there is no style tag or any CSS lines, the page receive the data from the global CSS file in the web folder.


                
                
                <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../learncss/HowTo.css" />
</head>
<body>
<h1>heading</h1>
<p>paragraph.</p>
</body>
</html>
                
                
            
Try yourself >>

Do not add any HTML tag inside the Global CSS file, here is example how it should look:


Code Example:

                   
                   body {
  background-color: blue;
}
p {
  color: white;
}
h1 {
  color: red;
  margin-left: 20px;
}
                 
                 






Part 3

Inline CSS


We will use Inline CSS style to controll single line or element


Here is example how to use Inline CSS:


Code Example:


                
                
                <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">heading</h1>
<p style="color:red; font-size:50px;">paragraph.</p>
</body>
</html>
                
                
            
Try yourself >>







Part 4

Avoid CSS Bugs


If you define style for specific property twice, for example in two location (In global CSS and Internal CSS files), or twice at the same CSS area, the value of the last read will be used.

Here is example:


Code Example:


We defined h1 and p twice, but the black color will be used, beacuse it is last read.


      
      
      <!DOCTYPE html>
<html>
<head>
<style>
body { background-color: green;}
h1{ color: white;}
h1{ color: black;}
p{ color: white;}
p{ color: black;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
      
      
  
Try yourself >>




The same applys to External and Internal CSS, the last read will be used (If the link to the CSS Global is above the < style > tags, the Internal CSS will be used.


Code Example:

The Interal CSS is placed below the Global CSS link, so the Internal will be used
If you remove the style tag Heading will be red and body will be blue (Global CSS color is red.)


      
      
      <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../learncss/HowTo.css" />
<style>
body { background-color: green;}
h1{ color: white;}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph.</p>
</body>
</html>
      
      
  
Try yourself >>








Enjoy this css3 tutorial, our main goal is to create platform that allow you to learn css for free, learn html and css easily.



Navigation