CSS Essential

Web application with HTML and CSS

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 1

Lesson Objectives
▪ Value and Unit
▪ Box model
▪ Overflow Content
▪ Styling Image
▪ Styling List

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 2

Section 1

VALUES AND UNITS

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 3

CSS Value
➢ CSS value: Every CSS declaration includes a property /
value pair. Depending on the property, the value can
include a single integer or keyword, to a series of keywords
and values with or without units

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 4

CSS Value
➢ Data type
▪ Textual data type:
o Pre-defined keywords as an ident:

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 5

CSS Value
➢ Data type
▪ Textual data type:
o string:

o url:

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 6

CSS Value
➢ Data type
▪ Numberic data types
o Interger: A whole number such as 1024 or -55

o Number: A decimal number

o Dimension: A number with a unit attached to it

o Percentage: A fraction of some other value

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 7

Distance unit
➢ Distance unit (length unit): There are 2 types of distance
unit in CSS: Relative and Absolute
❖ Absolute length units are fixed to a physical length

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 8

Distance unit
➢ Distance unit (length unit):
❖ Relative length unit specify a length in relation to something else.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 9

Percentage
➢ Percentage is a type that represents a fraction of some other
value.
➢ It is always relative to another quantity.
➢ Each property that allows percentages also defines the quantity
to which the percentage refers.
➢ This quantity can be a value of another property of the same
element, the value of a property of an ancestor element, a
measurement of a containing block, or something else.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 10

Ems & rems
➢ em and rem are the two relative lengths you are likely to
encounter most frequently when sizing anything from boxes to
text.
▪ em unit means "my parent element's font-size“: Relative to font
size of the parent, in the case of typographical properties like font-
size, and font size of the element itself, in the case of other properties
like width.
▪ rem unit means "The root element's font-size“: Relative to font
size of the root element.
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 11
Colors
➢ Colors in CSS can be specified by the following methods:
▪ RGB colors
▪ RGBA colors
▪ Hexadecimal colors
▪ HSL colors
▪ HSLA colors
▪ Predefined/Cross-browser color names
▪ With the currentcolor keyword

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 12

GRB Colors
➢ An RGB color value is specified with the rgb() function, which has the
following syntax: rgb(red, green, blue)
➢ Each parameter (red, green, and blue) defines the intensity of the color
and can be an integer between 0 and 255 or a percentage value (from
0% to 100%).

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 13

Hexadecimal colors
▪ #rrggbb:
✓ rr (red), gg (green) and bb (blue) are hexadecimal values between
00 and ff (same as decimal 0-255)

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 14

Hexadecimal colors

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 15

Predefined Colors
➢ Predefined/Cross-browser color names: 140 color names
are predefined in the HTML and CSS color specification.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 16

Section 2

BOX MODEL

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 17

Block and Inline boxes
➢ Block box:
▪ The box will break onto a new line.
▪ The width and height properties are respected.
▪ Padding, margin and border will cause other elements to be
pushed away from the box

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 18

Block and Inline boxes
➢ Inline box:
▪ The box will not break onto a new line.
▪ The width and height properties will not apply.
▪ Vertical padding, margins, and borders will apply but will not cause other inline boxes to move away
from the box.
▪ Horizontal padding, margins, and borders will apply and will cause other inline boxes to move away
from the box

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 19

The altenative CSS Box Model
➢ Box model

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 20

The CSS Box Model
➢ Making up a block box in CSS we have:
▪ Content box: The area where your content is displayed, which can be
sized using properties like width and height.
▪ Padding box: The padding sits around the content as white space; its
size can be controlled using padding and related properties.
▪ Border box: The border box wraps the content and any padding. Its
size and style can be controlled using border and related properties.
▪ Margin box: The margin is the outermost layer, wrapping the content,
padding and border as whitespace between this box and other
elements. Its size can be controlled using margin and related properties.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 21

Use browser DevTools to view the box model
➢ If you inspect an element in browser DevTools, you can see the size
of the element plus its margin, padding, and border. Inspecting an
element in this way is a great way to find out if your box is really the
size you think it is

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 22

Margins, paddings and borders
➢ Take a look

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 23

Margins, paddings and borders
➢ Margin: Is an invisible space around your box. It pushes other
elements away from the box. Margins can have positive or
negative values. Setting a negative margin on one side of your
box can cause it to overlap other things on the page
➢ We can control all margins of an element at once using the
margin property, or each side individually using the equivalent
longhand properties:
▪ margin-top
▪ margin-right
▪ margin-bottom
▪ margin-left

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 24

Margins, paddings and borders
➢ Padding: Sits between the border and the content area. Unlike
margins you cannot have negative amounts of padding, so the
value must be 0 or a positive value, it is typically used to push
the content away from the border.
➢ We can control all margins of an element at once using the
margin property, or each side individually using the equivalent
longhand properties:
▪ padding-top
▪ padding-right
▪ padding-bottom
▪ padding-left

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 25

Margins, paddings and borders
➢ Border: is drawn between the margin and the padding of a
box.
➢ To set the properties of each side individually, you can use:
▪ border-top
▪ border-right
▪ border-bottom
▪ border-left
➢ To set the width, style, or color of all sides, use the following:
▪ border-width
▪ border-style (dotted, dashed, solid , double, groove, inset,
outset,.. )
▪ border-color
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 26
Rounded Borders
▪ The border-radius property is used to add rounded borders
to an element

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 27

CSS Shorthand Clockwise
▪ To shorten the code, it is
possible to specify all the
margin/ or padding/ or border
properties in one property
✓ 1 value: all sides
✓ 2 values: top-bottom, right-left
✓ 4 values: top-right-bottom-left
✓ 3 values: top, right-left, bottom

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 28

Section 3

OVERFLOW CONTENT

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 29

What is overflow?
➢ Overflow: Is a css property sets what to do when an
element's content is too big to fit in its block formatting
context.
➢ This demo below is default value of overflow property:

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 30

Overflow property
➢ Value:
▪ visible (default): Content is not clipped and may be rendered outside
the padding box.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 31

Overflow property
➢ Value:
▪ hidden: Content is clipped if necessary to fit the padding box. No
scrollbars are provided, and no support for allowing the user to scroll

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 32

Overflow property
➢ Value:
▪ scroll: Content is clipped if necessary to fit the padding box.
Browsers always display scrollbars whether or not any content is
actually clipped, preventing scrollbars from appearing or
disappearing as content changes

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 33

Overflow property
➢ Value:
▪ auto: Depends on the user agent. If content fits inside the padding
box, it looks the same as visible, but still establishes a new block
formatting context. Desktop browsers provide scrollbars if content
overflows.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 34

Section 4

STYLING IMAGE

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 35

Styling images
➢ Use the border-radius property to create rounded images

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 36

Styling images
➢ Responsive images will automatically adjust to fit the size of the screen
▪ Step1: Add HTML

▪ Step 2: Add CSS

If you want the image to scale both up and down on responsiveness, set the CSS width
property to 100% and height to auto

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 37

Styling images
➢ Responsive images
If you want an image to scale down if it has to, but never scale up to be larger than its
original size, use max-width: 100%

If you want to restrict a responsive image to a maximum size, use the max-width
property, with a pixel value of your choice

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 38

Styling images
➢ Center an image: To center an image,
set left and right margin to auto and
make it into a block element
➢ Transparent image: The opacity property can take a value
from 0.0 - 1.0. The lower value, the more transparent

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 39

Section 5

STYLING LIST

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 40

Styling list
➢ Bullet styles: The list-style-type property specifies the type of list item
marker.

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 41

Styling list
➢ Bullet styles: some value of list-style-type property
▪ disc
▪ circle
▪ square
▪ decimal
▪ decimal-leading-zero
▪ lower-roman
▪ lower-greek
▪ ...
8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 42
Styling list
➢ Bullet position: The list-style-position property specifies the position of
the list-item markers.

▪ list-style-position: out ▪ list-style-position: inside

09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy -

8/18/2023 43
Internal Use
Styling list
➢ Using a custom bullet image: The list-style-image
property specifies an image as the list item marker

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 44

Styling list
➢ list-style shorthand: The three properties mentioned above can all be
set using a single shorthand property, list-style

Could be replaced by this

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 45

Lesson Summary

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 46

 Thank you

8/18/2023 09e-BM/DT/FSOFT - ©FPT SOFTWARE – Fresher Academy - Internal Use 47