Last updated on October 31st, 2020 at 07:53 am.
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.
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="https://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="https://bizanosa.com/">Home</a> <br> <a href="https://bizanosa.com/coupons/">Coupons</a> <br> <a href="https://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="https://bizanosa.com/">Home</a> <br> <a href="https://bizanosa.com/coupons/">Coupons</a> <br> <a href="https://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="https://bizanosa.com/">Home</a> <br> <a href="https://bizanosa.com/coupons/">Coupons</a> <br> <a href="https://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="https://bizanosa.com/">Home</a> <br> <a href="https://bizanosa.com/coupons/">Coupons</a> <br> <a href="https://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="https://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=”https://bizanosa.com/” style="color:blue;">go to BZN</a> <a href="https://bizanosa.com/" style="color:red;">Home</a> <br> <a href="https://bizanosa.com/coupons/">Coupons</a> <br> <a href="https://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:
- 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.
- 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: