CSS Layouts

CS200: Web Development

Tunis Business School - 2023/2024
Introduction to CSS Layouts

CSS (Cascading Style Sheets) is used to control

the presentation and layout of web pages.
CSS layouts define the structure and
arrangement of elements on a web page.
Effective layouts are essential for creating visually
appealing and user-friendly websites.
Basic Concepts
Box Model
Every HTML element is treated
as a rectangular box.

The box model consists of

content, padding, border, and
margin.

CSS properties like width,

height, margin, padding, and
border control box dimensions.
Box model (example)
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 2px solid #333;
margin: 20px;
}
Display Property

Determines Common values:

• block: Elements stack vertically,

how taking full width.

• inline: Elements stack horizontally,
taking only content width.
elements are • inline-block: Inline-level elements
that can have block-level
properties.
displayed. • none: Element is not displayed at
all.
Display Property (example)

li { span {
display: inline; display: block;
} }
Position Property

Defines an Common values:

element's • static (default): Follows the

normal document flow.
• relative: Positioned relative to
positioning its normal position.
• absolute: Positioned relative to
within its the nearest positioned ancestor.
• fixed: Positioned relative to the
container. viewport.
Position property (example)
div.static { div.fixed {
position: static; position: fixed;
} }

div.relative { div.relative {
position: relative; position: relative;
} }
Common Layout Techniques
Common Layout Techniques

Float
Flexbox
Grid Layout
Responsive Design
Float
Floats

Elements can be floated left or right within their

container.
Useful for creating multi-column layouts and text
wrapping around images.
Commonly used with the clear property to
manage element positioning.
float property

The CSS float property specifies how an

element should float.

The CSS clear property specifies what

elements can float beside the cleared
element and on which side.
float property

The float property accepts two values: left and

right.
Elements with float: “left” will align to the left.
Elements with float: “right” will align to the right.
Elements that are not floated will flow around
the floated elements.
Clear property

The clear property is often used in conjunction

with float.
It specifies which side of an element floating
elements should not be allowed.
Common values: left, right, both, none.
Flexbox
Flexbox

A one-dimensional layout model.

Allows elements to be aligned and distributed within

a container, even when their sizes are unknown.
Great for creating responsive and evenly spaced
layouts.
Container and Items

In Flexbox, there is a container

(parent) and items (children).
The container's properties control
the layout of the items inside it.
Main and Cross Axis

Flexbox operates in two dimensions: the main

axis (horizontal) and the cross axis (vertical).

The main axis is determined by the flex-

direction property.
Creating a Flex Container

To create a flex
container, set .flex-container {
display: flex;
the display }

property to flex
or inline-flex.
The flex container properties

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
The flex-direction Property

“column” • stacks the flex items vertically (from top to bottom)

• stacks the flex items vertically (but from bottom to

“column-reverse” top)

“row” • stacks the flex items horizontally (from left to right)

• stacks the flex items horizontally (but from right to

“row-reverse” left)
flex-wrap property

• specifies that the flex items will wrap

wrap if necessary

• specifies that the flex items will not

nowrap wrap (this is default)

• specifies that the flexible items will

wrap-reverse wrap if necessary, in reverse order
The flex-flow Property

Shorthand property
for setting both the .flex-container {
flex-direction and display: flex;
flex-flow: row wrap;
flex-wrap }
properties.
Main Axis Alignment: justify-content property
.flex-container {
To control the display: flex;
alignment of justify-content: center;
items along the }

main axis, use the

justify-content
property.
justify-content property

center • aligns the flex items at the center of the containe

flex-start • aligns the flex items at the beginning of the container (this is
default)

flex-end • aligns the flex items at the end of the container

space-around • displays the flex items with space before, between, and after the
lines

space-between • displays the flex items with space between the lines
Cross Axis Alignment: align-items property

To control the
alignment of items .flex-container {
along the cross display: flex;
align-items: center;
axis, use the align-
items property. }
align-items property

Center • aligns the flex items in the middle of the container

flex-start • aligns the flex items at the top of the container

flex-end • aligns the flex items at the bottom of the container

stretch • stretches the flex items to fill the container (this is default)

Baseline • aligns the flex items such as their baselines aligns

 FLEXBOX Games & Guide
FlexBox Froggy: https://flexboxfroggy.com/

FelxBox Defense: http://www.flexboxdefense.com/

The CSS Flexbox Handbook:

https://www.freecodecamp.org/news/the-css-flexbox-handbook
Grid Layout
Grid Layout

A two-dimensional layout system.

Defines both row and column layouts.

Excellent for creating complex, grid-based designs

with precise control over element placement.
Grid Container and Grid Items

In CSS Grid, there is a grid container (parent)

and grid items (children).

The container's properties define the grid

layout, and items are placed within the grid.
Rows and Columns

Grids are organized into rows and columns.

You specify the number of rows and columns

using properties like grid-template-rows and
grid-template-columns.
Creating a Grid Container

To create a grid
container, set .grid-container {
the display display: grid;
}
property to grid
or inline-grid.
Defining Grid Rows and Columns
.grid-container {
Use grid-template- display: grid;
rows and grid- grid-template-columns:
80px 200px auto 40px;
template-columns }
.grid-container {
to define the display: grid;
structure of the grid-template-rows: 80px
200px;
grid }
Placing Grid Items
/* starts on column 1, ends on column 5 */

Use the grid-row .item1 {

grid-column: 1 / 5;

and grid-column }
/*start on column 1 and span 3 columns*/

properties to .item1 {
grid-column: 1 / span 3;
}
place items /* starts on row 1, ends on row 4 */
.item1 {
within the grid. }
grid-row: 1 / 4;
Grid Gaps
.container {
You can create display: grid;
grid-gap: 20px;
gaps between }

rows and columns .container {

display: grid;
using the grid-gap grid-row-gap: 10px; /* vertical gap */
grid-column-gap: 20px; /* horizontal
property. gap */
}
The grid-area Property
/*start on row-line 1 and column-
The grid-area property line 2, and end on row-line 5 and
can be used as a column line 6*/
shorthand property for .item8 {
the grid-row-start, grid- grid-area: 1 / 2 / 5 / 6;
column-start, grid-row- }

end and the grid-

column-end properties.
CSS Grid Games & Guide
Grid Garden: https://cssgridgarden.com/

Grid Attack: https://codingfantasy.com/games/css-grid-attack

CSS Grid Handbook:

https://www.freecodecamp.org/news/complete-guide-to-css-grid/
Responsive Design
Definition of Responsive Web Design (RWD)

An approach to web development that makes

web pages render well on a variety of devices
and window or screen sizes.
It aims to provide an optimal user experience,
regardless of whether the visitor is using a
desktop computer, a tablet, or a mobile phone.
Three Core Ingredients
• Use relative units (e.g., percentages) to create flexible
Fluid Grids grids.
• Grid elements adjust proportionally to screen size.

• Ensure images scale properly and maintain their aspect

Flexible Images ratio.
• Use CSS to set max-width: 100%; on images.

• Apply CSS rules based on screen size.

Media Queries • Create layouts that adapt to different devices.
Fluid Grid

A fluid grid system is designed to create

layouts that expand or contract to fill the
available space.
Columns automatically adjust their width to
accommodate various screen sizes.
Flexible Images

Flexible images are images that adapt to the

available space.

Using max-width: 100%; for images ensures

they don't exceed their container's width,
preventing distortion.
Mobile-First Approach

A mobile-first approach involves designing for

small screens first and then progressively
enhancing for larger screens.
It ensures that your design prioritizes the
most critical content and performance.
The viewport

The viewport is the user's visible area of a

web page.

The viewport varies with the device, and will

be smaller on a mobile phone than on a
computer screen.
The viewport

width=device-width

<meta name="viewport" • sets the width of the page to follow

the screen-width of the device
content="width=device- (which will vary depending on the
width, initial- device).
scale=1.0">
initial-scale=1.0

• sets the initial zoom level when the

page is first loaded by the browser.
Media Query

Media queries are conditional

statements in CSS that allow you to
apply styles based on specific
screen characteristics, such as
screen width, height, or orientation.
Basic Structure of a Media Query
A Media Query consists of a media type
and one or more expressions. @media media-type and
(expression) {
The media type specifies the target /* CSS styles to apply
device, such as 'screen', 'print', 'all', etc. when the conditions are met
*/
}
Expressions define the conditions under
which the styles are applied.
@media screen and (max-width:
768px) {
Media Queries are written inside CSS
using the @media rule.
/* Styles for smaller screens here */
}
Common Media Features (expressions)
Width • Width of the viewport.

Height • Height of the viewport.

Orientation • Portrait or landscape.

aspect-ratio • Width-to-height ratio of the viewport.

min-width and max-width • Minimum and maximum width of the viewport.

min-height and max-height • Minimum and maximum height of the viewport.

Examples

Adjusting Font Sizes

Rearranging Layout
Adapting Images
Navigation Menu
Conclusion
CSS layouts are essential for structuring web content.

Understanding the box model, display properties, and positioning

is key.
Choose the appropriate layout technique based on your design
goals.
Embrace responsive design for a better user experience on various
devices.