CSS Walktrough Internship Course

1
CSS WALKTHROUGH
INTERNSHIP, SEPTEMBER 2019

2
2
AGENDA
▪ CSS
 WHAT IT IS
 HOW TO INCLUDE CSS IN A PAGE
 SELECTORS
 SPECIFICITY
 UNITS & COLORS
 BOX MODEL
 POSITIONING ELEMENTS
 Z-INDEX
 DISPLAY MODEL
 DISPLAY FLEX
 FLOAT
 CALC()
 MEDIA QUERIES

3
3
CSS – WHAT DOES IT MEAN
Stands for Cascading Style Sheets.
Defines how HTML elements are to be displayed in the browser.
Cascading means that styles can fall (or cascade) from one style sheet to another, enabling multiple style sheets to
be used on one HTML document.

4
4
INLINE STYLE
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<div class="ninja" style="color: black;" >
Black ninja
</div>
</body>
</html>
CSS – INLINE, INTERNAL, EXTERNAL

5
5
INTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.ninja {
color: black;
}
</style >
</head>
<body>
<div class="ninja">Black ninja</div>
</body>
</html>

6
6
EXTERNAL CSS
<!DOCTYPE html>
<html>
<head>
<link href="css/styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="ninja">Black ninja</div>
</body>
</html>

7
7
CSS – ANATOMY OF A CSS SELECTOR
CSS selectors allow to select and manipulate HTML elements.

8
8
CSS – SELECTOR TYPES
TAG SELECTOR - matches element names.
h1, p, div, span {
display: block;
}
CLASS SELECTOR - selects elements which have
a given class
.box, div.box {
background: blue;
}
ID SELECTOR - selects elements which have a given id
#search {
border: 1px solid black;
}
ATTRIBUTE - selects elements by their attributes
[href] {
cursor: pointer;
}

9
9
CSS – SELECTOR TYPES
GROUP - used to group together multiple selectors into one.
p, a, .a-class-name {
font-size: 18px;
}
DESCENDANTS - select elements that are descendants of other elements
• they don’t have to be immediate children.
div a {
font-size: 18px;
}
• they have to be immediate children.
div > a {
font-size: 18px;
}

10
10
CSS – PSEUDO CLASSES & ELEMENTS
PSEUDO CLASS - is a keyword added to selectors that specifies a special state of the element to be selected:
E.g.: active, focus, hover, link, visited, etc.
a:hover {
color: red;
}
PSEUDO ELEMENT - is a keyword added to selectors that allow to style certain parts of a document.
E.g.: after, before, first-letter, first-line, etc.
a:before {
content: ">";
}

11
11
CSS – SPECIFICITY
SPECIFICITY is the means by which browsers decide which CSS property values are the most relevant to an element
and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of
CSS selectors.

12
12
CSS – SPECIFICITY
Sample calculation:

13
13
CSS – SPECIFICITY
• Pseudo-elements (e.g. :before) get (0,0,0,1) unlike their pseudo-class (e.g. :hover) brethren which
gets (0,0,1,0)
• The !important value appended a CSS property value is an automatic win. It overrides even inline styles from
the markup. The only way an !important value can be overridden is with another !important rule declared
later in the CSS and with equal or great specificity value otherwise. You could think of it as adding (1,0,0,0,0)
to the specificity value.

14
14
CSS – SPECIFICITY
Example:
<ul id="summer-drinks">
<li class="favorite">Whiskey and Ginger Ale</li>
<li>Wheat Beer</li>
<li>Mint Julip</li>
</ul>
ul#summer-drinks li {
font-weight: normal;
font-size: 12px;
color: black;
}

15
15
CSS – MEASUREMENT UNITS
RELATIVE UNITS
EM - relative to the font-size of the element (2em means 2 times the size of the current font)
REM - relative to font-size of the root element
% - Relative to parent size (percent)
STATIC UNITS
PX - pixels (1px = 1/96th of 1in)
MM - millimeters
CM - centimeters
PT - points (1pt = 1/72 of 1in)
PC - picas (1pc = 12 pt)

16
16
CSS – COLORS
RGB VALUES - rgb(221,117,0) / rgba(0,0,0,.5)
These express colors in terms of how much red, green and blue are used
to make it up.
HEX CODES - #dd7500
These are six-digit codes that represent the amount of red, green and blue
in a color, preceded by hash # sign.
COLOR NAMES - orange
These are 147 predefined color names that are recognized by browsers.

17
17
CSS – BOX MODEL
Any HTML element can be considered a BOX.
CONTENT could be text, images, etc.
WIDTH & HEIGHT are applied to the content area.
PADDINGS add extra space inside the border.
BORDERS surround the padding and content.
MARGINS add extra space outside the border.

18
18
CSS – BOX MODEL
FULL height element: border-top +
padding-top +
height +
padding-bottom +
border-bottom

19
19
CSS – BOX MODEL
FULL width element: border-right +
padding-right +
width +
padding-left +
border-left

20
20
CSS – BOX MODEL
BOX SIZING
.content {
box-sizing: content-box;
width: 400px;
padding: 10px;
}
Total width: 420px;
.box {
box-sizing: border-box;
width: 400px;
padding: 10px;
}
Total width: 400px;

21
21
CSS – POSITIONING ELEMENTS
{ position: static; } : the default position of all the elements. The top,
right, bottom, left and z-index properties do not apply.
{ position: relative; } : behaves the same as static but has top, right,
bottom, left and z-index properties enabled.
{ position: absolute; } : position the element at a specified position relative to
its closest positioned ancestor or to the containing block. It has top, right,
{ position: fixed; } : the element is positioned relative to the viewport, it
always stays in the same place even if the page is scrolled. It has top, right,

22
22
CSS – Z-INDEX
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an element with
a lower stack order.
Works on positioned elements (position: absolute, position:
relative, or position: fixed)
Values can be positive or negative.

23
23
CSS – DISPLAY MODEL
Display property in CSS determines how that rectangular box behaves.
{ display : none; } : the element is still in the DOM, it is removed visually
{ display : inline; } : the element has no line break before or after it.
Accepts margins and padding but push the elements only horizontally. Height and
width are ignored
{ display : inline-block; } : similar to inline but the difference is that it
accepts width and height
{ display : block; } : forces a line break for the element. By default they take
up as much horizontal space as they can. Some elements have this property as
default.

24
24
CSS – LAYOUT
BLOCK ELEMENTS
Start on a new line
<h1> <p> <ul> <li> <form> <div> <header>
<footer> <section>
BOX
INLINE ELEMENTS
Flow in between surrounding text
<img> <span> <a>
BOX
BOX
BOX
BOX BOX
BOX
BOX
BOX
BOX
BOX
BOX

25
25
CSS – DISPLAY: FLEX
The flex CSS property sets how a flex item will grow or shrink to fit the space available in its flex container.
flex-direction - specifies the direction of the flexible
items inside the flex container.
FLEX CONTAINER
.container { display: flex; }
.container {
flex-direction: row | row-reverse |
column | column-reverse;
}

26
26
justify-content - aligns the flexible container's items when
the items do not use all available space on the main-axis.
.container {
justify-content: flex-start | flex-end | center |
space-between | space-around | space-evenly;
}

27
27
align-items - aligns the flexible container's items when the items do
not use all available space on the cross-axis.
.container {
align-items: flex-start | flex-end | center |
stretch | baseline;
}

28
28
align-content - aligns a flex container's lines within when there is
extra space in the cross-axis
.container {
align-content: flex-start | flex-end | center |
stretch | space-between | space-around;
}

29
29
FLEX ITEMS
.item {
order: <integer>;
flex-grow: <number>;
flex-basis: <length> | auto;
align-self: auto | flex-start | flex-end |
center | baseline | stretch;
}

30
30
CSS – FLOAT
float: none | left | right | initial | inherit;
You can float only block-level elements : <div>, <h1> - <h6>,
<p>, <form> etc.
The float CSS property specifies that an element should be placed
along the left or right side of its container, where text and inline
elements will wrap around it.
You can turn off a float using clear: left | right | both;
Left
25%
Right
25%
Dummy Text
50%

31
31
CSS – CALC()
USE 2:
.icon {
background-image: url("logo.png");
background-position: calc(100% - 25px) calc(100% - 25px);
}
The calc() CSS function lets you perform calculations when specifying CSS property values.
USE 1:
body {
width: calc(100% - 50px);
height: calc(85% + 25px);
}

32
32
CSS – MEDIA QUERIES
A media query consists of a media type and at least one expression that limits the style sheets' scope by
using media features, such as width, height, and color.

33
33
Breakpoints allow the layout to change at
predefined points, i.e. having 3 columns on a
desktop, but only 1 column on a mobile
device.
Most CSS properties can be changed from
one breakpoint to another. Usually where you
put one depends on the content. If a sentence
breaks, you might need to add a breakpoint.
But use them with caution – it can get messy
quickly when it's difficult to understand what is
influencing what.

34
34
/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}

CSS Walktrough Internship Course

Recommended

More Related Content

What's hot (20)

Similar to CSS Walktrough Internship Course (20)

More from Zoltan Iszlai (16)

Recently uploaded (20)

CSS Walktrough Internship Course