Scribd
Upload
3 views

3.3_CSS-Box_Model

The document covers the fundamentals of Rapid Application Development (RAD) with a focus on CSS, including the CSS box model, properties for width, height, padding, borders, margins, and units of measurement. It explains how to manipulate HTML elements' display properties and layout techniques using CSS, along with color specifications in various formats. The document also emphasizes the importance of responsive design and provides practical examples for better understanding.

Uploaded by

dha.abdulaziz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

3.3_CSS-Box_Model

The document covers the fundamentals of Rapid Application Development (RAD) with a focus on CSS, including the CSS box model, properties for width, height, padding, borders, margins, and units of measurement. It explains how to manipulate HTML elements' display properties and layout techniques using CSS, along with color specifications in various formats. The document also emphasizes the importance of responsive design and provides practical examples for better understanding.

Uploaded by

dha.abdulaziz
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 50

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

You might also like