BUW3213 Dynamic

Web System
Development

Dr. Vee Voon Yee

Introduction to CSS
Building Blocks
CSS Layout BUW3213 Dynamic Web System Development
Chapter 3: CSS

Dr. Vee Voon Yee

University Malaysia of Computer Science & Engineering

Semester: September 2021

1/26
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

Introduction to CSS
Building Blocks 1 Introduction to CSS
CSS Layout

2 Building Blocks

3 CSS Layout

2/26
 Styling with CSS

BUW3213 Dynamic
Web System
Development Structure is separated from style in HTML5
Dr. Vee Voon Yee
CSS (Cascading Style Sheets) handle the styling
Introduction to CSS
Building Blocks Keeps the presentation or style separate or decoupled from both
CSS Layout
the content and the structure

Style Declaration
General Form
property : value ;
Properties
> 100 different properties
some apply to any elements, others to specific elements or kinds of
elements
3/26
 CSS Comments

BUW3213 Dynamic
Web System
Development CSS comments are used to explain code and may help you later
Dr. Vee Voon Yee
Comments are ignored by browser
Introduction to CSS
C-style comments: Placed inside the <style> element, between
Building Blocks
CSS Layout
/* and */
Note: C++-style comment (which begins with //) is NOT supported!
/* This is a multi-line comment
You were the shadow to my light
Did you feel us?
Another star, you fade away
Afraid our aim is out of sight
Wanna see us alight
*/

p {
color: gray; /* Set text color to gray / grey */
}

4/26
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

Introduction to CSS
Building Blocks 1 Introduction to CSS
CSS Layout

2 Building Blocks

3 CSS Layout

5/26
 Selectors

BUW3213 Dynamic
Web System
Development Selectors
Dr. Vee Voon Yee
are used to "find" (or select) the HTML elements you want to style
Introduction to CSS there are different kinds of selectors; we will study some common
Building Blocks
selectors
CSS Layout
General Form
selector { property1 : value1 ; property2 : value2 ; }
id selector
uses the id attribute of an HTML element to select a specific element
the id is unique within one page, so the id selector is used to select
one unique element
E.g.,
<p id="paragraph-1">Lorem ipsum dolor sit amet, ...</p>

#paragraph-1 {
text-align: center;
color: red;
}

6/26
 Selectors

BUW3213 Dynamic
Web System
Development class selector
Dr. Vee Voon Yee
selects HTML elements with a specific class attribute
Introduction to CSS E.g.,
Building Blocks
<p class="center">Paragraph 1.</p>
CSS Layout <p class="center">Paragraph 2.</p>

.center {
text-align: center;
color: red;
}

Element selector
selects based on the element name
E.g.,
<p>Paragraph 1.</p>
<p>Paragraph 2.</p>

p {
text-align: center;
color: red;
}

7/26
 Selectors

BUW3213 Dynamic
Web System
Development Universal selector
Dr. Vee Voon Yee selects all HTML elements on the page
Introduction to CSS E.g.,
Building Blocks <p>Paragraph 1.</p>
CSS Layout <p class="center">Paragraph 2.</span>

* {
text-align: center;
color: red;
}

Attribute selector
selects elements with specific attributes or attribute values
E.g.,
<a href="http://www.disney.com" target="_blank">disney.com</a>

a[target] {
text-align: center;
color: red;
}
a[target="_blank"] {
text-align: center;
color: red;
}

Reference:
https://www.w3schools.com/css/css_attribute_selectors.asp
8/26
 Selectors

BUW3213 Dynamic
Web System
Development Descendant selector
Dr. Vee Voon Yee
sequence of space separated selectors
Introduction to CSS E.g.,
Building Blocks
<nav id="left">
CSS Layout <ol>
<li><a href="..."><img ... ></a></li>
<li><a href="..."><img ... ></a></li>
</ol>
<p><a href="http://www.disney.com"><img ...>...
</nav>

/* selects a link anchoring img in nav with id=“left” */

nav#left a img { ... }

Child selector
selects elements that are immediate children of a specified element
E.g.,
<div><h3>...</h3></div>

div > h3 { ... }

9/26
 Selectors

BUW3213 Dynamic
Web System
Development Adjacent sibling selector
Dr. Vee Voon Yee
selects all elements are immediate siblings
Introduction to CSS E.g., div + h3 : selects all h3 that are declared at same level and
Building Blocks
immediately after a div
CSS Layout
General sibling selector
selects all elements that are siblings
E.g., div ~ h3 : selects all h3 that are declared at same level as
div
Reference:
https://www.w3schools.com/css/css_combinators.asp

10/26
 Selectors

BUW3213 Dynamic
Web System
Development Pseudo-class selector
Dr. Vee Voon Yee
selects an element in a special state
Introduction to CSS e.g.,
Building Blocks
a:link { color:#00c; } /* unvisited link */
CSS Layout a:visited { color:#300; } /* visited link */
a:hover { ... } /* mouse over link */
a:active { ... } /* selected link */

Grouping selector
selects all the HTML elements with the same style definitions
e.g.,
h1, h2, p { text-align: center; }
/* equivalent to:
h1 { text-align: center; }
h2 { text-align: center; }
p { text-align: center; }
*/

Reference:
https://www.w3schools.com/css/css_pseudo_classes.asp

11/26
 CSS Box Model

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

Introduction to CSS
Building Blocks
CSS Layout

Content: The content of the box, e.g., text, an image, etc.

Padding: Clears an area around the content; transparent
Border: Goes around the padding and content
Margin: Clears an area outside the border; transparent
12/26
 Viewing the Box Model in Inspector

BUW3213 Dynamic
Web System
Development
Can visualize the box model in your
Dr. Vee Voon Yee
browser
Introduction to CSS
Building Blocks helpful for debugging
CSS Layout
right-click any HTML element
Firefox: Inspect Element
Chrome: Inspect
Safari: Activate Debugging
Opera: Inspect Element

13/26
 Page Formatting Model

BUW3213 Dynamic
Web System
Development <body> or <iframe> (root of the document tree) is the initial
Dr. Vee Voon Yee containing box or root box
Introduction to CSS inside this box, a stack of block boxes of same width as root box
Building Blocks
CSS Layout
Each box consists of:
border
margin (transparent)
padding
content
width and height of content refer only to the content area
background colour of the content "shows through" the padding
margin is transparent and colour of parent shows through

14/26
 Display Property

BUW3213 Dynamic
Web System
Development The default display value of most HTML elements is block or
Dr. Vee Voon Yee
inline.
Introduction to CSS
Building Blocks
display: block
CSS Layout always starts on a new line and takes up the full width available
(stretches out to the left and right as far as it can)
available width for each child box is computed
each box is just high enough for its contents
vertical separation is determined by the top and bottom margins of
adjacent boxes
display: inline
does not start on a new line and only takes up as much width as
necessary
inline boxes flow horizontally to fill available line width
breaks automatically to form separate lines when needed
Reference:

https://www.w3schools.com/css/css_display_visibility.asp

15/26
 Display Property

BUW3213 Dynamic
Web System
Development display: inline-block
Dr. Vee Voon Yee
inline block shrinks to fit size of content
Introduction to CSS elements (img, audio, video) are formatted as inline blocks
Building Blocks
CSS Layout
display: list-item
ul and ol lists are formatted with a marker in front of one or more
block boxes
display: none
contents are not displayed
commonly used with JavaScript to hide and show elements without
deleting and recreating them
Many display properties for table-like behavior (can be added to
divs or spans)
display: table
display: table-cell
display: table-row
display: table-head-group
Reference:
https://www.w3schools.com/cssref/pr_class_display.asp
16/26
 Margin, Border and Padding

BUW3213 Dynamic
Web System
Development Margin is set with the following properties:
Dr. Vee Voon Yee
margin-top, margin-right, margin-bottom, margin-left
Introduction to CSS
Building Blocks
Can set the length of any of these to auto, and then it is determined
CSS Layout by available space and value of opposite margin
/* Pushes image to right side of containing div */
<div style="width:700px;">
<img src="pic.jpg" alt="cat" style="display:block; margin-left:auto; margin-
right:5px">
</div>

Border and Padding are set similarly

margin: 50px 10% 50px 10%
padding: 10px 5px 8px 7px; /* top right bottom left */
padding: 10px 5px 8px; /* top right(left) bottom */
padding: 10px 5px; /* top(bottom) right(left) */
padding: 10px; /* all sides */

Reference:
https://www.w3schools.com/cssref/pr_padding.asp

17/26
 Border Styles

BUW3213 Dynamic
Web System
Development border-style:
Dr. Vee Voon Yee
2D: dotted, dashed, solid, double
Introduction to CSS 3D: groove, ridge, inset, outset
Building Blocks
CSS Layout
border-width:
thin, medium, thick, a given length
border-color:
can be rgb or transparent
References:

https://www.w3schools.com/cssref/pr_border- style.asp
https://www.w3schools.com/cssref/pr_border- width.asp
https://www.w3schools.com/cssref/pr_border- color.asp

18/26
 Sizing Items in CSS

BUW3213 Dynamic
Web System
Development HTML elements have a natural intrinsic size, set before affected by
Dr. Vee Voon Yee
any CSS.
Introduction to CSS
Can give elements a specific size called the extrinsic size
Building Blocks
CSS Layout
with width and height
With a length
With a percentage (of its parent container)
Minimum or maximum size
min-height: Box will be at least this height, but will grow taller if
there is more content
max-width: Can cause the element (useful for an image) to scale
down if not enough space to display it while making sure that it won’t
become larger than the specified max-width
Similar for max-height and min-width
References:
https://developer.mozilla.org/en- US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS

19/26
 Table of Contents

BUW3213 Dynamic
Web System
Development

Dr. Vee Voon Yee

Introduction to CSS
Building Blocks 1 Introduction to CSS
CSS Layout

2 Building Blocks

3 CSS Layout

20/26
 Normal Flow, Flexbox

BUW3213 Dynamic
Web System
Development Normal Flow
Dr. Vee Voon Yee
How the browser lays out HTML pages by default
Introduction to CSS
Flexible Box Layout
Building Blocks
CSS Layout Apply display: flex to the parent element
Can apply flex property to child items to grow and fill the parent
container

21/26
 Grid Layout

BUW3213 Dynamic
Web System
Development Grid Layout
Dr. Vee Voon Yee Apply display: grid to the parent element
Introduction to CSS Also define grid-template-rows and grid-template-columns
Building Blocks
Can apply grid-column and grid-row properties to child items to
CSS Layout
specify the placement
Auto-placement if none specified

22/26
 Floats

BUW3213 Dynamic
Web System
Development Floats
Dr. Vee Voon Yee Move an element to the left or right and removed from normal flow
Introduction to CSS Surrounding content floats around the floated items
Building Blocks float property: left, right, none (default; no floating), inherit
CSS Layout (inherited from the parent)
Elements in normal flow may decide whether to allow floating
elements to appear on its left and/or right
clear property: none, left, right, both
Reference(s):

https://developer.mozilla.org/en- US/docs/Learn/CSS/CSS_layout/Floats
https://www.w3schools.com/css/css_float.asp
https://www.w3schools.com/css/css_float_clear.asp
https://developer.mozilla.org/en- US/docs/Web/CSS/clear

23/26
 Positioning Techniques

BUW3213 Dynamic
Web System
Development Positioning
Dr. Vee Voon Yee 1 Static positioning
Introduction to CSS Element in normal position (nothing to see here)
Building Blocks
2 Relative positioning
CSS Layout
position: relative: Offset from the position in normal flow
3 Absolute positioning
position: absolute: Remove from normal flow, place it using
offsets from the edges of a containing block
4 Fixed positioning
position: fixed: Remove from normal flow, place it using offsets
from the viewport
5 Sticky positioning
position: sticky: Mixes default static positioning with fixed
positioning
The element will scroll in normal flow until it hits offset from the viewport
defined, then it becomes “stuck” as if it had fixed positioning
References:

https://developer.mozilla.org/en- US/docs/Learn/CSS/CSS_layout/Positioning

24/26
 How Well Do Browsers Support CSS3?

BUW3213 Dynamic
Web System
Development https://css3test.com/
Dr. Vee Voon Yee
https://caniuse.com/
Introduction to CSS
Building Blocks
CSS Layout

25/26
 Readings

BUW3213 Dynamic
Web System
Development Video: Build a Classic Layout FAST in CSS Grid
Dr. Vee Voon Yee
The Missing Links: Chapters 19–21
Introduction to CSS
Building Blocks MDN Introduction to CSS
CSS Layout
w3schools CSS tutorial (up to and including CSS Box Model)
Optional: Web design in 4 minutes
Optional: Optional: 3D engine in HTML and CSS
Extra: CSS Art from Diana A. Smith

26/26