Holy Spirit University of Kaslik

(USEK)

Faculty of Arts and Sciences

CSC360 – Internet Technology

Spring 2023-2024
 Chapter 2:
Cascading Style Sheet CSS3
 Outline
• Introduction
• Syntax
• How to add CSS
• Multiple Style Sheets
• Cascading Order
• CSS Selectors
• CSS Comments
• CSS Measurement Units
• CSS Colors
• span element
• CSS Text
• CSS Borders
• CSS Padding
• CSS Backgrounds
• CSS Tables
• CSS Forms
• CSS Flexbox
• HTML Layout Elements
• CSS HTML Validations
USEK CSC360 3
 CSS Flexbox
• The Flexible Box Layout Module is used to design flexible
responsive layout structure.
• One of the advantages of Flexbox is the ability to change the
display order of items independent of the html source.
• To start using the Flexbox model, you need to first define a
flex container.
• A Flexible Layout must have a parent element with
the display property set to flex.
• Direct child elements(s) of the flexible container
automatically becomes flexible items.

USEK CSC360 4
 CSS Flexbox
• A flex container with three flex items:

USEK CSC360 5
 CSS Flexbox
• The flex-direction property defines in which direction the
container wants to stack the flex items:

USEK CSC360 6
 CSS Flexbox
• The flex-direction property:

USEK CSC360 7
 CSS Flexbox
• The flex-direction property:

USEK CSC360 8
 CSS Flexbox

USEK CSC360 9
 CSS Flexbox
• The flex-wrap property specifies whether the flex items
should wrap or not (if necessary):

After resizing the browser window:

USEK CSC360 10
 CSS Flexbox

USEK CSC360 11
 CSS Flexbox
• The wrap-reverse value specifies that the flexible items
will wrap if necessary, in reverse order:

After resizing the browser window:

USEK CSC360 12
 CSS Flexbox

USEK CSC360 13
 CSS Flexbox

USEK CSC360 14
 CSS Flexbox
• The flex-flow property is a shorthand property for setting
both the flex-direction and flex-wrap properties.

• Note: If you want flex items to wrap in column-direction,

you need to define a height on the container.

USEK CSC360 15
 CSS Flexbox
• The justify-content property is used to align the flex
items:
– The center value aligns the flex items at the center of the
container:

USEK CSC360 16
 CSS Flexbox
• The justify-content property:
– The flex-start value aligns the flex items at the beginning of the
container (this is default):

USEK CSC360 17
 CSS Flexbox
• The justify-content property:
– The flex-end value aligns the flex items at end of the container:

USEK CSC360 18
 CSS Flexbox
• The justify-content property:
– The space-around value displays the flex items with space
before, between, and after the lines:

USEK CSC360 19
 CSS Flexbox
• The justify-content property:
– The space-between value displays the flex items with space
between the lines:

USEK CSC360 20
 CSS Flexbox
• The justify-content property:

USEK CSC360 21
 CSS Flexbox
• The justify-content property:

USEK CSC360 22
 CSS Flexbox
• The align-items property is used to align the flex items.
– The center value aligns the flex items in the middle of the
container:

USEK CSC360 23
 CSS Flexbox
• The align-items:
– The flex-start value aligns the flex items at the top of the
container:

USEK CSC360 24
 CSS Flexbox
• The align-items:
– The flex-end value aligns the flex items at the bottom of the
container:

USEK CSC360 25
 CSS Flexbox
• The align-items:
– The stretch value stretches the flex items to fill the container
(this is default):

USEK CSC360 26
 CSS Flexbox
• The align-items:

USEK CSC360 27
 CSS Flexbox
• The align-content property is used to align the flex lines.
– The space-between value displays the flex lines with equal
space between them:

USEK CSC360 28
 CSS Flexbox
• The align-content:
– The space-around value displays the flex lines with space
before, between, and after them:

USEK CSC360 29
 CSS Flexbox
• The align-content:
– The stretch value stretches the flex lines to take up the
remaining space (this is default):

USEK CSC360 30
 CSS Flexbox
• The align-content:
– The center value displays the flex lines in the middle of the
container:

USEK CSC360 31
 CSS Flexbox
• The align-content:
– The flex-start value displays the flex lines at the start of the
container:

USEK CSC360 32
 CSS Flexbox
• The align-content:
– The flex-end value displays the flex lines at the end of the
container:

USEK CSC360 33
 CSS Flexbox
• CSS Flex Items:
 The direct child elements of a flex container automatically
becomes flexible (flex) items.
– The order property can change the order of the flex items:

USEK CSC360 34
 CSS Flexbox
• CSS Flex Items:
– The flex-grow property specifies how much a flex item will
grow relative to the rest of the flex items. The value must be
a number, default value is 0:

USEK CSC360 35
 CSS Flexbox
• CSS Flex Items:
– The flex-shrink property specifies how much a flex item will
shrink relative to the rest of the flex items. The value must be
a number, default value is 1:

USEK CSC360 36
 CSS Flexbox
• CSS Flex Items:
– The align-self property specifies the alignment for the
selected item inside the flexible container. It overrides the
default alignment set by the container's align-items property:

USEK CSC360 37
 CSS Flexbox
• CSS Media Queries:
 The @media rule, introduced in CSS2, is used to define
different style rules for different media types.
 Media queries in CSS3 extended the CSS2 media types idea:
Instead of looking for a type of device, they look at the
capability of the device.
 Media queries can be used to check many things, such as:
– Width and height of the viewport
– Orientation of the viewport (landscape or portrait)
– Resolution

USEK CSC360 38
 CSS Flexbox
• CSS Media Queries:

USEK CSC360 39
 CSS Flexbox
• CSS Media Queries:

USEK CSC360 40
 CSS Flexbox
• CSS Media Queries:
– Media Query Syntax:
A media query consists of a media type and can contain one or more
media features:

– The mediatype is optional (if omitted, it will be set to all). However, if

you use not or only, you must also specify a mediatype.
– The result of the query is true if the specified media type matches the
type of device the document is being displayed on, and all media
features in the media query are true. When a media query is true, the
corresponding style sheet or style rules are applied, following the
normal cascading rules.

USEK CSC360 41
 CSS Flexbox
• CSS Media Queries:
– Media Query Syntax:
Meaning of the not, only, and and keywords:
• not: This keyword inverts the meaning of an entire media
query.
• only: This keyword prevents older browsers that do not
support media queries from applying the specified
styles. It has no effect on modern browsers.
• and: This keyword combines a media type and one or
more media features.

USEK CSC360 42
 CSS Flexbox
• CSS Media Queries:
The following example changes the background-color to lightgreen if the
viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the
background-color will be pink):

USEK CSC360 43
 CSS Flexbox
• CSS Flex Responsive:
For example, if you want to create a two-column layout for most
screen sizes, and a one-column layout for small screen sizes (such
as phones and tablets), you can change the flex-direction from row
to column at a specific breakpoint (800px in the example below):

USEK CSC360 44
 CSS Flexbox
• CSS Flex Responsive:

USEK CSC360 45
 Other CSS
• CSS Links

• CSS Lists

• CSS Images ....

USEK CSC360 46
 HTML Layout Elements
• HTML layouts provide a way to arrange web pages in
well-mannered, well-structured, and in responsive
form or we can say that HTML layout specifies a way in
which the web pages can be arranged. Web-page
layout works with arrangement of visual elements of
an HTML document.
• Web page layout is the most important part to keep in
mind while creating a website so that our website can
appear professional with the great look. You can also
use CSS and JAVASCRIPT based frameworks for creating
layouts for responsive and dynamic website designing.

USEK CSC360 47
 HTML Layout Elements
• The Box Model:

USEK CSC360 48
 HTML Layout Elements
• HTML Table Based Layout:
Table provides the simplest way for creating layouts in
HTML. Generally, this involves the process of putting the
contents such as text, images, and so on into rows and
columns.

USEK CSC360 49
 HTML Layout Elements
• HTML Table Based Layout:
The following layout is created using an HTML table with 3
rows and 2 columns:

USEK CSC360 50
 HTML Layout Elements
• HTML Table Based Layout:

USEK CSC360 51
 HTML Layout Elements
• HTML Div Based Layout:

– Using the <div> elements is the most common

method of creating layouts in HTML. The <div>
(stands for division) element is used for marking out a
block of content, or set of other elements inside an
HTML document.
– We can define multiple <div> elements inside a HTML
document and each of them can be used to show
different set of information. Inside <div> element we
can use more than one HTML elements like
paragpraph(<p>), heading(<h2>), span(<span>) etc.
We can group all the HTML elements of the <div> tag
and can apply CSS to them to make them more
understandable and presentable.
USEK CSC360 52
 HTML Layout Elements
• HTML Div Based Layout:
The following example uses the <div> elements to create the
same layout that we have created in the previous example:

USEK CSC360 53
 HTML Layout Elements
• Using the HTML5 Structural Elements:

USEK CSC360 54
 HTML Layout Elements
• Using the HTML5 Structural Elements:

USEK CSC360 55
 HTML Layout Elements
• HTML <header>:
The <header> element is used to create header section of
web pages. The header contains the introductory content,
heading element, logo or icon for the webpage, and
authorship information.
Example:

USEK CSC360 56
 HTML Layout Elements
• HTML <nav>:
The <nav> elements is a container for the main
block of navigation links. It can contain links for
the same page or for other pages.
Example:

USEK CSC360 57
 HTML Layout Elements
• HTML <nav>:
Vertical navigation, CSS removes the list marker and
underline:
o nav ul { list-style-type: none; }
o nav a { text-decoration: none; }
Example:

USEK CSC360 58
 HTML Layout Elements
• HTML <nav>:
Horizontal navigation, CSS removes the list marker, removes the
underline, adds padding, and configures the list items for inline display:
o nav ul { list-style-type: none;}
o nav a { text-decoration: none; padding-right: 10px; }
o nav li { display: inline; }

• Example:

USEK CSC360 59
 HTML Layout Elements
• HTML <section>:
HTML <section> elements represent a separate section of a
web page which contains related element grouped together. It
can contain: text, images, tables, videos, etc.
Example:

USEK CSC360 60
 HTML Layout Elements
• HTML <article>:
HTML <article> is used to contain a self-contained article
such as big story, huge article, etc.
• Example:

USEK CSC360 61
 HTML Layout Elements
• HTML <aside>:
HTML <aside> define aside content related to primary
content. The <aside> content must be related to the primary
content. It can function as side bar for the main content of
web page.
• Example:

USEK CSC360 62
 HTML Layout Elements
• HTML <footer>:
HTML <footer> element defines the footer for that document
or web page. It mostly contains information about author,
copyright, other links, etc.
• Example:

USEK CSC360 63
 HTML Layout Elements

USEK CSC360 64
 HTML Layout Elements
The following example uses the new HTML5 structural elements
to create the same layout that we have created in the previous
example:

USEK CSC360 65
 HTML Layout Elements
• Responsive Website using Flexbox:
We can use flexbox to create a responsive website,
containing a flexible navigation bar and flexible content:

USEK CSC360 66
 HTML Layout Elements
• Responsive Website using Flexbox:

USEK CSC360 67
 HTML Layout Elements
• Responsive Website using Flexbox:

USEK CSC360 68
 CSS HTML Validations
• Validation is the process of checking something
against a rule.

• When you are a beginner, it is very common

that you will commit many mistakes in writing
your HTML code and your CSS rules.

• If you want to validate your CSS style sheet

embedded in an HTML document, you should
first check that the HTML you use is valid.
USEK CSC360 69
 CSS HTML Validations
• There are many tools available, from the W3C
and other places, that allow you to validate
the code on your sites:
– Validator.nu
– The W3C Markup Validator
– The W3C Link Checker
– The W3C CSS Validator
– The WDG CSS check validator

USEK CSC360 70