CSS Chapter 2

This document discusses HTML layout elements and CSS techniques for building responsive grid layouts. It describes semantic HTML elements like <header>, <nav>, <section>, and <article> that define parts of a webpage. It also explains four techniques for multi-column layouts: CSS frameworks, the float property, flexbox, and CSS grid. The document provides an example of how to build a responsive 12-column grid layout using CSS by calculating column widths as percentages and applying floating and padding.

Uploaded by

Raymond Puno

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

47 views

CSS Chapter 2

Uploaded by

Raymond Puno

Available Formats

Download as PPTX, PDF, TXT or read online on Scribd

You are on page 1/ 34

CSS

Chapter 2
Layout, Comments, Colors, and Backgrounds
Layout
Example

WEB PAGE
HTML Layout Elements and Techniques
• Websites often display content in multiple columns (like
a magazine or a newspaper).
Example
HTML Layout Elements
• HTML has several semantic elements that
define the different parts of a web page:
HTML5 Semantic Elements
• <header> - Defines a header for a document or
a section
• <nav> - Defines a set of navigation links
• <section> - Defines a section in a document
• <article> - Defines an independent, self-
contained content
HTML Layout Elements
• <aside> - Defines content aside from the
content (like a sidebar)
• <footer> - Defines a footer for a
document or a section
• <details> - Defines additional details that
the user can open and close on demand
• <summary> - Defines a heading for the
<details> element
HTML Layout Techniques
• There are four different techniques to create multicolumn
layouts. Each technique has its pros and cons:

• CSS framework
• CSS float property
• CSS flexbox
• CSS grid
CSS framework
• A CSS framework is a library allowing for easier, more
standards-compliant web design using the Cascading Style
Sheets language.
• Most of these frameworks contain at least a grid.
• More functional frameworks also come with more features and
additional JavaScript based functions, but are mostly design
oriented and focused around interactive UI patterns.
• This detail differentiates CSS frameworks from other JavaScript
frameworks.
CSS Float Layout
• It is common to do entire web layouts using the CSS float
property.
• Float is easy to learn - you just need to remember how the float
and clear properties work.
• Disadvantages: Floating elements are tied to the document flow,
which may harm the flexibility.
The float Property
• The float property is used for positioning and formatting content e.g. let an
image float left to the text in a container.
• The float property can have one of the following values:
• left - The element floats to the left of its container
• right - The element floats to the right of its container
• none - The element does not float (will be displayed just where it occurs in the text).
This is default
• In its simplest use, the float property can be used to wrap text around
images.
The float Property
• Example - float: right;
img {
float: right;
}

• Example – float: left;

img {
float: left;
}
The float Property
• Example - Float Next To Each Other
• Normally div elements will be displayed on top of each other. However, if
we use float: left we can let elements float next to each other:
The float Property
CSS Flexbox Layout
• Use of flexbox ensures that elements behave predictably when
the page layout must accommodate different screen sizes and
different display devices.
CSS Flexbox Layout
• CSS Flexbox Layout Module
• Before the Flexbox Layout module, there were four layout
modes:
• Block, for sections in a webpage
• Inline, for text
• Table, for two-dimensional table data
• Positioned, for explicit position of an element
• The Flexible Box Layout Module, makes it easier to design
flexible responsive layout structure without using float or
positioning.
CSS Grid Layout
• The CSS Grid Layout Module offers a grid-based layout system,
with rows and columns, making it easier to design web pages
without having to use floats and positioning.
What is a Grid-View?
• Many web pages are based on a grid-view, which means that the
page is divided into columns:
What is a Grid-View?
• Using a grid-view is very helpful when designing web pages. It
makes it easier to place elements on the page.
• A responsive grid-view often has 12 columns, and has a total
width of 100%, and will shrink and expand as you resize the
browser window.
Building a Responsive Grid-View
• Let's start building a responsive grid-view.
• First ensure that all HTML elements have the box-sizing
property set to border-box. This makes sure that the padding and
border are included in the total width and height of the elements.
• Add the following code in your CSS:

• box-sizing property allows us to include the padding and border

in an element's total width and height.
Building a Responsive Grid-View
• The following example shows a simple responsive web page,
with two columns:
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}
Building a Responsive Grid-View
• The example above is fine if the web page only contains two
columns.
• However, we want to use a responsive grid-view with 12
columns, to have more control over the web page.
• First we must calculate the percentage for one column: 100% /
12 columns = 8.33%.
• Then we make one class for each of the 12 columns, class="col-"
and a number defining how many columns the section should
span:
Building a Responsive Grid-View
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Building a Responsive Grid-View
All these columns should be floating to the left, and have a padding of 15px:

[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
Building a Responsive Grid-View
Each row should be wrapped in a <div>. The number of columns inside a row should always
add up to 12: