R A P I D A P P L I C AT I O N
DEVELOPMENT
IS-224
RAPID
APPLICATION
DEVELOPMENT
© Dr. Mohammed Misbhauddin
R A P I D A P P L I C AT I O N
DEVELOPMENT
LECTURE 3.3
CSS
Box Model
R A P I D A P P L I C AT I O N
DEVELOPMENT
Review of Webpage Render
Elements in HTML are of two Block-level elements take the Inline elements takes up as much
main types: Block and Inline full width of the page width as the content of the element
<head> Output
<style>
Sample Para 1
*{
border: 1 px solid red; Sample Para 2
Block-Level Elements } Link 1 Link 2
</style>
</head>
<body>
Inline Elements <p> Sample Para 1 </p>
<p> Sample Para 2 </p>
<a> Link 1</a>
<a> Link 2 </a>
</body>
R A P I D A P P L I C AT I O N
DEVELOPMENT
Each element on an HTML page is a box
Each box has margins, borders, paddings and content
The CSS box model specifies how margins, borders and
CSS Box padding of HTML elements are rendered
Model
Margin HELLO Border
Padding
Content
R A P I D A P P L I C AT I O N
DEVELOPMENT
Let's learn some
CSS Box Properties
R A P I D A P P L I C AT I O N
DEVELOPMENT
You control the width and height of an HTML element box
Width & Height This is done using the CSS properties: height and width
Width and height can be specified using any of the
standard CSS units (more on this later)
<body> Output
<div> </div>
HTML <div> </div>
</body>
div:nth-child(1) {
background-color: red;
width: 100px;
height: 100px;
}
CSS
div:nth-child(2) {
background-color: green;
width: 500px;
height: 100px;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Padding
The padding sits inside the border and surrounds the content of the HTML element
Each element has 4 padding properties
padding-top
HELLO
HELLO padding-right
padding-left
padding-bottom
Padding
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Padding Shortcut
CSS padding values can also be defined using a shortcut property called padding
This property can have 1 value, 2 values, 3 values and 4 values
One Value Three Values
div div
{ Applies to all sides (top, { The order for this is
padding: 30px; left, bottom, right) padding: 5px 6px 7px; Top – Right - Bottom
} }
Two Values Four Values
div First value is for top & div
{ bottom both { The order for this is
padding: 30px 15px; Second value is for left and padding: 5px 6px 7px 8px; Top – Right – Bottom - Left
} right both } Clockwise Direction
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Border
The border sits inside the margin, and surrounds the padding and content of the HTML element
Each element has 4 basic border properties
border-top
border-right
HELLO
border-left
HELLO
Border
border-bottom
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Border More
Each border can have three properties: width, style and color
Hence, there are 3 x 4 (12) possibilities
border-top-width border-right-width border-bottom-width border-left-width
border-top-style border-right-style border-bottom-style border-left-style
border-top-color border-right-color border-bottom-color border-left-color
style
solid
dotted
dashed
double
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Border Shortcut
CSS border values can also be defined for all borders using the border property
The value in a shortcut can contain all three border properties
All Borders Either Side
div div
{ { This applies to the
border: 2px solid black; Apply this to all sides border-right: 5px dotted red; right border
} }
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Border New
The border-radius CSS property is a new border property in CSS 3.0
It is used to create rounded corners of borders on HTML elements
<body> Output
<div> </div>
HTML <div> </div>
</body>
div:nth-child(1) {
background-color: red;
width: 100px;
height: 100px;
border-radius: 50%; }
CSS
div:nth-child(2) {
background-color: green;
width: 500px;
height: 100px;
border-radius: 20px; }
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Margin
The outermost part is the margin between this HTML element to other HTML elements
Each element has 4 marging properties
margin-top
HELLO
margin-
HELLO margin-
left right
Margin margin-bottom
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Margin Shortcut
CSS margin values can also be defined using a shortcut property called margin
This property can have 1 value, 2 values, 3 values and 4 values
One Value Three Values
div div
{ Applies to all sides (top, { The order for this is
margin: 30px; left, bottom, right) margin: 5px 6px 7px; Top – Right - Bottom
} }
Two Values Four Values
div First value is for top & div
{ bottom both { The order for this is
margin: 30px 15px; Second value is for left and margin: 5px 6px 7px 8px; Top – Right – Bottom - Left
} right both } Clockwise Direction
R A P I D A P P L I C AT I O N
DEVELOPMENT
Let's learn about
CSS Units
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units
When specifying dimensions of elements, font sizes, border widths etc. in CSS you
will usually use some kind of unit to specify how the numeric dimension is to be
interpreted
The most common CSS units used are
px
%
em
rem
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - Pixels
This is the most common unit used in CSS
A single px maps to one pixel on your screen
Example
div {
height: 32px;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - Percentage
This is used a lot in responsive web design (when you want to adjust page based on
the size of the device)
Important Note: The percentage is based on the parent element if the element is nested
Example Output
div {
<body> width: 50%;
<div> }
<div id=“inner”>
#inner {
</div> width: 50%
</div> }
</body>
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - em
This is relative to the font-size value of the element (parent)
The size is relative to the text on the page so that it is easier to read on a smaller
device
The <div> will have a font size of 3 times the font-size
Example
of the <body>
div {
font-size: 3em; Typically, the font-size of the body text by default is 16px
}
With the <div> being 3 times that, you get the 48px
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - rem
Similar to the em unit of measure except it is easier to understand
The rem unit of measure is based off of the font-size of the root element
Example
div {
font-size: 3rem;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
Let's learn about
CSS Colors
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Colors
There are several CSS properties which specify colors for parts of HTML elements.
For instance, color, background-color, border etc.
When you specify a color, you can do so using the following formats:
Preset Color Codes
Hexadecimal RGB
RGB
RGBA
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - predefined
CSS contains a set of predefined colors like red, green etc.
Some common preset colors are black, green, blue, red, yellow, white, gray, purple and so on
Example
div {
background-color: green;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - Hexa
The hexadecimal RGB color notation splits any given color nuance into three
components: Red, Green and Blue
It always starts with a # symbol and followed by 6 hexadecimal numbers
Example
div {
background-color: #ff00ff;
}
https://coolors.co – Use this cool website to generate color themes for your website
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - RGB
Each color is specified as a mix between red, green and blue
You use decimal numbers between 0 and 255 for each component – Red, Green and Blue
Example
div {
background-color: rgb(255, 0, 255)
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Units - RGBA
RGBA colors mean Red, Green, Blue and Alpha
The RGB part is the same as in RGB colors. The A (alpha channel) specifies the opacity of the color
The alpha channel value can be set between 0 (fully transparent) and 1.0 (fully opaque)
Example
div {
background-color: rgba(255, 0, 255, 0.7)
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
Let’s get back to Layouts
CSS Display
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Display
As mentioned earlier, each HTML element is either block or inline by default
You can change this property of an element using the display property
<body> Output
<p>Sample Para 1</p>
<p>Sample Para 2</p> Sample Para 1 Sample Para 2
HTML <a> Link 1</a> Link 1
<a> Link 2 </a>
Link 2
</body>
p{
display: inline;
}
CSS
a{
display: block
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Display
Using the value “none” with display will remove the element from the browser display
<body> Output
<p>Para 1</p>
<p>Para 2</p> Link 1
HTML <a> Link 1</a> Link 2
<a> Link 2 </a>
</body>
NOTE:
p{
display: none; The space for the element
} is collapsed
CSS
a{
display: block
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Visibility
If you want to preserve the space of the element (as opposite to display: none)
<body> Output
<p>Para 1</p>
<p>Para 2</p>
HTML <a> Link 1</a>
<a> Link 2 </a>
</body> Link 1
Link 2
p{
visibility: hidden; NOTE:
}
CSS The space for the element
a{
is preserved
display: block
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Display
Important Note: If an element is inline, the properties width and height are ignored
<body> Output
<p>Para 1</p>
<a> Link 1</a> Para 1
HTML <a> Link 2 </a>
</body>
a{
height: 500px
} Link 1 Link 2
CSS
p{
height: 500px
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
Let’s learn
CSS Layouts
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Layouts
Now we know that each HTML element is shown as a box on the web page
If elements are block-level, the boxes are placed on top of each other
If elements are inline, the boxes are placed beside each other
When making a complex layout, you should be able to move the boxes as your like
Layouts in CSS can be done in three ways
Building from scratch using Built in CSS Layouts such as Using external CSS Frameworks such
floats and clear Grid and Flexbox as Bootstrap and so on
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Layouts
Let's learn this with an example
Current Expected
Margin between the boxes is 15px
Width of container = 900px
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/RwoprQB
<body> Output
<div id=“container”>
<div class=“inner”></div>
<div class=“inner”></div>
<div class=“inner”></div>
</div>
</body>
#container
{
width: 900 px;
}
.inner
{
background-color: red;
height: 100px;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
STEP 1
Set the size of each <div> box – Calculate the Size
Let the size of each box be x
Width of container = 900px
3x + 15 + 15 = 900
3x = 900 - 30
3x = 870
Margin between the boxes is 15px
x = 870 / 3
x = 290
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/RwoprQB
<body> Output
<div id=“container”>
<div class=“inner”></div>
<div class=“inner”></div>
<div class=“inner”></div>
</div>
</body>
#container
{
width: 900 px;
}
.inner
{
background-color: red;
height: 100px;
width: 290px;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
STEP 2
We need to move the boxes one beside the other
Can we use display: inline?
NO
Remember, you cannot have width and height for an
Why? inline element. Everything will collapse and have no
width and height
R A P I D A P P L I C AT I O N
DEVELOPMENT
STEP 2
We need to move the boxes one beside the other
We use the CSS property called float
Float supports three values: Left, Right and None
1 1 2 3 3 2 1
float: none; float: left; float: right;
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/RwoprQB
<body> Output
<div id=“container”>
<div class=“inner”></div>
<div class=“inner”></div>
<div class=“inner”></div>
</div>
</body>
#container
{
width: 900 px;
}
.inner
{
background-color: red;
height: 100px;
width: 290px;
float: left;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
STEP 3
Set the margins in between the boxes
We can use the margin-right property
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/RwoprQB
<body> Output
<div id=“container”>
<div class=“inner”></div>
<div class=“inner”></div>
<div class=“inner”></div>
</div>
</body>
#container
{
width: 900 px;
}
.inner
{
background-color: red;
height: 100px;
WHY?
width: 290px;
float: left;
margin-right: 15px;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
STEP 3
Set the margins in between the boxes
Reason: Adding margin-right to all will increase the area
Width of container = 900px
15px 15px 15px
3 (290) + 15 + 15 + 15 = 915
Solution: Remove the margin-right from the last box
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/RwoprQB
<body> Output
<div id=“container”>
<div class=“inner”></div>
<div class=“inner”></div>
<div class=“inner”></div>
</div>
</body>
#container .inner:last-child
{ {
width: 900 px; margin-right: 0px;
} }
.inner
{
background-color: red;
height: 100px;
width: 290px;
float: left;
margin-right: 15px;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Float Issue
Sometimes when floating elements on the page, there is a possibility of bleeding
This is when text below the floating elements comes in between when there is space
Let’s take an example
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/bGBqELy
<body> Output
<div id=“container”>
<div class=“inner first”></div> Hello World
<div class=“inner last”></div>
<p> Hello World </p>
</div>
</body>
#container .first
{ {
width: 900 px; float: left;
} }
.inner .last
{ {
background-color: red; float: right;
height: 100px; }
width: 290px
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
CSS Clear
The issue with bleeding can be fixed using CSS property called clear
Clear property can have three values: left, right and both
Left is used when items are floating on left, right is used when items are floating on right and
both is used when items are floating in both directions
R A P I D A P P L I C AT I O N
DEVELOPMENT Try Here https://codepen.io/drmisbha/pen/bGBqELy
<body>
Output
<div id=“container”>
<div class=“inner first”></div>
<div class=“inner last”></div>
<div class=“clear”></div>
<p> Hello World </p>
</div>
</body> Hello World
#container .first
{ {
width: 900 px; float: left;
} }
.inner .last
{ {
background-color: red; float: right;
height: 100px; }
width: 290px
} .clear {
clear: both;
}
R A P I D A P P L I C AT I O N
DEVELOPMENT
Next Lecture
Building from scratch using Built in CSS Layouts such as Using external CSS Frameworks such
floats and clear Grid and Flexbox as Bootstrap and so on
R A P I D A P P L I C AT I O N
DEVELOPMENT
THANK YOU
