How to use CSS

effectively
 Content
 Box-sizing
 Position
 Display
 Containing block
 Relative unit
 Reset CSS
 Margin Collapse
 Some useful tips
2
 Box-sizing Property
▸ content-box (default)
The width and height properties includes only
the content. Border and padding are not
included.

▸ border-box
The width and height properties includes
content, padding and border

3
 Box-sizing Property
.content-box {
width: 100%;
border: solid #5B6DCD
10px;
padding: 5px;
}
.border-box {
width: 100%;
border: solid #5B6DCD
10px;
padding: 5px;
}
4
 Display Property (Document Flow)
The element is completely removed, as if it wasn't in the HTML code in the first
none place
- It starts on a new line,
block - Takes up the whole width of the parent element
- It behaves like simple text.
inline - Height, width, top and bottom margin will be ignored.
- Both an inline and a block element
inline-block - can apply height and width values
- Does not add a line-break after the element
The element is turned into an flexbox container. On its own, it behaves like a
flex block element.
The element is turned into an grid container. On its own, it behaves like a block
grid element.

5
Display Property - Grid

6
Display Property - Flexbox

7
 Grid vs Flexbox

» Focus on Content Placement: CSS Grid

» If you want to accurately control the position of items within a
layout, CSS Grid is the way to go.

» Focus on Content Flow: Flexbox

» Allow items grow and shrink according to their inner content
and the available space.

8
 Block - Inline

» block
» <div>, <h1>-<h6>, <p>, <form>, <header>, <footer> and <section>

» inline
» <span> and <a>

» inline-block
» <img>

9
 Viewport

» The viewport refers to the portion of your browser that is actually

used for displaying your web page.

» It does not include your address bar or any other type of persistent
UI that takes away space.

10
 Position Property
Default value. Elements render in order, as they appear in the document
static
flow
The element is positioned relative to its normal position, so "left:20px"
relative
adds 20 pixels to the element's LEFT position
The element is positioned relative to its first positioned (not static)
absolute
ancestor element

fixed The element is positioned relative to the browser window

A sticky element toggles between static and fixed, depending on the

sticky
scroll position.
Initial Sets this property to its default value
inherit Inherits this property from its parent element
11
 Position - Static

» The element is positioned according to the normal flow of the

document.

» The left, right, top, bottom and z-index properties have no

effect.

12
 Position - Relative

» An element’s original position remains in the flow of the

document, just like the static value.

» 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.
13
 Position - Fixed

» The element is removed from the flow of the document like

absolutely positioned elements.

» The element 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.

14
 Position - Absolute

» The element is removed from the normal document flow, and no space
is created for the element in the page layout.

» The element is positioned relative to its first positioned (not static)

ancestor element.

» Its final position is determined by the values of top, right, bottom, and
left.

15
 Position - Sticky

» The element is positioned according to the normal flow of the document.

» Offset relative to its nearest scrolling ancestor based on the values of top,
right, bottom, and left.

» The offset does not affect the position of any other elements.

16
 Margin-Left vs Left
Left Margin-Left
- Offset itself from its normal left edge, - Sets the margin area on the left side of an
Relative
Left right will offset each other. element
- Offset from its first positioned (not - Sets the margin area on the left side of an
Absolute static) ancestor element element, does not affect the position of
- Left, right determine the size any other elements
- Sets the margin area on the left side of an
- Offset from left edge of Viewport
Fixed element, does not affect the position of
- Left, right determine the size
any other elements
- Sets the margin area on the left side of an
Sticky - Left is used as offset to become stick
element
- Sets the margin area on the left side of an
Static - Ignored
element

17
 Containing block

» The size and position of an element are often impacted by its containing block

» Percentage values that are applied to the width, height, padding, margin, and
offset properties of an element are computed from the element's containing block

18
 Identifying the containing block
» If the position property is static, relative, or sticky
» the containing block is formed by the edge of the content box of the nearest
ancestor element that is a block container

» If the position property is absolute

» the containing block is formed by the edge of the padding box of the nearest
ancestor element that has a position value other than static

» If the position property is fixed

» the containing block is established by the viewport

19
 Percentage unit

» The height, top, and bottom properties compute percentage values from the
height of the containing block.

» The width, left, right, padding, and margin properties compute percentage
values from the width of the containing block.

20
 Rem & em
» Allows setting the font-size of an element relative to the font-size of its parent.

» If the parent element doesn’t specify a value for font-size, a value will be looked
for higher up in the DOM tree.

» If no font-size is specified all the way up to the root element <html>, then the
browser default of 16px is used.

» When em units are used on properties other than font-size, the value is relative
to the element’s own font-size.

21
 Rem & em
» rem (root em) is based upon the font-size value of the root element which is
<html> element.

» If the <html> element doesn’t have a specified font-size, the browser default of
16px is used.

22
 Rem & em – Which is better

» There’s no better unit really, and it all depends on your personal preferences.

» Some people like to design everything in rem units for consistency and

predictability.

» While others like to also use em units in places where the influence of nearby

parent elements would make sense.

23
 Auto Value

» The value of said property is adjusted automatically according to the content or

the context of the element.

» The initial width of block-level elements like <div> or <p> is auto, which makes
them take the full horizontal space of their containing block.

» The height of an element is equal to its content where the default value is auto.

» Left, right, top, bottom: Lets the browser calculate its position.

» Margin: center a block element horizontally

24
 Reset CSS

» A CSS Reset is a set of CSS rules that resets the styling of all HTML elements
to a consistent baseline.

» Every browser has its own default ‘user agent’ stylesheet.

» Using a CSS Reset makes every browser to have all its styles reset to null, wipe
out the differences that exist between different browsers default styles and
then you build up your styles from there.

25
 Reset CSS – Different approach

 Nicolas Gallagher’s Normalize.css is the gentle approach

 The Normalize CSS's main goal is to resolve browsers’ differences and
create consistent basic styles across all of them.

 Eric Meyer’s CSS Reset is the hard approach

 In cases we don’t want basic styles from the browsers, like the font-size
value we get from elements like <h1> through <h6>

26
 Reset CSS

<head>
<link rel="stylesheet" type="text/css"
href="reset.css">
<link rel="stylesheet" type="text/css"
href="styles.css">
</head>

27
 Order of precedence for CSS

 Inline css (html style attribute) overrides css rules in style tag and css file.

 A more specific selector takes precedence over a less specific one.

 Rules that appear later in the code override earlier rules if both have the same
specificity.

 A css rule with !important always takes precedence.

28
Order of
precedence for
CSS
29
 Margin Collapse
» Only vertical margins collapse

» Only adjacent elements collapse

» The bigger margin wins

» Nesting doesn't prevent collapsing (Child element transferring margin to the

parent element)

» Margins can collapse even in the same direction

» More than two margins can collapse

» Flow layout only

30
 CSS Inheritance

 CSS rulesets cascade down the CSS hierarchy from parent selectors to their
children selectors.

 color, cursor, direction, font-*, line-height, text-align, text-transform,

visibility, white-space are inherited.

 Reference https://www.w3.org/TR/CSS21/propidx.html for full list.

31
 CSS Inheritance - inherit

 When you set inherit on a CSS property, the property takes the value from the
element’s parent.

 This applies not only to inheritable properties, but to all CSS properties.

 Only direct child elements can inherit a CSS property from its parent element
using the inherit value if the CSS property is set by the element’s parent
element.

32
 Center a Div with CSS Margin Auto

<div class="container">
<div class="child"></div>
</div>

.container { .child {
font-family: arial; width: 50px;
font-size: 24px; height: 50px;
margin: 25px; /* Center horizontally */
width: 350px; margin: 0 auto;
height: 200px; }
outline: dashed 1px black;
}
33