CST8285

WEB PROGRAMMING

WEEK # 4
CREATING LAYOUT USING CSS

BY
HALA OWN, Ph.D.
 Lesson Agenda
❑ Cascading(inheritance, Specificity and location)
❑ Creating Layout using CSS
❑ Normal flow
❑ CSS box model
❑ Flex layout
❑ Grid layout
❑Units used in CSS
❑Using Developers Tools, CSS validation

2
 Color Values
Color (Named) Color HEX Color RGB
Black #000000 rgb(0,0,0)
Red #FF0000 rgb(255,0,0)
Green #00FF00 rgb(0,255,0)
Blue #0000FF rgb(0,0,255)
Yellow #FFFF00 rgb(255,255,0)
Aqua #00FFFF rgb(0,255,255)
Fuchsia #FF00FF rgb(255,0,255)
Gray #808080 rgb(128, 128, 128)
Silver #C0C0C0 rgb(192,192,192)
Gold #FFD700 rgb(255,215,0)
White #FFFFFF rgb(255,255,255)

3
 Cascade Algorithm

Cascade

Order Specificity Inheritance

4
 CSS Cascaded Value

The cascading algorithm takes an unordered list of declared values and

outputs a single value that is called the cascaded value.

• Importance: The importance of each declaration(!important;)

• Specificity: The specificity of the CSS selectors

• Location or Order: The order of the CSS declarations in the source code

• Inheritance

5
 CSS Cascading : Order

Given the HTML & CSS below what color will the <p> be?

p {
<p id="text">
color: blue;
Very pretty, very stylish
</p> }
html
p {
color: red;
} CSS

• Styles "cascade" together when there are conflicting selectors but different properties.
• Rules that appear later have more weight

6
 CSS Cascading : Location

strongest

Browser ➔ External CSS ➔ Internal CSS ➔ Inline Style

When styles conflict, the “nearest” (most recently

applied) style wins
• Browser’s Default Behavior
▪ External Style Sheet

– Internal Style Sheet

» Inline Style

7
 CSS Cascading: Specificity
Given an element, and two (or more) different selectors that would "select" it, which rules
would actually apply?
#text {
<p id="text"> color: blue;
Very pretty, very stylish }
</p>
html
p {
color: red;
} CSS

• more specific the selector, the stronger the rule. The id attribute is
considered the most specific.
[Link]

8
 CSS Specificity and Cascading Combined

<style>
#text {
<p id="text"> color: blue;
}
Hello World!
html
</p> p {
color: red;
css
text-decoration: underline;
}

</style>

What will "Hello World!" look like now? Hello World!

9
 CSS Cascading: Inheritance
#text {
color: blue;
<div> }
<p id="text">
Hello World! div {
</p> color: red;
</div> text-decoration: underline;

html }
CSS

Some properties, like color or text-decoration are inheritable. That is: if

there's no conflict, an element will inherit the value for that property from its
parent

10
 CSS Box Model | Box Model
CSS Box model describes a box that
wraps around HTML elements.
You can set the height and width of an
element using the height and width
properties.

width= content width + L/R padding + L/R border + L/R margin

height= content height + T/B padding + T/B border + T/B margin

11 [Link]
 CSS Box Model | Padding 1

• To define the space between the element

border and the element content.
2

Padding: 20px 25px 30px 10px

• Top-right-bottom-left 1. CSS syntax

2. CSS syntax for
implementing shorthand
padding property

12
 CSS Box Model | Boarder
• You can use the CSS Border properties to specify the style and color of
an element’s border.
Possible values:
• border-style

13
 CSS Box Model | Margin
• Using CSS Margin properties you can specify the space around
elements.
1

1. CSS syntax for

implementing the individual
margin property
2. CSS syntax for 2

implementing shorthand margin: 50px 25px 30px 10px

margin property

14
 Collapsing Margins
The W3C defines collapsing margins as:

In CSS, the adjoining margins of two or more

boxes can combine to form a single margin..
• Horizontal margins, on the other hand,
never collapse.

15
 Layout Techniques in CSS

• Document flow (default)

● Float

● Positioning

● FlexBox

● Grid

16
 CSS Layout: Normal Flow
• Block element: The default behavior is for blocks is not to overlap.

• Inline element: The default is that in inline elements will not overlap within the block they
are contained in.

17
Document Flow

Height:
● Block and inline elements normally have the height of their content

Width:
● Inline elements have the width of their content

● Block elements have a width that spans the width of their parent

#css { background-color:
<p id="css">
lightblue; }
CSS is <strong>really</strong>
great!
#html { background-color:
</p>
lightgreen; }
<p id="html">HTML is pretty cool
strong { background-color: white;
too.<p>
}

18
CSS Layout :Display Property
•display: inline; Default. Displays element as inline
element (like <span>)
•display: block; Displays element as block element (like
<p>)
•display: none; Element will not be displayed (no effect
on layout)
display: Flex; or grid (discussed later)

19
 CSS Layout – Floating
Making Elements Float so that they float in a sea of text
• float: left / right ➔ element is on left / right
➔ text flows on right / left.

• clear: left / right / both / none to keep elements from floating on left / right / both sides and
• clear property stops affected element from displaying until designated side is free.

Demo: [Link]
[Link]

20
CSS – Position and Display Properties
Position Property Of An Element
• position: static; default | appear in document / linear flow
• position: relative; positioned relative to its normal position
• position: absolute; positioned relative to its
container(parent)
• position: fixed; relative to browser window
[Link]

21
CSS Layout :Flex Layout
CSS Flexbox Layout is a simpler layout system, typically used for
parts of a web page, not the whole page

22
 CSS Layout :Flex layout…
CSS properties of Flex container
display: flex defines an element as a flexbox container
flex-direction: row | row-reverse | column | column-reverse defines the
direction of the main axis
flex-wrap: nowrap | wrap | wrap-reverse whether and how flex items wrap
when the main axis is `full.
Justify-content : property defines how the browser distributes space between and
around content items along the main-axis of a flex container
align-content: flex-start | flex-end | center | space-between | space-around

23
CSS Layout : The Flexbox Item
CSS properties of Flex items

• Flex-grow : <number>

• Flex-shrink:<number>

• Flex-basis specifies the initial size of the flex item, before any
available space is distributed according to the flex factors

• Flex: shorthand for flex-grow, flex-shrink and flex-basis

• Order: <number>

24
 CSS Layout :Flex Resources

Description with animation:

[Link]
the-ultimate-css-flex-cheatsheet/

Another good resources

[Link]
flexbox/

Good Flex tutorials :

[Link]

25
CSS Layout: Grid Vs Flex

26
CSS GRID LAYOUT

• CSS Grid Layout is a two-dimensional grid-based layout system

Grid uses two categories of elements:
Grid container: This is a block-level element that acts as a parent to the
elements inside it and that you configure with a set number of rows
and columns.
Grid items: These are the elements that reside within the grid container
and that you assign (or the browser assigns automatically) to specific
parts of the grid.
• Height and width of grid columns and grid rows will in general vary
Description
[Link]

27
 CSS Grid Properties

Parent (Container) Grid Properties:

Element (Item) Grid Properties
• display: grid;
• grid-column / grid-row
• grid-template-columns / grid-template-
• justify-self / align-self
rows :percentage /any CSS length
unit/repeat • order
• Gap: pixel value

28
 CSS GRID LAYOUT RESOURCES

[Link]

DEMO

29
 Common Units of Measure Values

Units of measure in CSS are either

relative units, in that they are based on the value of something else, or

absolute units, in that they have a real-world size.

30
Units used in CSS…

• 1em = 12pt = 16px = 100%

An em is equal to the current font-size

▪ if the font-size of the document is 12pt, 1em is equal to 12pt.
▪ 2em would equal 24pt,
▪ 0.5em would equal 6pt, etc.

31
Units used in CSS…

• 1em = 12pt = 16px = 100%

➢Points - pt
▪ used in print media (anything that is to be printed on paper,
etc.).
▪ One point is equal to 1/72 of an inch.
▪ fixed-size units and cannot scale in size.

32
Units used in CSS…

• 1em = 12pt = 16px = 100%

➢Pixels - px
• fixed-size units that are used in screen media (i.e. to be read
on the computer screen).
• One pixel is equal to one dot on the computer
• One problem with the pixel unit is that
▪ it does not scale upward for visually-impaired readers
▪ or downward to fit mobile devices.

33
Units used in CSS…

• 1em = 12pt = 16px = 100%

➢Percent - %
• The percent unit is much like the "em" unit
• the current font-size is equal to 100% (i.e. 12pt = 100%).
• While using the percent unit, your text remains fully
scalable for mobile devices and for accessibility.

34
Units used in CSS…

➢Viewport-percentage lengths: vw and vh units

• The viewport-percentage lengths are relative to the size of
the initial containing block.
• vw unit - equal to 1% of the width of the initial containing
block.
• vh unit - equal to 1% of the height of the initial containing
block. body { width: 80vw; }
main { width: 90%;
min-height: 100vh; }

35
Common Units :Summary

36
CSS Cross-browser Consistency

➢ Resetting padding and margin

*{
margin:0;
padding:0;
}
➢ CSS reset and normalization
• CSS reset: [Link] (resets the browser defaults)
• CSS Normalization: [Link] (attempts to provide better
cross-browser consistency of the default styling)

37
 Multiple Style Sheets Link

<!DOCTYPE html>
<html>
<head>
<title>Multiple Style Sheets - Link</title>
<link rel="stylesheet" type="text/css“ href="css/[Link]" />
<link rel="stylesheet" type="text/css“ href="css/[Link]" />
<link rel="stylesheet" type="text/css“ href="css/[Link]" />
</head>
<body>
<!-- HTML page content here -->
</body>
</html>

38
 CSS file
Multiple Style Sheets @import
Html file @import url("[Link]");
@import url("[Link]");
<!– in html file --!> body {
<!DOCTYPE html> color: red;
<html> background-color: blue;
<head> text-align: center;}
<title>Multiple Style Sheets - #page {
Import</title> width: 600px;
<link rel="stylesheet" type="text/css" text-align: left;
href="css/[Link]" /> margin-left: auto;
</head> margin-right: auto;
border: 1px solid black;
padding: 20px;}
h3 {
color: red;}

39
"Web Fonts" - @font-face

The @font-face selector that allows you to use a font even if it is not installed on the user’s computer.

1- open google fonts

[Link]

2- Add this to your CSS file

@import url(//[Link]/css?family=Open+Sans);

3- Then we can use it to style elements:

body { font-family: 'Open Sans', sans-serif; }

➢For a detailed guide on the @font-face rule: [Link]

40
 What is Bootstrap?

• Bootstrap is a free front-end framework for faster and

easier web development.
• Bootstrap includes HTML and CSS based design
templates for typography, forms, buttons, tables,
navigation, modals, image carousels and many other, as
well as optional JavaScript plugins.
• Bootstrap also gives you the ability to easily create
responsive designs

41
 Responsive Web Design
• Responsive Web Design refers to websites that are designed to adapt
gracefully to the screen size.
• A fluid grid with the layout defined proportionally rather than with
fixed dimensions
• Flexible images and video that scale to fit within the grid
• CSS rules designing layout and typography for devices based on
their size(use @media)
• [Link]
• Important article:
• [Link]

42
 Media Query
Media Types : screen, print,…

/* Default styles for all screens */

@media screen and (max-width: 600px) {

/* Styles for small screens */
}

@media screen and (min-width: 601px) and (max-width: 1024px) {

/* Styles for medium-sized screens */
}

@media screen and (min-width: 1025px) {

/* Styles for large screens */
}

43
Tips to Organize CSS
❑ Use comments

❑ Use consists naming conventions, use meaningful class and ID

name

❑ Structure first design second

❑ Use consistent formatting

❑ Group like style

❑ Split up files

44
Can I Use …….

• [Link]

45
CSS Standard

[Link]

46
 CSS Resources

• Websites often display content in multiple columns (like a magazine or a newspaper)

• There are four different techniques to create multicolumn layouts. Each technique has its
pros and cons:
• CSS float property CSS Float and Clear
• CSS flexbox
• [Link]
• CSS Flexbox
• CSS grid CSS Grid View
• CSS framework like [Link] or Bootstrap, Tailwind Materialize CSS , Hamburgers:
[Link]

• Web safe fonts [Link]

• Check here for CSS templates

47
 More Resources…
• CSS best practices
• [Link]

• Static Vs Relative units in CSS

• [Link]

• Copyright and Fair Use

• “When a person uses material from the Internet for education or work, it comes under the
domain of fair use. But if someone uses the material for publishing it with his name as the
author, it is illegal.”
• If you need to reuse some material that are proprietary and not free to use for everyone, I
advise either take the permission of the site owner or use a page for citation and
mention this is for studying purpose only, i.e. fall under fair use. Do not add your own
copyright on your site.
• [Link]
• Copyright Laws on the Internet - Tech Spirited
48
Questions ???

49