Topic 8 - Understanding the Functionality of CSS – Part 2
Edexcel IAS
Unit 2
Topic 8
Understanding the
Functionality of CSS
Part 2
Cascading Style Sheets (CSS) is one of the core technologies for building websites
as it is used to control the design and layout of a web page.
CSS is still evolving and understanding the latest CSS concepts, such as the box
model, specificity and the cascade, transforms and responsiveness, will enable
students to develop modern interfaces that work across a variety of screen sizes.
Page 1 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Table of Contents
Topic 8 Understanding the Functionality of CSS........................................................4
CSS Fonts...............................................................................................................4
The CSS font-family Property..............................................................................4
Web Safe Fonts...................................................................................................5
Font Style............................................................................................................5
Font-Weight.........................................................................................................6
Font Size.............................................................................................................6
CSS Links................................................................................................................6
Text Decoration...................................................................................................7
Background Color................................................................................................8
CSS Tables..............................................................................................................8
Table Borders......................................................................................................8
Table Width.........................................................................................................8
Collapse Table Borders........................................................................................8
Table Width and Height.......................................................................................9
Horizontal Alignment..........................................................................................9
Vertical Alignment...............................................................................................9
Table Padding....................................................................................................10
Table Color........................................................................................................10
The position Property...........................................................................................10
position: static;.................................................................................................11
position: relative;..............................................................................................11
position: fixed;..................................................................................................11
position: absolute;............................................................................................12
position: sticky;.................................................................................................13
CSS Overflow........................................................................................................13
overflow: hidden...............................................................................................14
overflow: scroll..................................................................................................14
overflow: auto...................................................................................................15
The float Property................................................................................................15
CSS Transitions.....................................................................................................16
Delay the Transition Effect................................................................................16
Page 2 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
CSS 2D Transforms...............................................................................................17
The translate() Method.....................................................................................17
The rotate() Method..........................................................................................18
The scale() Method...........................................................................................18
The scaleX() Method.........................................................................................19
The scaleY() Method.........................................................................................19
The skewX() Method.........................................................................................19
The skewY() Method..........................................................................................19
The skew() Method............................................................................................20
CSS 3D Transforms...............................................................................................20
The rotateX() Method........................................................................................20
The rotateY() Method........................................................................................21
The rotateZ() Method........................................................................................21
Page 3 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Topic 8 Understanding the Functionality of
CSS
CSS Fonts
Choosing the right font has a huge impact on how the readers experience a
website.
The right font can create a strong identity for your brand.
Using a font that is easy to read is important. The font adds value to your text. It is
also important to choose the correct color and text size for the font.
In CSS there are five generic font families:
Serif fonts have a small stroke at the edges of each letter. They create a
sense of formality and elegance.
Sans-serif fonts have clean lines (no small strokes attached). They create a
modern and minimalistic look.
Monospace fonts - here all the letters have the same fixed width. They
create a mechanical look.
Cursive fonts imitate human handwriting.
Fantasy fonts are decorative/playful fonts.
The CSS font-family Property
In CSS, we use the font-family property to specify the font of a text.
The font-family property should hold several font names as a "fallback" system,
to ensure maximum compatibility between browsers/operating systems.
CSS Input
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
Page 4 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Web Safe Fonts
Web safe fonts are fonts that are universally installed across all browsers and
devices.
However, there are no 100% completely web safe fonts. There is always a chance
that a font is not found or is not installed properly.
Therefore, it is very important to always use fallback fonts.
The following list are the best web safe fonts for HTML and CSS:
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
CSS Input
[Link] {
font-style: normal;
}
[Link] {
font-style: italic;
}
[Link] {
font-style: oblique;
}
Page 5 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Font-Weight
The font-weight property specifies the weight of a font:
CSS Input
[Link] {
font-weight: normal;
}
[Link] {
font-weight: bold;
}
Font Size
The font-size property sets the size of the text.
CSS Input
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
CSS Links
Links can be styled with any CSS property (e.g. color, font-family,
background, etc.).
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Page 6 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
CSS Input
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
CSS Input
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
Page 7 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Background Color
The background-color property can be used to specify a background color for
links:
CSS Input
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
CSS Tables
Table Borders
To specify table borders in CSS, use the border property.
CSS Input
table, th, td {
border: 1px solid;
}
Table Width
The table above might seem small in some cases. If you need a table that should
span the entire screen (full-width), add width: 100% to the <table> element:
CSS Input
table {
width: 100%;
}
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed
into a single border:
CSS Input
table {
border-collapse: collapse;
}
Page 8 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Table Width and Height
The width and height of a table are defined by the width and height properties.
CSS Input
table {
width: 100%;
}
th {
height: 70px;
}
Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or
center) of the content in <th> or <td>.
By default, the content of <th> elements are center-aligned and the content of
<td> elements are left-aligned.
To center-align the content of <td> elements as well, use text-align: center:
CSS Input
td {
text-align: center;
}
Vertical Alignment
The vertical-align property sets the vertical alignment (like top, bottom, or
middle) of the content in <th> or <td>.
By default, the vertical alignment of the content in a table is middle (for both <th>
and <td> elements).
CSS Input
td {
height: 50px;
vertical-align: bottom;
}
Page 9 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
Table Padding
To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements:
CSS Input
th, td {
padding: 15px;
text-align: left;
}
Table Color
The example below specifies the background color and text color of <th> elements:
CSS Input
th {
background-color: #04AA6D;
color: white;
}
The position Property
The position property specifies the type of positioning method used for an
element.
There are five different position values:
static
relative
fixed
absolute
sticky
Elements are then positioned using the top, bottom, left, and right properties.
However, these properties will not work unless the position property is set first.
They also work differently depending on the position value.
Page 10 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:
CSS Input
div {
position: static;
border: 3px solid #73AD21;
}
position: relative;
An element with position: relative; is positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position. Other content
will not be adjusted to fit into any gap left by the element.
CSS Input
div {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
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. The top,
right, bottom, and left properties are used to position the element.
A fixed element does not leave a gap in the page where it would normally have
been located.
CSS Input
div {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}
Page 11 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no positioned ancestors, it uses
the document body, and moves along with page scrolling.
Note: Absolute positioned elements are removed from the normal flow, and can
overlap elements.
Here is a simple example:
Here is the CSS that is used:
CSS Input
div1 {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div2 {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
Page 12 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
position: sticky;
An element with position: sticky; is positioned based on the user's scroll
position.
CSS Input
div {
position: sticky;
top: 0;
background-color: green;
border: 2px solid #4CAF50;
}
CSS Overflow
By default, the overflow is visible, meaning that it is not clipped and it renders
outside the element's box:
CSS Input
div {
width: 200px;
height: 65px;
background-color: coral;
overflow: visible;
}
Page 13 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
overflow: hidden
With the hidden value, the overflow is clipped, and the rest of the content is
hidden:
CSS Input
div {
overflow: hidden;
}
overflow: scroll
Setting the value to scroll, the overflow is clipped and a scrollbar is added to
scroll inside the box. Note that this will add a scrollbar both horizontally and
vertically (even if you do not need it):
CSS Input
div {
overflow: scroll;
}
Page 14 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
overflow: auto
The auto value is similar to scroll, but it adds scrollbars only when necessary:
CSS Input
div {
overflow: auto;
}
The float Property
The float property is used for positioning and formatting content e.g. let an image
float left to the text in a container.
The float property can have one of the following values:
left - The element floats to the left of its container
right - The element floats to the right of its container
none - The element does not float (will be displayed just where it occurs in
the text). This is default
inherit - The element inherits the float value of its parent
In its simplest use, the float property can be used to wrap text around images.
Page 15 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
CSS Transitions
CSS transitions allows you to change property values smoothly, over a given
duration.
To create a transition effect, you must specify two things:
the CSS property you want to add an effect to
the duration of the effect
Note: If the duration part is not specified, the transition will have no effect,
because the default value is 0.
The following example shows a 100px * 100px red <div> element. The <div>
element has also specified a transition effect for the width property, with a
duration of 2 seconds:
CSS Input
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
div:hover {
width: 300px;
}
The transition effect will start when the specified CSS property (width) changes
value.
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition
effect.
Page 16 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
With the CSS transform property you can use the following 2D transformation
methods:
translate()
rotate()
scaleX()
scaleY()
scale()
skewX()
skewY()
skew()
matrix()
The translate() Method
The translate() method moves an element from its current position (according to
the parameters given for the X-axis and the Y-axis).
The following example moves the <div> element 50 pixels to the right, and 100
pixels down from its current position:
CSS Input
div {
transform: translate(50px, 100px);
}
Page 17 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
The rotate() Method
The rotate() method rotates an element clockwise or counter-clockwise according
to a given degree.
The following example rotates the <div> element clockwise with 20 degrees:
CSS Input
div {
transform: rotate(20deg);
}
Using negative values will rotate the element counter-clockwise.
The scale() Method
The scale() method increases or decreases the size of an element (according to
the parameters given for the width and height).
The following example increases the <div> element to be two times of its original
width, and three times of its original height:
CSS Input
div {
transform: scale(2, 3);
}
Page 18 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
The scaleX() Method
The scaleX() method increases or decreases the width of an element.
The following example increases the <div> element to be two times of its original
width:
CSS Input
div {
transform: scaleX(2);
}
The scaleY() Method
The scaleY() method increases or decreases the height of an element.
The following example increases the <div> element to be three times of its original
height:
CSS Input
div {
transform: scaleY(3);
}
The skewX() Method
The skewX() method skews an element along the X-axis by the given angle.
The following example skews the <div> element 20 degrees along the X-axis:
CSS Input
div {
transform: skewX(20deg);
}
The skewY() Method
The skewY() method skews an element along the Y-axis by the given angle.
The following example skews the <div> element 20 degrees along the Y-axis:
CSS Input
div {
transform: skewY(20deg);
}
Page 19 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
The skew() Method
The skew() method skews an element along the X and Y-axis by the given angles.
The following example skews the <div> element 20 degrees along the X-axis, and
10 degrees along the Y-axis:
CSS Input
div {
transform: skew(20deg, 10deg);
}
CSS 3D Transforms
With the CSS transform property you can use the following 3D transformation
methods:
rotateX()
rotateY()
rotateZ()
The rotateX() Method
The rotateX() method rotates an element around its X-axis at a given degree:
CSS Input
#myDiv {
transform: rotateX(150deg);
}
Page 20 of 21
Topic 8 - Understanding the Functionality of CSS – Part 2
The rotateY() Method
The rotateY() method rotates an element around its Y-axis at a given degree:
CSS Input
#myDiv {
transform: rotateY(150deg);
}
The rotateZ() Method
The rotateZ() method rotates an element around its Z-axis at a given degree:
CSS Input
#myDiv {
transform: rotateZ(90deg);
}
Page 21 of 21