![Page 1: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/1.jpg)
CSS
Shan-Hung Wu
CS, NTHU
![Page 3: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/3.jpg)
Outline
• The Basics
• Selectors
• Layout
• Stacking Order
3
![Page 4: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/4.jpg)
Outline
• The Basics
• Selectors
• Layout
• Stacking Order
4
![Page 5: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/5.jpg)
Grammar
selector {
property: value;
}
5
![Page 6: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/6.jpg)
Example
/* for all h1's */
h1 {
color: red;
font-size: 56px;
}
/* for all img's */
img {
border-color: blue;
border-width: 3px;
}
6
![Page 7: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/7.jpg)
Color & Background
h1 {
color: #4b0082;
background: #95a5a6;
}
color: #fff; /* same as #ffffff */
/* alpha specifies opacity */
color: rgba(11, 99, 150, 0.3);
7
![Page 8: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/8.jpg)
More Background Properties
body {background: #000 /* color */
url("img.png") /* image */
no-repeat /* repeat */
fixed /*attachment */
right top; /*position */ }
• CSS3
body {background-size: cover;
}
8
![Page 9: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/9.jpg)
CSS Properties
• Background:– E.g., background-color, background-image, etc.
• Text: – E.g., color, text-align, text-decoration, etc.
• Font:– E.g., font-family, font-size, font-style, font-weight, etc.
• List & table:– E.g., list-style-type, list-style-image, vertical-align, etc.
• Layout:– E.g., width, height, border, padding, margin, display,
visibility, float, position, etc.
• See a list here
9
![Page 10: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/10.jpg)
Native Font Stack
10
body {
font-family:
/* Safari for OS X and iOS */
-apple-system,
/* Chrome >= 56 for OS X , Windows, Linux and Android */
system-ui,
/* Chrome < 56 for OS X */
BlinkMacSystemFont,
/* Windows */
"Segoe UI",
/* Android */
"Roboto",
/* Basic web fallback */
"Helvetica Neue", Arial, sans-serif;
}
![Page 12: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/12.jpg)
Outline
• The Basics
• Selectors
• Layout
• Stacking Order
12
![Page 13: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/13.jpg)
Selectors
<ul id="todo-list">
<li class="done">TODO 1</li>
<li>TODO 2</li>
<li class="done">TODO 3</li>
</ul>
li { /* element/tag selector */
font-weight: bold;
}
#todo-list { /* ID selector */
background-color: gray;
}
.done { /* class selector */
text-decoration: line-through;
}
13
![Page 14: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/14.jpg)
Chrome Inspector
14
![Page 15: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/15.jpg)
More Selectors
/* composition */
#todo-list, li.done {...}
/* descendant selector */
li a {...}
/* adjacent selector */
li.done + li {...}
/* attribute selector */
a[href="http://www.example.com"] {...}
15
![Page 16: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/16.jpg)
Pseudo Classes & Elements
• More selector examples
16
/* pseudo class selector */
a:hover, a:visited {
...
}
li:nth-of-type(3) {
...
}
/* pseudo element selector */
p::first-latter {
font-size: 200%;
}
h1::before {
content: url(image.gif);
}
![Page 17: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/17.jpg)
Inheritance
• Most style properties of an element will be inherited by its descendants
– E.g., font, color, text-align, etc.
• Common exceptions are those related to the box model
– E.g., height, width, border-width, etc.
• Check this reference to see if a property is inheritable
17
![Page 18: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/18.jpg)
Cascading
• Final properties gotten by an element are cascaded from all applicable rules
18
body {
color: gray;
}
#todo-list {
font-weight: bold;
}
#todo-list li {
color: red;
}
li.done {
text-decoration:
line-through;
}
<body>
<ul id="todo-list">
<li>...</li>
<li class="done">
TODO
</li>
</ul>
</body>
![Page 19: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/19.jpg)
How to Resolve Conflicts?
1. By importance
2. By specificity
3. By source order
– Rules written later win
• More about cascade and inheritance19
Example # ID Selectors # Class Selectors # Type Selectors
ul 0 0 1
ul li.done 0 1 2
#sec-2 ul li (wins) 1 0 2
body {
color: gray !important;
}
![Page 20: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/20.jpg)
Outline
• The Basics
• Selectors
• Layout
• Stacking Order
20
![Page 21: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/21.jpg)
HTML Rendering
• The content are rendered following the normal flow
– Block elements are laid out vertically
– Inline elements are laid out horizontally
21
![Page 22: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/22.jpg)
Box Model
22
• Each element is rendered as a box:
CSS3 Box Sizing 'width'
![Page 23: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/23.jpg)
Inline and Block Elements
• If an inline box wraps into multiple lines, you cannot set its width– Not the case for <input> and <img>
• Inline boxes reserve space for descender chars, e.g., ‘g’• <img> is an inline element by default
– There is (unwanted) space between its bottom border and container
23
![Page 24: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/24.jpg)
Hiding Elements
• Method 1: visibility:hidden
– Still occupies space in normal flow
• Method 2: display:none
– Removed from normal flow
24
![Page 25: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/25.jpg)
Centering Text/Elements
• How to center text/inline elements inside a block element?– Add text-align:center to the block
• How to center text in an inline element?– There is no such an issue
• How to center a block element inside another?1. Give inner block a width (otherwise we don’t have
this issue)
2. Add margin-left:auto and margin-right:auto to inner block
25
![Page 26: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/26.jpg)
Margin Collapsing
26
• Adjacent margins collapse between– Sibling elements
– Parent andfirst/last child
![Page 27: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/27.jpg)
Relative Widths and Heights
• It's a good practice to use em and rem
27
div {
width: 70%;
max-width: 640px;
font-size: 16px;
}
html{
font-size: 16px;
}
div {
width: 70%;
max-width: 40rem;
font-size: 1rem;
}
![Page 28: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/28.jpg)
CSS3 Box Sizing
• Box sizing in CSS 3:
28
div {
width: 50%;
padding: 1rem;
border: 0.25rem solid blue;
}
* {
/* border & padding count into width & height */
box-sizing: border-box;
}
![Page 29: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/29.jpg)
Positioning
• Not positioned: static (in normal flow)
29
div {
position: relative; /* in normal flow */
top: 8px; /* offset from static position */
left: 8px;
}
div {
position: absolute; /* removed from normal flow */
top: 8px; /* offset from positioned ancestor */
}
div {
position: fixed; /* removed from normal flow */
top: 8px; /* offset from browser window */
}
![Page 30: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/30.jpg)
Floats
• Removed from normal flow and stick to the left/right-most side of its container
– Unless specified, width and height shrink to fit the content
30
.elem {
float: left;
}
.container::after {
content: '';
display: block;
clear: both;
}
![Page 31: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/31.jpg)
Demo: Photo Gallery
31
![Page 32: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/32.jpg)
Outline
• The Basics
• Selectors
• Layout
• Stacking Order
32
![Page 33: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/33.jpg)
Overlapping Elements
• Elements may overlap
• Which one shows on top?33
<div id="1">...</div>
<div id="2">...</div>
<div id="3">...</div>
<div id="4">...</div>
<div id="5">...</div>
![Page 34: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/34.jpg)
Stacking Order (Bottom to Top)
1. Background and borders of <html>2. Descendant blocks in normal flow (in HTML order)3. Floating blocks4. Inline descendants in the normal flow5. Descendant positioned elements (in HTML order)
34
![Page 35: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/35.jpg)
Z-Index• Default: 0• Stacking order applies to each layer• Elements need to be positioned to take effect
35
![Page 36: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/36.jpg)
How about the order of descendants?
36
![Page 37: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/37.jpg)
Stacking Context• <html>, positioned, and non-full opacity elements creates
stacking contexts• Z-index is local to a stacking context
37
<div id="1">
<div id="2">
<div id="3">
<div id="4">
<div id="5">
<div id="6">
![Page 39: More Inside the Classes · •How to center text/inline elements inside a block element? –Add text-align:centerto the block •How to center text in an inline element? –There](https://reader034.vdocument.in/reader034/viewer/2022042315/5f03d4227e708231d40af808/html5/thumbnails/39.jpg)
Exercise
39