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.




Dimensional Modelling – Fact and dimension tables..


Fact: Fact is measurement of a particular business process or business itself. Fact tables are used to store the measurements as a track of business process performance.

E.G if we are selling some product at some dollar value then the measurement will be the units sold and amount of dollars earned from that product’s sale.

Each row in fact table is one measurement event. And this data is stored at specific level of detail which is called ‘grain’ such as per above example, it could be one row per product sold. Single fact table should have same grain size to avoid data inconsistency.

Mainly there are 3 type of of  fact tables:

  1.  Additive : Additive facts are the ones which can be added together to generate some insights from the data. E.g To calculate total sales of a region for a year in terms of dollar value can be calculated by summing up the Sales amount for last 1 year records in fact table.
  2. Semi- Additive: Semi additive facts which cant be added in all cases. E.g Account balance , can not be summed across the time dimension. i.e. If in morning account balance is $100 and by evening after doing the transaction it becomes $50 then total balance by end of the day can be calculated by adding $100 and $50.
  3. Non-additive : These type of facts can never be added e.g unit price of a product. We can only perform average and count operations on this type of measures.

While storing a data in fact table, one should consider putting a valid fact information e.g if there is no sales activity for a given product than ,no row should be put in fact table. We should not populate zeroes in the fact table to represent no activity. Because despite not capturing no activity fact tables take up 90% of the space in dimensional models. We should be very judicious in using fact table space.

Grain of fact table can be categorized in 3 parts:

  1. Transaction: This is the most common type of grain fact tables.
  2. Periodic Snapshot
  3. Accumulating Snapshot

Fact tables have 2 or more foreign keys connect to dimension table’s primary keys. E.g in above picture office id is primary key in dealers office dimension whereas it is foreign key in Fact table. Fact tables generally have their own primary keys composed of subset of the foreign keys of dimensions also called composite key. Fact tables have many to many relationships.

Dimension Tables: Dimension table contains the textual information in context to the fact tables. They describe ‘who, what, when ,where, how and why’ associated with the business events. E.g Time , DealersOffice are dimensions in above example. Dimensions have more attributes than fact tables but lesser rows. Each dimension table has single primary key on basis of which it can be joined with fact table.

It serves as source of the report labels and make DW/BI system understandable and useful. Naming of dimensional attribute should resemble the business properties and not always be some code which has to be memorize to understand and decode while reporting.

Sometimes looking at numeric value , it is tough to determine whether it is dimension or fact e.g cost of a product can serve as dimension also which can be fact as well as dimension. Continuously valued numeric are almost always considered as facts where discrete observations are considered as dimensions.

Fact and Dimensional tables in Dimensional modelling 

Above diagram is snowflakes schema some property business. In Dimensional modelling schema are kept as simple as possible but not simpler. So that data can be processed with less joins. Dimensional model should be well planned so that when business wants to analyze the data separately every time , schema need not be changed. So generally data is kept at the lowest level of granule. Atomic data which is not aggregated is the most expressive data.

While creating a report from the dimensional models, dimension attributes supply report filters and labeling , whereas fact tables supply numeric values.

Kimball’s DW/BI architecture:

There are 4 different components to consider the DW/BI architecture:

  1. Operational Source systems i.e. OLTP : These systems generally captures business transactions. E.g Point of Sales transaction systems are OLTP systems.
  2. ETL systems : Extract Load Transform systems. This comes between OLTP and DW/BI presentation area. Detail on ETL can be chekced on article.
  3. Data Presentation Layer
  4. Business Intelligence Appications


Source: The Dataware House Toolkit- 3RD Edition by Ralph Kimball and Margy Ross


Attributes used to style your web page| CSS Tutorial -Part 3

As we have seen the attribute “color” in Part -2 , today we will go through some other basic parameters which are needed to set to give desired layout.

Font- Family : Font-family attribute describes which font type should be used for particular tag/html page/website level. If not mentioned , default font type of the web browser is assigned to the pages. E.g of font-family attribute value:

font-family: “Courier New”, Verdana, sans-serif;

This line means that first preference should be given to font type “Courier New”. If this font is not available on person’s computer than Verdana should be used else sans-serif should be used. Most of the browsers use serif family as default font type. We can download add on font types from Google fonts.

Font-Size: Font-size is the attribute which can be used to set the font size of each tag differently in page and change the default font size. Font size can be described in 3 different ways i.e. static size which is described in pixels written as px, relative to window size which is described is viewport width written as vw and 3rd way is EM which is relative to base size set on page. Below is the example of all three:

font-size: 16px;
font-size: .9vw; /*This is if window is 100 bit size each character occupy 0.9 of 100 bit*/
font-size: 2em; /* If base size is 16px , then 2em means 16*2=32px*/

Font-Weight: Font weight can be normal, bold or bolder(only supported by some browsers). Font weight can be described in numbers also. Below is the example:

font-weight: normal;
font-weight: 400;

Text-Transform: Text transform is used to show the text in particular fashion i.e. if you want to transform the text to uppercase/lowercase or capitalize form. Example of this is given below:

text-transform: uppercase;
text-decoration: underline;

Text-align: This is used to change the alignment of the text. E.g:


These are just the basic attributes and there are many more attributes which can be checked at :https://www.w3schools.com/cssref/

For background color and more attributes >>

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…