Pseudo Selectors
• Two types of pseudo selectors: • Pseudo-element selector
• A pseudo-element acts like an extra but fictional HTML element in the code, e.g., a specific part of the element(s)
selector::pseudo-element {
property:value;
}
• Pseudo-class selector
• A pseudo-class is a class (implicitly added by the system) which allows us to selects the
elements which are at certain states or circumstances.
selector:pseudo-class {
property:value;
}
In CSS3, pseudo-elements are indicated by a double colon (::) symbol, but for backward compatibility, systems accept a single colon (:) as they were defined in CSS2.
26

Pseudo-Element Selectors
• Commonly used pseudo-elements: • ::first-line
• Select the first line of the text in the element. • ::first-letter
• Select the first letter of the text in the element.
• ::before
• Can be used to insert some content before the
content of the element. • ::after
• Can be used to insert some content after the content of the element.
• ::selection
• Select the part of a document that has been highlighted by the user

This is a heading

The ::before pseudo-element inserts content before the content of an element.

https://www.w3schools.com/css/tryit.asp?fil ename=trycss_before
27

Pseudo-Class Selectors
• Commonly used pseudo-classes: • :link | :visited,
• Select unvisited | visited link(s) • :hover
• Select an element when your mouse is over it
• :active
• Select the active element
• :first-child
• Select the first child of the target
element
• :nth-child(i) e.g., p:nth-child(2)
• Select all

elements which are the 2nd child of its parents

Mouse over the div element below to change its
background color:

https://www.w3schools.com/css/tryit.asp?filenam e=trycss_pseudo-class_hover_div
28

Units of Measurement
• There are multiple ways of specifying a unit of measurement in CSS. • Some of these are relative units, in that they are based on the value
of something else, such as the size of a parent element.
• Others are absolute units, in that they have a real-world size.
• Unless you are defining a style sheet for printing, it is recommended to avoid using absolute units.
29

Absolute Units
Unit
Description
Type
in
Inches
Absolute
cm
Centimeters
Absolute
mm
Millimeters
Absolute
pt
Points (equal to 1/72 of an inch)
Absolute
pc
Pica (equal to 1/6 of an inch)
Absolute
30

Relative Units
https://www.w3schools.com/cssref/tryit.asp?filename=trycss _unit_rem
Unit
Description
Type
px
Pixel. In CSS2 this is a relative measure, while in CSS3 it is absolute (1/96 of an inch).
Relative (CSS2) Absolute (CSS3)
em
Represents the calculated font-size of the element. When used for font sizes, the em unit is in relation to the font size of the parent.
Relative
%
A measure that is always relative to another value. The precise meaning of % varies depending upon which property it is being used.
Relative
ex
A rarely used relative measure that expresses size in relation to the x-height of an element’s font.
Relative
ch
Another rarely used relative measure; this one expresses size in relation to the width of the zero ("0") character of an element’s font.
Relative (CSS3 only)
rem
Stands for root em, which is the font size of the root element. Unlike em, which may be different for each element, the rem is constant throughout the document.
Relative (CSS3 only)
vw, vh
Stands for viewport width and viewport height. Both are percentage values (between 0 and 100) of the viewport (browser window). This allows an item to change size when the viewport is resized.
Relative (CSS3 only)
31

The concept of Cascade

Inheritance
• Many (but not all) CSS properties affect not only themselves but their descendants as well.
• Font, color, list, and text properties are inheritable.
• Layout, sizing, border, background and spacing properties are not.
• The most notable noninherited properties are related to block-style.
• It is possible to force an element to inherit value from its parent
element by using “inherit” as the value of the properties.
• Example: The following rule will make all paragraphs inherit the background properties from their parents:
p { background: inherit; }
33

How CSS Rules Cascade?
• If there are two or more rules that apply to the same element, it is important to understand which will take precedence.
• Last Rule
• If a selector has two rules, the later of the two will take precedence.
• Specificity
• If one selector is more specific than the others, the more specific rule will take
precedence.
• e.g., p b { } is more specific than p { }. p#intro { } is more specific than p { }.
• Important
• We can add !important after any property value to indicate that it should be considered more important than other rules that apply to the same element/selector.
34

How CSS Rules Cascade
35

The Box Model

CSS Box Model
• In CSS, all HTML elements exist within an element box.
• There are four boxes for each element. • Content
• The innermost box contains the content of the element.
Top
• Padding
• A clear area around the content, which is transparent.
• Border
• Bordersprovideawaytovisuallyseparateelements.
• Margin
• A clear area outside the border, which helps differentiate one element from another. It is transparent.
Bottom
Left
Right
37

Margins
• The margin property controls the gap between boxes of adjacent elements.
• We can set the width of the 4 margins:
• margin-bottom, margin-left, margin-right, margin-top
• Or setting the four in one declaration
• margin: top, right, bottom, left
• E.g.,margin:25px50px75px100px;
38

Margins
• Collapsing margins
• If one box sits on top of another, margins are collapsed , which means the larger of the two margins will be used and the smaller will be disregarded.
• However, horizontal margins are never collapsed.
39

Borders
• You can put borders around all four sides of an element, or just one, two, or three of the sides.
• There are a few features we can specify for the borders • border-style
• solid, dotted, dashed, double, groove, ridge, inset, outset, none, and hidden • border-width
• The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined values: thin, medium, or thick.
• border-color • border-radius
• For setting the radius of a rounded corner
• border-image
• Give the URL of the image to use as a border
border-radius: 15px 50px 30px 5px;
We can find more information on CSS border at https://www.w3schools.com/css/css_border.asp
40

Borders
We also have the long-form for setting each of the borders, e.g.,
p{
border-top-style: dotted; border-right-style: solid; border-bottom-style: dotted; border-left-style: solid;
}
41

Padding
• The padding property allows you to specify how much space should appear between the content of an element and its border.
• Similar to margins, we can specify the padding of each side, • padding-top, padding-right, padding-bottom, padding-left
• Or setting all four in one declaration • E.g., padding: 25px 50px 75px 100px;
42

Content’s Width and Height
• The width and height properties specify the size of the element’s content area.
• Only block-level elements and non-text inline elements such as images have a width and height that you can specify.
• By default, inline elements are only as wide as they need to be to display their contents.
43

Width and Height – Issue 1
• By default, the width and the height refer to the size of the content area. So the total size of an element is equal to not only its content area, but also to the sum of its padding, borders, and margins.
div {
width: 200px;
height: 100px;
padding: 5px;
border: 2px solid black; margin: 10px;
• Example:
}
• The total width of the element is:
• 10px + 2px + 5px + 200px + 5px + 2px + 10px = 234px
• The total height of the element is:
• 10px + 2px + 5px + 100px + 5px + 2px + 10px = 134px
44

Width and Height – Issue 1
• There is another way of representing the size of an element.
• CSS3 introduces the box-sizing property. By setting box-sizing:
border-box, we can get a different measurement.
div {
box-sizing: border-box;
width: 200px;
height: 100px;
padding: 5px;
border: 2px solid black;
margin: 10px;
}
True element width = 10px + 200px + 10px = 220px True element height = 10px + 100px + 10px = 120px
45

Width and Height – Issue 2
} 100px
p{
background-color: silver;
}
p{
background-color: silver; width: 200px;
height: 100px;
}
46

https://www.w3schools.com/cssref/tryit.asp?filename=trycss_overflow
Width and Height – Issue 2
overflow: visible;
(default)
The overflow property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area.
Visible - allows the content to be rendered outside the box.
Hidden – clips the content and does not appear beyond the box.
Scroll - the scrollbars will always be there, even if the content fits in the box.
Auto - The auto value allows the browser to decide how to handle overflow. In most cases, scrollbars are added only when the content doesn’t fit into the box.
overflow: hidden;
overflow: scroll;
overflow: auto;
47

More Controls for the
Developers
48

https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule
CSS At-rules
• At-rules are CSS statements that instructs CSS how to behave.
• They begin with an at sign, '@' character, followed by an identifier
• Identifiers are the defined keywords by the CSS specification.
• Examples: • @charset
• @import
• @namespace • @media
• @supports •:
•:
49

CSS At-rules
@charset
• Example:
• The @charset at-rule specifies the character encoding used in the
style sheet.
• It must be the first element in the style sheet; however, a character set that is placed on the HTTP header will override any @charset rule.
• This at-rule is useful when using non-ASCII characters in some CSS properties, like the content property.
@charset "UTF-8";
50

CSS At-rules
@import
• Examples:
• This rule instructs the stylesheet to request and include an external CSS file as if the contents of that file were right where that line is.
• These rules must precede all other types of rules, except @charset rules.
• Can include list of comma-separated media queries after the URL.
• If the browser does not support any these queries, it does not load the linked resource.
@import 'global.css';
@import url("global.css");
@import url("global.css") screen;
51

CSS At-rules
@supports • Example:
@supports (display: grid)
{
div {
display: grid;
} }
• A conditional group rule that will apply its content if the browser meets the criteria of the given condition.
• This is called a feature query.
• Can use the 'not' operator, 'and' operator, and 'or' operator to form the condition.
@supports (display: table-cell) and (display: list-item) {...}
52

https://www.quackit.com/css/functions/
CSS Functions
• CSS functions are used as a value for various CSS properties. • e.g., background-color: rgb(255,0,0);
• Here are some example functions:
Function Description
attr() Returns the value of an attribute of the selected element
calc() Allows you to perform calculations to determine CSS property values
hsl() Defines colors using the Hue-Saturation-Lightness model (HSL)
hsla() Defines colors using the Hue-Saturation-Lightness-Alpha model (HSLA)
linear-gradient() Sets a linear gradient as the background image. Define at least two colors (top to bottom)
radial-gradient() Sets a radial gradient as the background image. Define at least two colors (center to edges)
rgb() Defines colors using the Red-Green-Blue model (RGB)
var() Inserts the value of a custom property
53

CSS Variables
• Custom properties (sometimes referred to as CSS variables or cascading variables) are entities defined by developers that contain specific values to be reused throughout a document.
• We can declare a custom property using this notation
• --fancy-color: pink;
• The variable name must begin with two dashes (--) and is case sensitive
• To use the custom property, we use the var() CSS function • color: var(--fancy-color);
54

CSS Variables
• Variables in CSS should be declared within a CSS selector that defines its scope.
• For a global scope you can use either the :root or the body selector.
:root {
--main-bg-color: coral;
}
#div1 {
background-color: var(--main-bg-color);
}
#div2 {
background-color: var(--main-bg-color);
}
55

CSS Layout
Display, Visibility, Floats, Positioning

Normal Flow
• Normal flow refers to how the browser will normally display block-level elements and inline elements from left to right and from top to bottom.
• The HTML is displayed in the exact order in which it appears in the source code.
57

Display Property
• The main methods of achieving page layout in CSS are all values of the display property.
• Everything in normal flow has a value of display, which has a default setting.
• E.g., for

https://www.w3schools.com/cssref/tryit.asp?filename=trycss _display
Display Property
• The values this property can take are:
• Inline - This causes a block-level element to act like an inline element.
• Block - This causes an inline element to act like a block-level element.
• Inline-block
• This causes a block-level element to flow like an inline element, but it can be sized using width and height and maintains its block integrity like a block box. Therefore, it won't be broken across paragraph lines like an inline box.
• None - This hides an element from the page. No space is allocated to this element and its decendants.
• Flex - This makes an element to use the Flexbox model and becomes a flex container.
• Grid - This makes an element to use the Grid model and becomes a grid container.
• .. ..
59

Visibility Property
• The visibility property specifies whether or not an element is visible.
• This property can take two values: • hidden
• This hides the element. • visible
• This shows the element.
• The hidden element still takes up space on the page.
60

Float Property
• The float property allows you to place the element as far to the left or right of the containing element and change it from normal flow.
• The surrounding content floats around the floated element.
• The float property has four possible values: • left — Floats the element to the left.
• right — Floats the element to the right.
• none — Specifies no floating at all. [default]
• inherit — Inherited from the element's parent.
61

Float Property
62

Placing Elements Side-by-side
• A lot of layouts place boxes next to each other. The float property is commonly used to achieve this.
• When elements are floated, the height of the boxes can affect where the following elements sit.
63

• Setting the height of the paragraphs to be the same height as the tallest paragraph would solve this issue.
• E.g., height: 250px;
• We can apply the clear property to specify on which sides of an element other floating elements are not allowed to touch.
• Possible values of clear property: • none, left, right, both
• E.g., set

paragraph 4 ...

with clear: left;
https://i.cs.hku.hk/~atctam/c3322/CSS/float-clear.html
Placing Elements Side-by-side
64

Position Property
• CSS has the following positioning schemes that allow you to control the layout of a page:
• Normal flow (static positioning)
• Relative positioning
• This moves an element relative to the location it would occupy in the normal flow. This does not affect the position of surrounding elements; they stay in the position they would be in in normal flow.
• Absolute positioning
• This positions the element in relation to its containing element. The space it would have occupied is
released. Other elements will flow into the released space. • Fixed positioning
• This is a form of absolute positioning that positions the element in relation to the browser window, as opposed to the containing element.
• Stickypositioning
• This makes an element act like static positioning until it hits a defined offset from the viewport, at
which point it acts like fixed positioning relative to its nearest scrolling ancestor.
• You specify the positioning scheme using the position property in CSS.
65

Relative positioning

position: relative;

An element with position: relative; is positioned relative to its
normal position:

The element is positioned according to the normal flow of the document, and then offset relative to itself based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements; thus, the space given for the element in the page layout is the same as if position were static.

66

position: absolute;

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):

67

Fixed Positioning

position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:

68

Try to scroll inside this frame to understand how sticky positioning works.

Note: IE/Edge 15 and earlier versions do not support sticky position.

In this example, the sticky element sticks to the top of the page (top: 0), when you reach its scroll position.

Scroll back up to remove the stickyness.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus
69