CSS Project – Burning Candle

In this project, you will learn to create a burning candle with flame with the help of HTML and CSS.

HTML Code: burning-candle.html

<!DOCTYPE html>
<html>
<head>
     <title>CSS Project - Burning Candle</title>
</head>
 <body>
     <div id="flame">
     </div>
     <div id="flamestick"></div>
     <div id="candle">
     </div>
 </body>
 </html>

CSS Code: burning-candle.html

Now we will insert the following CSS code in the <head> section of the HTML page – burning-candle.html.

<style>
body {
     background-color:black;
 }
 #flame{
      background-image:linear-gradient(to top,red,orange,beige);
      width: 80px;
      height: 200px;
      position:absolute;
      top:100px;
      left:500px;
      border-radius:75%;
      box-shadow: 10px 10px 60px 20px #cccc00;
      animation-name: bigflame;
      animation-duration: 4s;
      animation-delay:2s;
      animation-iteration-count:infinite;
      }
 @keyframes bigflame{
  0% {
       height: 200px;
       width: 80px;   
     }
 20% {
       height: 210px;
       width: 90px;   
     }
 30% {
       height: 230px;
       width: 90px;   
     }
 50% {
       height: 250px;
       width: 95px;   
    }
 70% {
       height: 230px;
       width: 90px;   
     }
 100% {
       height: 210px;
       width: 90px;   
     }
  }
 #candle {
         width:150px;
	 height:250px;
	 background-image:linear-gradient(to top,black,gray,lightgray,orange);
	 position:absolute;
	 top:325px;
	 left:470px;
     }
#flamestick{
        width:10px;
	height:40px;
	background:black;
	position:absolute;
	top:290px;
	left:540px;
	opacity:90%;
     }
</style>

The entire page will look like the following.

Whole Program Code

<!DOCTYPE html>
<html>
<head>
     <title>Lamp - Diya</title>
     <style>
     body {
         background-color:black;
     }
     #flame{
 
         background-image:linear-gradient(to top,red,orange,beige);
         width: 80px;
         height: 200px;
         position:absolute;
         top:100px;
         left:500px;
         border-radius:75%;
         box-shadow: 10px 10px 60px 20px #cccc00;
         animation-name: bigflame;
         animation-duration: 4s;
         animation-delay:2s;
         animation-iteration-count:infinite;
       }
 @keyframes bigflame{
  0% {
   height: 200px;
   width: 80px;   
 }
 20% {
   height: 210px;
   width: 90px;   
 }
  30% {
   height: 230px;
   width: 90px;   
 }
 50% {
   height: 250px;
   width: 95px;   
}
 70% {
   height: 230px;
   width: 90px;   
 }
 100% {
   height: 210px;
   width: 90px;   
 }
 
 }
 #candle {
 
     width:150px;
	 height:250px;
	 background-image:linear-gradient(to top,black,gray,lightgray,orange);
	 position:absolute;
	 top:325px;
	 left:470px;
}
#flamestick{

    width:10px;
	height:40px;
	background:black;
	position:absolute;
	top:290px;
	left:540px;
	opacity:90%;
}
</style>
 </head>
 <body>
         <div id="flame">
         </div>
         <div id="flamestick"></div>
         <div id="candle">
         </div>
 </body>
 </html>

Output : burning-candle.html

Output-CSS Project Burning-Candle
Output-CSS Burning-Candle

CSS Fonts In-Depth

Fonts define the typography of a web page or website. The font has certain properties that you can control using CSS. In other words, CSS can change the typography of a website directly.

In this article, you will learn about fonts, the characteristics of the font, font-families, and properties that can be changed using CSS in detail.

What are the features of a font?

In typography, a font is a typeface with specific style, size , spacing and weight. You can describe a font using its features.

Font-features
Font-features

Here is a list of features shown in the above diagram.

  • Cap Height is also known as the overall height of the capital letter.
  • Ascender is the upward length of the letters like b, k, l.
  • Descender is the downward length of the letters like q, g, y.
  • X-height is the height of the letters without ascender or descender.
  • The counter is the space inside the letter like q, p, o.
  • A baseline is the line that touches descender.

There are two more properties of a font.

  1. Leading – it is space between two lines of text or sentences. CSS usually control these with line-height property.
  2. Kerning – it is space between two letters in a word. CSS controls this property using letter-spacing property.

What is a font-family?

Any change in the features of a font and the font will start looking different. That is why, there are so many font types. Fonts looking similar can be grouped into font familiy, then we can easily identify them.There are two types of font families.

Generic families

The members of generic font families look similar. They have one unique feature than separates them from other families.

For example,

  • Sans-serif fonts
  • Monospace fonts
  • Cursive fonts

Each of the above types are different in their look and they are font families by themselves, but generic in nature.

Font Family

The second type of font family differentiate fonts based on specific features like height, letter spacing, boldness, but also retains the properties of generic family.

for example,

Sans-serif is a generic font family. The Ariel, Helvetica, and Verdana font family belong to Sans-serif.The features of Ariel, Helvetica and Verdana is different except that they retain the generic Sans-serif characters and letters.

Difference between Serif and Sans-serif fonts

The serif fonts and sans-serif fonts are the two popular types of fonts used in print and web. The other types are monospace and cursive fonts.The cursive types represent handwritten text or some stylish fonts. The monospace font has letters with equal space.

Difference between Sans-Serif and Serif Fonts
Difference between Sans-Serif and Serif Fonts

How CSS control Fonts ?

The CSS commands and properties control the look and feel of the web typography. It control the font and font properties in the HTML document.CSS uses following properties to control web typography.

  • Font-family
  • Font-style
  • Font-size
  • Font-weight
  • Font-variant

Font-Family

CSS font-family will set the font family of the web page that use the CSS style. It  works on a fallback mechanism, meaning it takes multiple values and if web page cannot use a font, fallback to another font type.

Example for font-family:

h3 {
     font-family: Ariel, Helvetica, sans-serif;
}

In the above example, Ariel is rendered by the web page, if not fall back to Helvetica or any other font type that belong to Sans-serif. Hence, it is a good practice to add a generic font-family.

Font-Style

The font-style property decides how to display the text and there are three options.

  1. normal
  2. oblique
  3. italic

For example, suppose we are changing font-style of a paragraph to oblique.

p  {
     font-style: oblique;
}

You can change the style of a header and display it in italic.

h2{
     font-style: italic;
}

Font-Size

This property is the most popular property used by web designers. The font-size changes the size of the font rendered on the web page.

There are three ways to set values for font-size.

  1. px
  2. em
  3. %

We will demonstrate each one of them.

h1 {
     font-size: 14px;
}
h2{
     font-size: 10em;
}
h3{
     font-size: 5%;
}

The percentage (%) take relative percentage size to its parent container. If the parent container length is 100px; then the 5% of 100px will be 5px.

Font-weight

Sometimes you want to set the boldness for your font. The font-weight property would do that for you.It takes following values.

  1. Normal
  2. Bold
  3. numeric values such as 300, 400, 700.

For example,

h1{
     font-weight: bold;
}

The resultant header text would appear slightly bolder than normal.

Font-variant

This property renders a different version of text than normal. Though the normal text is also a value for the font-variant property.

The font-variant takes the following values.

  1. normal
  2. small-caps

Suppose a paragraph is written with caps and small letters. The different variant of the paragraph would be small caps if we use the following CSS command.

p {
     font-variant: small-caps;
}

Thus, the CSS font property gives a powerful and extensive control over the web typography.

CSS Padding

The padding is the closest property to an HTML element in the box model. The padding gives some space around the HTML element, just like margin which given space around element from outside. There are 4 padding to an HTML element.

  1. padding-top
  2. padding-right
  3. padding-bottom
  4. padding-left
CSS Padding Property
CSS Padding Property

The syntax to specify padding is as follows.

p{
     padding-top:10px;
     padding-right: 25px;
     padding-bottom:40px;
     padding-left: 80px;
}

Shorthand for padding property

The above code is very difficult because you need to specify all sides one at a time. A much simple version of padding is allowed in CSS.

p{
     padding: 10px  29px  55px 40px;
}

The above will set the padding for all four side and it is same as below.

padding-top: 10px;
padding-right: 29px;
padding-bottom:55px;
padding-left: 40px;

There is other ways to set the padding. For example, we could use only two values.

p{
     padding: 10px 30px;
}

The above code use only two values and it is same as below.

padding-top: 10px;
padding-right: 30px;
padding-bottom:10px;
padding-left: 30px;

You could also set a single value for all four sides.

padding: 10px;

Effect of Padding

You can understand the effect of padding with an example. Create an HTML page called example-padding.html and insert the following code.

<!DOCTYPE html>
<html>
<head>
     <title>CSS Padding</title>
     <style>
     .box1{
          width:50%;
          border: 2px solid darkred;
          padding:0px;
     }
     .box2{
          width:50%;
          border: 2px solid darkred;
          padding:0px;
     }
     </style>
</head>
<body>
     <h3>Paragraph - without padding</h3>
     <p class="box1">
     Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
     </p>
     <h3>Paragraph - with padding</h3>
     <p class="box2">
     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
     </p>
</body>
</html>

The padding more to the overall length of the border. Suppose the left border length of an HTML element is 200 px and padding is about 50px. The final border length is 250px. As shown in the output.To contain the padding within the border use following CSS command.

p{
     width: 200px;
     padding:50px;
     box-sizing: border-box;
}

Output

The output shows that the box1 without padding is much closer to border and not pleasing. But the box2 gives lot of space around text and aesthetically pleasing.

Output - Padding Property
Output – Padding Property

CSS Margin

CSS margin is the outer most element in the box model.  The margin property creates space around an HTML element. It is a usual practice to define margin for HTML elements because white-space helps create beautiful designs. CSS defines 4 types of margin for an element.

  1. margin-top
  2. margin-left
  3. margin-bottom
  4. margin-left

You can treat CSS margin as an invisible border, though the element border do exist in box model.

CSS Margin
CSS Margin

The syntax to specify the margin property is given below.

p {
     margin-left: auto;
     margin-top: 15px;
     margin-bottom: 34%;
     margin-right: inherit;
}

The margin properties in above example has 4 different types of values.

  1. auto – an automatic value is set by browser.
  2. length – px, pt, em and other kind of length is specified.
  3. percentage – length % is calculated based on the width of the containing element.
  4. inherit – length of margin inherited from parent element.

Shortcut Version of Margin

It is difficult to specify margin individually, so to solve this problem there is a shortcut version available. You can set all four margins in a single line of code.

margin: <length of top> <length of right> <length of bottom> <length of left>;

For example

h3{
    margin: 10px 20px 50px 70px;
}

The above is similar to margin values assigned below.

margin-top: 10px;
margin-right: 20px;
margin-bottom: 50px;
margin-left: 70px;

Effect of Margin on HTML elements

The effect of margin on HTML elements can be understood using following examples. Create an HTML page – example-margin-effect.html and insert the following codes.

<!DOCTYPE html>
<html>
<head>
     <title>HTML Margin Effect</title>
     <style>
          h3{
               padding:10px;
               clear:both;
          }
          .box1 , .box2 {
               padding:20px;
               width: 30%;
               margin: 0px;
               border: 2px solid red;
               float: left;
          }
          .box3 , .box4 {
               padding:20px;
               width: 30%;
               margin: 40px;
               border: 2px solid red;
               float: left;
          }
     </style>
</head>
<body>
     <h3> Box 1 and Box 2 - No Margin</h3>
     <p class="box1">
           Lorem ipsum dolor sit amet, consectetur 
           adipiscing elit, sed do eiusmod tempor
           incididunt ut labore et dolore magna aliqua. 
           Ut enim ad minim veniam, quis
           nostrud exercitation ullamco laboris nisi ut 
           aliquip ex ea commodo consequat.
     </p>
     <p class="box2">
           Risus nec feugiat in fermentum posuere urna 
           nec tincidunt praesent. Id leo in
           vitae turpis. In massa tempor nec 
           feugiat nisl pretium fusce id velit.
      </p>
     <h3> Box 1 and Box 2 - No Margin</h3>
     <p class="box3">
          Lorem ipsum dolor sit amet, consectetur 
          adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. 
          Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris 
          nisi ut aliquip ex ea commodo consequat.
     </p>
     <p class="box4">
          Risus nec feugiat in fermentum posuere 
          urna nec tincidunt praesent. Id leo in
          vitae turpis. In massa tempor nec 
          feugiat nisl pretium fusce id velit.
      </p>
 </body>
</html>

Output

In the example, you have two boxes on top with no margin – Box1 and Box2 and it resulted in two elements much closer to each other. The second set of boxes are Box3 and Box4 with a margin of 20px each. The result of bottom two boxes with margin is a cleaner design with white-spaces between both boxes.

Output - Margin
Output – Margin

CSS Border

CSS allows you to set border for your HTML elements and it is part of the CSS box model. The CSS border is the outer most property of an HTML element, beyond that two HTML elements are separated using CSS margin.

Box Model Diagram
Box Model Diagram

There are many CSS border properties that will change the look of the border of an HTML element.

  • Border-style
  • Border-color
  • Border-size

Some people prefer the shorthand version because it set all of the above properties in a single line.

border: 1px solid red;

The above code set border-size to 1px, border-style to solid and border-color to red, all done in a single line of code.

The shorthand version is much convenient to write and it is a popular amount of web designers.

Example: Border

To understand the border property, let us create an HTML page – example-border.html and insert the following code.

<!DOCTYPE html>
<html>
<head>
     <title>Box Model - Border Properties </title>
     <style>
          p{
               padding:20px;
               border-style: solid;
               border-size:5px;
               border-color:gray;
          }
     </style>
</head>
<body>
     <h1>Border Properties Example</h1>
     <p>The CSS border properties defines a visible border for all HTML elements. 
You can change the border size, color and style of an HTML element.</p>
     <p>The border element is part of CSS box model that enclose an HTML element. 
The border properties can also be defined using a shorthand command.</p>
</body>
</html>

Output

Output - Border Properties
Output – Border Properties

CSS Width And Height

HTML elements are either block-level or inline elements. The inline elements are enclosed within a block level element. CSS treats each block-level HTML element as if it is in a box. This is known as CSS box model.

With CSS, you have control over the boxed HTML elements. You can change the look and feel of the element and change its position on a page. The CSS box model offers the following things

  1. Change the dimension of an element such as width and height.
  2. You can change the border of the elements.
  3. Change the margin of an element.
  4. You can change padding for an element.
  5. You can also show or hide an element on the page.

In this post, you will learn about components of CSS box model with examples. We encourage you to try the examples by yourself and see how it works, in this way, you will learn faster.

Width and Height Property

With CSS, you can change the dimensions of an HTML element using width and height properties. These CSS properties are

  • Width
  • Height
  • Min-width and Max-width
  • Min-height and Max-height

There are two ways to define these properties in CSS, they are

  1. Use fixed values such as px, pts., em.
  2. Use percentage (%) values for responsive design.
  3. Inherit – the values of width and height are inherited from parent elements.

Note: for who do not know, a responsive design is a type of CSS design optimized for multiple devices such as tablet, mobile and so on.

Example: Width and Height

In this example, you will create an HTML page with internal CSS codes that will set width and height of two <div> elements.

Step 1: Create a folder on your computer and call it box-model-example.

Step 2: Open notepad and create a new file inside box-model-example called index.html and save it.

Step 3: Open the file index.html in notepad and type the following HTML code into the file and save it.

<!DOCTYPE html>
<html>
<head>
     <title> Width and Height CSS Property</title>
     <script type="text/css">
     </script>
</head>
<body>
     <div class="box1">
          <h2>BOX 1</h2>
          <p>This is content of box 1.</p>
     </div>
     <div class="box2">
          <h2>BOX 2</h2>
          <p> This is content of box 2.</p>
     </div>
</body>
</html>

Step 4: Open index.html file again and type the following CSS code between <style> tags. This code will set do following changes

  • Set background color for both boxes.
  • Set width and height of only box 2.
  • Add some padding for text content, you will learn about padding in next section.
.box1 {
     background-color: lightgreen;
     padding:10px;
}
.box2 {
     background-color: beige;
     padding: 10px;
     width: 200px;
     height : 300px;
}

Save the changes and view the result in the browser.

Output

Output - Width and Height CSS
Output – Width and Height CSS

In the above example, box 2 is limited with width and the height property. However, box 1 is displayed as full block element.

Example: Max-width and Min-width

In an HTML page, the height and width property can change if you are using a responsive design, you have different screen width or height for different devices. To avoid problem with width or height property, you can set a min-height or min-width and max-height or max-width value. The content of the element cannot  exceed this height or width values or start with a minimum value. In this example, you will use the previous example and set min-height and max-height, min-width and max-width for two boxes.

Step 1: go back to index.html page and open it with notepad.

Step 2: Add following CSS code between <style> tags, replacing the previous CSS codes.

.box1 {
     background-color:lightgreen;
     min-height: 50px;
     max-height: 100px;
     min-width: 50px;
     max-width: 100px;
}
.box2 {
     background-color:cyan;
     min-width: 40px;
     max-width: 60px;
}

Output in the browser

Output - Max-width and Max-Height
Output – Max-width and Max-Height

CSS Selectors

The CSS selector helps find (or select) elements from HTML document for style purpose. W3c has listed all the possible kinds of CSS selectors that you can use in your CSS documents, but only few are them are used frequently. For a complete list of CSS selectors visit W3c – CSS3 selectors.

Here is a list of selector types, important for any web designer working with CSS and HTML.

  1. Universal Selectors
  2. Element Selectors
  3. Class Selectors
  4. ID Selectors
  5. Combinator Selectors
  6. Pseudo-Classes

You will find examples for each selector that you can practice and understand the concept easily.

Universal CSS selectors (*)

The universal selector applied to all the elements. You can also use it for a particular element. You can select all elements with another HTML element using universal CSS selector. The scope of selection is narrowed in the later case.

Element CSS selectors (p, h1, h2)

You can apply css rule to HTML element directly using the element selector. Select the element and then create rules for individual properties of the element. Certain properties apply only to a specific element. There are two ways to select elements.

CSS for single element

In this case, you apply rules only for a single element. For example

p {
    text-align: center;
    font-size: 2em;
}

CSS for group of elements

CSS allows to select more than one HTML elements. Therefore, you can apply css rules to a set of elements. For example

p {
    text-align: left;
    color: gray;
}
h1 {
    text-align: left;
    color: gray;
}

h2 {
    text-align: left;
    color: gray;
}

You can create a common css rule for p, h1 and h2.

p, h1, h2 {
    text-align: left;
    color: gray;
}

This would save rewriting the CSS rule multiple times.

Class  CSS selectors

The element selector gives the option to select more than one element. Another way to style a group of elements or a block in HTML is using the class selector. The class selector finds only those elements where a particular class name is used and applies the CSS rules on that class.

CSS code

. <user-defined class name> {
    declaration1;
    declaration2;
}

HTML Code


<div class="user-defined class name">
    <! -- Other HTML elements -->
</div>

Example Class Selector

In this example, we will create an HTML page with four blocks and give each block a different style. You need to download and install Notepad++ software on your computer. Then follow the steps given below.

Step 1: Create a folder called “Class-Selector”.

Class Selector Folder
Class Selector Folder

Step 2: Open Notepad and create a file called Style.css and save it inside Class-Selector folder.

Style.css file - Class CSS Selector
Style.css file – Class CSS Selector

Step 3: Insert following CSS code into Style.css and save it.

.block1 {

     background-color: black;
     color: white;
     font-size: 18 px;
     height: 200px;
}
.block2 {
    background-color: darkred;
    color: white;
    font-size: 18 px;
    height: 200px;
}
.block3 {
    background-color: darkgreen;
    color: yellow;
    font-size: 18 px;
    height: 200px;
}
.block4 {
    background-color: magenta;
    color: white;
    font-size: 18 px;
    height: 200px;
}

Step 4: Create a new file called Index.html and save it in  Class-Selector folder.

Index.html - Class CSS Selectors
Index.html – Class CSS Selectors

Step 5: Open the index.html file using notepad and insert following code and save it again.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Class Selector</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="block1">
        <h2>BLOCK 1</h2>
    </div>
    <div class="block2">
        <h2>BLOCK 2</h2>
    </div>
    <div class="block3">
        <h2>BLOCK 3</h2>
    </div>
    <div class="block4">
        <h2>BLOCK 4</h2>
    </div>
</body>
</html>

Step 6: Open the file in a browser.

Result of Example Code

Result of Class CSS Selectors
Result of Class CSS Selectors

Id CSS Selector

When you select a group of element or apply CSS on a class selector. You want just one element or a few element to appear unique or different from the rest of the group. These HTML elements could be selected using the ID selector and you can apply separate CSS rules for them.

There is another benefit of using ID selector, they are popular among JavaScript programmer. The JavaScript use ID selector to select form elements and write unique code for them.

Learn Basic JavaScript

Example of ID Selector

In this example, you will create an HTML page with one block and a single element with ID selector. Then apply CSS rules on it.

Step 1: Create a folder called “ID-Selector”.

ID Selector Folder
ID Selector Folder

Step 2: Open notepad and create a new file called style.css and save it in ID-selector folder.

Style.css - ID CSS Selectors
Style.css – ID CSS Selectors

Step 3: Open the style.css file and insert the following code and save it.

.block {
    background-color: black;
    color: white;
    height: 200px;
}
#head{
    font-size: 24px;
    text-align:center;
}

Step 4: Open notepad and create a new file called index.html and save it in ID-Selector folder.

Index.html - ID CSS Selectors
Index.html – ID CSS Selectors

Step 5: Copy the following code in to the index.html file and save it.

<!DOCTYPE html>
<html>
<head>
    <title>CSS ID Selector</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="block">
        <h2 id="head">ID Selector</h2>
    </div>
</body>
</html>

Step 6: Open index.html file in a browser and verify the results.

Result of Example – ID selector

Result of Example - ID CSS Selectors
Result of Example – ID CSS Selectors

The Selectors find the elements based on a Document Object model or document tree which is an API ( Application Programming Interface) for HTML called HTML DOM. It describes the structure of the document and how to access the DOM tree. The Document Object Model treat the HTML document as a tree structure. Each element in this tree is an object.

Combinators CSS Selectors

Another type of selector in CSS is called Combinators. It checks whether the element is a child, descendant or sibling in the document tree.

Syntax of Combinators

E F - where F is descendant of E
E > F - where F is child of E

Example of Combinators

In this example, you will create an HTML element with a list and then change style for the list elements.

Step 1: Create a folder called Combinators.

Combinators Folder
Combinators Folder

Step 2: Open Notepad and create a file called “style.css” and copy following code into the file and save it.

.list {
    background-color: blue;
    padding: 20px;
    list-style:none;
}
.list li {
    background-color:cyan;
    padding: 10px;
    margin: 2px;
}
Style.css - ID CSS Selectors
Style.css – ID CSS Selectors

Step 3: Open notepad and create a file called index.html.  Now copy following code in index.html and save it.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Combinator Selectors</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <ul class="list">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
    </ul>
</body>
</html>

Step 4: Open the index.html file in a browser and verify  the results.

Result –Combinators Selector

The result of the above code is given below.

Result of Example - Combinator CSS Selectors
Result of Example – Combinator CSS Selectors

Pseudo-classes CSS Selectors

This is another group of elements that does not belong to the document tree. These selectors are outside of document tree, hence, in CSS you use them with a colon ( : ).

E: hover, :active, :focus – where hover is an user-action pseudo-class and E is the element.

E: visited,: link – where visited and link are a link pseudo-classes and E is the element.

References

  • Editor: Jonathan Robie, Texcel Research. n.d. Document Object Model. Accessed 4 19, 2018. https://www.w3.org/TR/WD-DOM/introduction.html.
  • Etemad, Elika J., Tantek Çelik, Daniel Glazman, and Ian Hickson, . 2018. Selectors – 3. January 30. Accessed 4 19, 2018. https://www.w3.org/TR/selectors-3/.
  • W3schools. n.d. CSS Tutorial . Accessed 4 18, 2018. www.w3schools.com.

How To Link CSS to HTML

There are many ways to add CSS codes to HTML document. In this article, you will learn all possible methods to include CSS code to an HTML document.

Every browser comes with default style sheet which is immediately applied to the HTML page. There are three other ways to add style information to an HTML document. They are as follows.

1. Inline CSS

2. Internal CSS

3. External CSS

Let’s discuss each one of them in detail.

Inline CSS

The inline CSS codes are added directly to an HTML element. They are the closest to an HTML element and override other CSS rules.

Example of Inline CSS

<h1 style="background:black;color: red;font-size:18px ;">

This style of inline CSS was used in both HTML 4 and HTML 5. However, they are not recommended and a lot of inline CSS codes was deprecated in HTML 5 because we like to keep style information separate from the HTML. They are not practical if you have many CSS rules to apply.

Internal CSS

There is another way to add css rules to your web page. The internal CSS rules are applied by placing your code between the following section.

<head>

...

</head>

There is a special markup <style >…</style> to add internal css rules.

Example of internal CSS

<! DOCTYPE html>

<html>

    <head>

        <title>Internal CSS</title>

        <style type="text/css">

            h2 {

            background-color: lightgreen;

            }

        </style>

    </head>

    <body>

        <h2> Internal CSS </h2>

        <p>This is an example of internal CSS</p>

    </body>

</html>

Result of Internal CSS

The result of the above code is given below. You can see that the CSS code has changed the background color of heading to light green.

Figure 1 - Internal CSS applied to HTML webpage
Figure 1 – Internal CSS applied to HTML webpage

Note: In the style markup <style type=”text/css”> is not required in HTML 5. You can use <style> … </style> for internal css.

External CSS

The internal CSS rules are fine as long as fewer lines of style information is added to HTML document. The Internal CSS is faster because the codes are separate from HTML markup tags. But you have to write the codes for each and every page separately and often repeat the same code all over again for a new page.

The real problem starts when the size of the style rules grows when you keep adding new elements or pages. The external CSS is the solution to this problem. You create a new CSS file and keep all your rules in this file. Link CSS file back to the HTML document. You can use the same linked CSS file for multiple pages.

Example of External Link CSS

In this example, you will create an external CSS file, add style codes to the CSS file and finally link CSS to an HTML page. You need a text editor such as Notepad or Notepad++, Sublime Text, etc.

Step 1: create a new css file with extension .css . Let’s call this file as main.css.

Create main.css file
Figure 2 – Create a main.css file

Step 2: Insert the following code to the file – main.css.

h1 {

    background-color: black;
    color: red;
    padding: 20px;
    text-align: center;
}
Add CSS code to the main.css file
Figure 3 – Add CSS code to the main.css file

Step 3: Create a new file called Index.html. Open with notepad or a text editor in your computer like Notepad++. Link the external CSS – main.css file to HTML using the code given below.

<! DOCTYPE html>

    <html>

    <head>

            <title>External CSS</title>

            <!-- linking external css file -->

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

    </head>

    <body>

        <h1>External CSS Example</h1>

        <hr>

        <p>This is an example of external css file linked to HTML webpage. </p>

    </body>

</html>
Link CSS to HTML page
Figure 4 – Link CSS to HTML page

Open the index.html in a browser window.

Result of External CSS

The result of the above code is given below. The external CSS file linked to HTML loads and render the CSS style rules effectively.

Result of external CSS applied to HTML page.
Figure 5 – The result of external CSS applied to the HTML page.

Link CSS file is relatively slower than other CSS methods. But, there are other advantages like keeping style elements in a single location separate from HTML that compensate for the speed.

CSS Introduction

CSS stands for Cascading style sheet is a technology to render style to your web page. It can change color, font, background, alignment and many other properties of an HTML page. The HTML only display the content for human readers.The HTML elements contain the following contents.

  1. Text
  2. Image
  3. Video
  4. Audio
  5. Links

The HTML is not enough to create a beautiful web-page because there is not much there to style the web document. You could change background color, or align the text : left, center or right and a few other style information.This was when people used HTML 4.0 standard. By the time HTML 5 become popular all style information was transferred to CSS.

The CSS contains a set of rules to specify the style of HTML elements. You can change many properties of an HTML element like text, color, background, etc. Some of the properties are given below.

  1. Background
  2. Typography
  3. Color
  4. Border
  5. Size
  6. Page layout

and many more.

CSS Introduction – What are CSS rules?

The CSS rule is very simple to remember. A CSS rule has two parts

  • Selectors
  • Declarations

The CSS selector is an HTML element whose style information we are going to change. The CSS selector is enclosed within curly braces. Remember that there are many types of CSS Selectors depending on how complex your web site is. A single rule applies to more than one selector if you wish. The CSS declaration is made of a property and a value pair and ends with a semi-colon.

For example

h2 {
color: red;
}

In the above example, the element h2 is a selector – an HTML element whose text color is changed to red. The color: red; pair is called the declaration where color is a property and value is red. Note than the declaration ends with a semi-colon.

How to apply CSS rules?

There are three ways to apply CSS rules and you can apply them depending on the complexity of HTML page or website.

  • Inline – CSS rules apply within HTML element and has highest priority.
  • Internal – CSS rules limited to an HTML page.
  • External – CSS file is linked to HTML document or website.

CSS Tutorial

CSS stands for Cascading Style Sheet. The CSS rules give the beautiful look to the web page because HTML does not have that many style options. Also, it is wise to keep the style information for a website separate from the main content. You can add CSS rule inside the HTML document or in a separate file depending on the website.

About Tutorial

This tutorial is for any person interested in learning CSS. To maximize your benefit from this tutorial. The learner must be familiar with basic HTML syntax. You can visit our HTML tutorial page to learn the basics of HTML language.

CSS Tutorial Topics

Here is a list of lessons for CSS tutorial. Start reading from top to bottom.

1. CSS Fundamentals

2. CSS Syntax

3. CSS Box Model

4. CSS Fonts

5. CSS Projects