17 CSS Tutorial – Using CSS in HTML and Browser Extensions

17 CSS Tutorial – CSS in HTML and Browser Extensions

17 CSS Tutorial – CSS in HTML and Browser Extensions

In the last post we started looking at CSS in HTML. In this post well look at how CSS is used in HTML. We’ll look at examples of each case. We’ll also talk about some Browser plugins we’ll use for the CSS tutorial.

Join the FULL HTML and CSS Tutorial Here >>

 

Let’s start by looking at how Cascading stylesheets are used in styling HTML pages:

 

1. Using an External CSS File

In this case, all your CSS will be written on a different file. You will then link that file on your HTML file.

You will use the following line :

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

 

The href attribute is where you will add the link to your C S S file .

Let’s add this stylesheet into our HTML file code example. The example we used in the inner div tutorial. The above will be added in the <head> section of the html code as follows:

<!DOCTYPE html>
<html>
<head>
<title>A simple Div Example in HTML</title>
<link href="myCSSfile.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Begin the First div ONE 
In this Div Let us create like a Paragraph of Text with a heading, an image and a link
-->
<div> 
<h1>This is a Heading within the First div</h1>
<!-- Then comes the image which is taken from lorepixel.com-->
<img src="http://lorempixel.com/400/200" alt="Image sample" title="Hi"> 
<p>This is the Paragrapgh which will act like a small article within this div element. .</p>
<!-- The following is a div within this first div -->
<div>
<h2>This is a subHeading within the First Inner div</h2>
<a href="http://bizanosa.com/">Home</a> <br>
<a href="http://bizanosa.com/coupons/">Coupons</a> <br>
<a href="http://bizanosa.com/sp/">Skillshare</a> <br>
</div>
</div>
<!-- End the first div  element here-->
<!-- Begin the Second div ONE 
The second Div will only have links and a horizontal line (<hr>).
The <br> creates a line break
-->
<div>
<hr>
<h1>This is a Heading within the Second div</h1>
<a href="http://bizanosa.com/">Home</a> <br>
<a href="http://bizanosa.com/coupons/">Coupons</a> <br>
<a href="http://bizanosa.com/sp/">Skillshare</a> <br>
<!-- The following is a div within this Second div -->
<div>
<h2>This is a subHeading within the Second  div</h2>
<a href="http://bizanosa.com/">Home</a> <br>
<a href="http://bizanosa.com/coupons/">Coupons</a> <br>
<a href="http://bizanosa.com/sp/">Skillshare</a> <br>
<!-- The following is a div within this Inner div -->
<div>
<hr>
<h2>This is a subHeading within the  Inner div</h2>
<a href="http://bizanosa.com/">Home</a> <br>
<a href="http://bizanosa.com/coupons/">Coupons</a> <br>
<a href="http://bizanosa.com/sp/">Skillshare</a> <br>
</div>
</div>
</div> <!-- End the second div  element here-->
</body>
</html>

 

2. Wrapping your code in the <style>  </style>

If you have a one pager web page and you would like to put all the CSS and HTML on the same page. You may decide to use the style tags to add your CSS as shown below:

<!DOCTYPE html>
<html>
<head>
<title>A simple Div Example in HTML</title>
<link href="myCSSfile.css" rel="stylesheet" type="text/css">
<style type="text/css">
      body { background-color: #fff;
             color: #000;
             margin: auto; 
          } 
 </style>
</head>
<body>
<!-- Begin the First div ONE 
In this Div Let us create like a Paragraph of Text with a heading, an image and a link
-->
<div>

 

In the above example you can see we still have the external Stylesheet linked into our web page. This means that the styles you define in the CSS block (<style></style>) , will override the CSS in the External style sheet

 

3. Inline CSS

Inline CSS refers to that which you add directly to an element using the style attribute. This is done as shown below:

<a href="http://bizanosa.com/" style="color:blue;">Home</a> 

 

You can add it to any tag as follows

<!-- Add your CSS on any Tag -->
<div style="font-size:2em;">
<h2>This is a subHeading within the First Inner div</h2>
<a href=”http://bizanosa.com/” style="color:blue;">go to BZN</a>
<a href="http://bizanosa.com/" style="color:red;">Home</a> <br>
<a href="http://bizanosa.com/coupons/">Coupons</a> <br>
<a href="http://bizanosa.com/sp/">Skillshare</a> <br>
</div>

 

Under all normal circumstances, inline CSS will override all other CSS definitions for that particular element.

The browser extensions

 

The browser extensions we’ll us at some point in this CSS Tutorial include:

  1. Any developer tool / debugger on your Browser of choice.

I used to use Firebug for my Firefox browser. However it is no longer being developed and all it’s features are being added on the official Developer tools on firefox. Which comes by default and you can open it using CTRL + Shift + K  on windows,  or CMD + Shift + K  on a Mac .

On Chrome the default developer tools is accessible by pressing F12.

 

  1. Color Picker

You may use any color picker extension for your browser. Go to your browser addons and search for color picker and install it. In my case I usually use ColorZilla , which is available for Firefox and Chrome.

 

If you don”t know how to add extensions on Firefox or Chrome, watch the video above.

 

To learn more about HTL and CSS click the button below:

Join the FULL HTML and CSS Tutorial Here >>

 

The following two tabs change content below.
Just a geek who loves Trance . Be yourself everywhere you go. And Be yourself in everything you do. Cheers !

Comment Here