Box Model in CSS | CSS Tutorial -Part 5


CSS box model is box which is surrounds all the tags in HTML with content, padding, margin and border. If you see above box , inner most blue part represents contents, green is padding , then border and then margin. We as a developer can set these values  as per our design.

Detailed explanation of these terms:

  1. Content -Content appears in the center of the box. It is the place where text and images appear
  2. Padding – Padding is used to clears an area around the content and make some space. The padding is transparent
  3. Border – A border that covers the padding and content
  4. Margin – Margin clears an area outside the border. The margin is also transparent.

We can describe this as below:

#centreDoc {
padding: 0 ;
margin-top: 40px;
margin-left: 100px;
width: 750px;

<body id=”centreDoc”>

<!– Content –>


In order to set height, width of the box properly you need to understand below maths for this: Total width of an element should be calculated as below:

Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

In our case it will be:

Total element width =  750px + 0 px+0px + 0px +0px+100px+0px = 850px

See in the below example where page is divided in 2 blocks i.e. navbar and centerdoc

Box model

The highlighted orange part is div and above that there is nav tag.

More information can be collected from https://www.w3schools.com/css/css_boxmodel.asp


CSS · Web

Background Color, Image | CSS Tutorial -Part 4

We will be learning about all the possible design techniques we can apply to the background of the web pages. Below is the sample code to add background color to the body tag of web page:

body {
width: 100%;
font-family: monospace;
font-size: 18px;
font-weight: normal;
background-color: rgba(226, 215, 215, 0.35);

Similar to normal color attribute , background color can be also set as hexadecimal number, rgba, hsl and by name. It will set background color as below along with other styling which we might apply to our page.


Fig 1

You can change the color to whatever color you like using ctrl+shift+i or using web developer tool on any browser as below:


click on rgba and it will help you change it by adjusting the color you like.

We can have some background color added to individual tags also like to h1, h2 or any tag we want as below:

h1, h2 {
font-weight: 700;
line-height: 1;
margin: 20px 0;
color: #2f2b2b;
background-color: #c5baba

The change in the h1 will be same as in fig 1.

Background Images: We can add background image to our web page using css. We can add any type of pic i.e. jpg, png, gif(moving pic) etc as below:

html {
width: 100%;
font-family: monospace;
font-size: 18px;
line-height: 1.5;
font-weight: normal;
background-image: url(“images/giphy.gif”);
background-repeat : repeat-y;
background-size: cover;

It will appear like : MovingPic.png

Note: When you actually apply .jif pic to your web page it is moving like an animation.

background-image is the attribute which helps us providing the url of the picture we want to add to out web page along with relative or absolute path.

background-repeat is defined to describe if we want to repeat background image to fill into complete page or not. Default value is no i.e. Only part of web page may be covered according to original size of the picture. Repeat-y means it will be only repeated vertically. For more info you can check https://www.w3schools.com/cssref/pr_background-repeat.asp

background-size property specify the background size of the image. Default value is auto i.e. the background-image contains its width and height. we have selected cover to to stretch it as possible to cover entire page.

For box model in CSS , click here

There are lot many other attributes can be added to web page. Watch out this place for more articles.



CSS · Web

Cascading Style Sheet Tutorial – Part 2

As we read in the last part of the tutorial that there are 2 ways to style your html page. First one was styling each tag separately and 2nd was putting the style tag in <head> tag of every html file in your website. But putting style tag in head in each page of your website can also cause the code redundancy which is tough to maintain and if any change come we have to make modification in all of the pages. To solve this we can create .css file for our website where we can list down all the styles we want to implement in our website. Below is the sample .css file :

css file

To use this CSS file in each of the page in website we have to use link tag as below:

<link href=”stylesheet.css” rel=”stylesheet”>

stylesheet.css is the name of the your css file.

To jot down below are the ways we might want to style our webpages:

  • If we want to style a particular tag one time in page we may style it at tag level
  • If we want to put some styling at page level , we can put it in <style> tag in head section
  • If we want to create common layout in out website, we should do it in CSS files.

So this was all about the ways you one can do styling the website. Now lets learn at the very basic level about the attributes and properties of various tags which you can set in the style sheets or tag:

Color: This is very basic property which we can set with any tag telling what should be color of the tag. e.g

p { color : black}                                          OR

p{ color :  #000000}                                      OR

p {color: rgb(0,0,0)}                                      OR

p { color: hsl(0, 0%, 0%)}

Above are mentioned 4 different ways we can color the text/background etc in the website.

First one is named colors, 2nd is hex code for the color, 3rd is rgb (red,green,blue as per intensity) and 4th is HSL i.e. hue, saturation and lightness. For further about colors , you can read at https://www.w3schools.com/colors/colors_hsl.asp


CSS · Web

Cascading Style Sheet Tutorial – Part 1

CSS means cascade style sheet which is language used to style your web pages. One way to write CSS in your web page is in <style></style> tag in <head> tag or apply it at every tag separately. It is preferred to apply all styling rules in <head> tag because it makes your code less tedious for maintenance. Basic CSS example is given below having style tag in <head> tag:

p {color: black}
h1 {color: brown ; text-align:center}
a {color: blue}
.classselector {color: brown; background-color: gray}
#idselector {background-color: gray}

The style tag is written in the head section of the HTML page. This code means that if  anywhere  in your page having text in between these <p> </p> tags make it black and similarly <h1> should be brown and centrally aligned. <a> tag should be blue.

To break down above written code, every line is combination of selector and declarations.CSS has 3 type of selectors:

  • Tag selectors = Tag selectors are given at each tag level. e.g p,h1,a
  • class Selector = It starts with dot. Class selectors can be used with any html tag by writing for example <p class=”classselector”> . Class selector can be used with multiple tags in single html file
  • Id selector= It starts with #. Id selector is used with tags like <p id=”classselector”>. Ideally id tag should be used only once in single html page.

Attribute and property combination is called as declarative i.e. {color: black}

What do we mean by cascading?

Suppose we have code below:

p {color: black }
h1 {color: brown ; text-align:center}
#idselector {color: green; font-size: 39px}

<h1 id=”idselector”> Intro to CSS</h1>

In this case style tag has 2 styling rules for <h1> tag ..so which one will be applied? Will it be id selector or general h1 rule. Id selector rule will be applied as this phenomenon is cascading which means rules which decide which selector will be applied to the tag in case of conflict. As per cascading rules, id has higher precedence than h1 selector.

Page Layouts/Design types in CSS

There are 4 types of layout designs in CSS which are as below:

  • Static Design/Fixed Pixel Design : In this design page width does not change even if we try to change the size of browser. This design is not flexible and generally a very preferred design these days. This can be used for mobile websites also but generally people have to zoom or slide to read the content.
  • Liquid Design : This design flows like liquid which flows as per window size. This is different than responsive design as image and text does not change its size whereas it does in responsive. Liquid designs have its limitation when the window shrinks/expands too much.
  • Adaptive Design : This is a design which is static design with some properties of  responsive design.
  • Responsive Design : This design changes based on size of the window. Text and images resize and re position itself with window size. These designs are ideal for mobile apps and wider screens. This is a very flexible design.


Let’s learn together on Web development…..for more information like this  and follow my blog..


HTML | Mini Project | For HTML beginners..

HTML – HTML is computer language that is used to build website and basic building blocks to create a website. Its more like bricks which are used to build homes. A good website is combination of three languages i.e.

  • HTML – basic structure
  • CSS – Styling for website
  • JAVASCRIPT(Or any other similar language) – Make website intelligent and perform tasks

Below are kind of small assignments to check your html knowledge if you are a beginner:

Create Home Page of your website as below:

Home Page


  • In the tab it should display “Home Page”
  • There should be a link which says “email me” and on clicking of that page , a mail should be open with to as mentioned address in html page of that link
  • Create links to several other pages in home page
  • Create a link to website which already hosted e.g to google.com
  • Create a Contact- US page as below

Create Contact US page as below:Contact-US


  • There should be a link back to home page
  • There should be a drop down list to select the salutation
  • Text box size of Name and Email id should be same
  • There should be a radio button for complaint or feedback
  • Description text box should say “Enter the description”
  • While submitting , use “POST” method


Hints of tags that can be used :

<html>,<head>,<body>,<p>,<a>,<h1>,<hr>,<form>,<select>,<input>,<textarea> etc

Below are the codes of these 2 pages if you want to compare your code:

Home Page

Contact US page

Kindly share your thoughts in comment box so that I can improve my blog…


python · Web

Web Scraping | Mini Project | Scrape Financial data and send email to your gmail account

While learning a new language/methodology , it is always a good practice and start creating small projects to understand real life difficulties which you will face on real life projects. I am learning Python recently,and the best way to test my knowledge is to create a projects on it. Being beginner, we generally don’t have giant and ambitious project to work on, so why not to work on small realistic projects just like building sandcastles before pilling up the rock to build a grand castle.

With that in mind , I have come up with below project to get started on.Try to make the project by yourself before reading the code file attached by taking the hints which are jotted below.

Stock Data Scraping :

Goal : As the title mentions, this project is to take out necessary stock information and create a schedule to send an email daily for that information.

Project Specification:

  • Identify website which you want to scrape
  • Identify patterns in URL and inspect objects
  • Take input in file as with every addition of ticker symbol we don’t want to change code
  • Use your gmail account to send email
  • Email body should contain stock symbols and its current price
  • Subject should be : ” Your Daily stock Digest”
  • Mail should go with proper From name and not with email id
  • To should have multiple recipients

Below is the input file:


Output should look like:


Yellow highlighted part should be the email id from which this mail is sent. Below is the code for this project

Github Project

To take a heads up for this project go through link : Web Scraping – Stock Data Scraping Using Python 3

Kindly share your views on this article which will encourage me to post more content like this….




Web Scraping – Stock Data Scraping Using Python 3

Stock Data : The stock market is the best performing asset class by far. To invest in stock market , we don’t need lump sum amount so anyone can buy/sell shares at fraction of cost (as commission). While looking for buying quality stocks, looking at the last stock value is very important along with other parameters.

Web Scraping : It means data extraction from websites. It is generally used to gather a specific data which can be analyzed and used for various purposes. In this article data will be scraped from the financial websites without browsing each web page separately.

If we need to analyze say 10 different shares while monitoring its price daily, one way is daily go to websites and check each ticker symbol’s price which is tedious. Second method is  create an automated routine which gives this information just by running it or schedule it. This way it is possible to create the your own database also say a month’s performance for a particular stock etc.

Below are the steps involved in creating a automated script for web scraping:

  • Inspect the web page manually
  • Find the patterns in the data to be extracted
  • Fetching the web page (basically means downloading the data)
  • Extract the information using that pattern

[Note: This article is only for information purpose ]

Once the page is fetched, the extraction takes place. The content of the page is parsed, searched , reformatted and copied to the desired output source. In this process, information could be just a piece of value from the entire page. In our example, it is just the last stock price value.

import urllib.request
import re

symbollist = ["AAPL","ZEN","DE","MON","FWONA","AUO"]
while i <len(symbollist):
    #Masked the name of website, instead of abc use the website you want to scrape and adjust url as per the website's url
    url = "https://www.abc.com/stock/quote/" +symbollist[i] +"?q="+symbollist[i]
    regex = '<sup>\$</sup>(.+?)<span> USD</span>'
    pattern = re.compile(regex)
    htmlfile = urllib.request.urlopen(url)
    htmltext = htmlfile.read()
    stockprice = re.findall(pattern,str(htmltext))
    print("Price of ",symbollist[i],"=",stockprice)


Output :

Price of AAPL = [‘144.15’]
Price of ZEN = [‘27.86’]
Price of DE = [‘108.20’]
Price of MON = [‘113.95’]
Price of FWONA = [‘32.27’]
Price of AUO = [‘3.90’]

In the next page , we will be having mini project in Web Scraping using python…Next>>>>

Please share your thoughts on the articles. If you like it, please click like, share or comment. Happy reading…