CSS Basics 2022

CSS Basics
JANUARY 2022
CONFIDENTIAL | © 2022 EPAM Systems, Inc.

Agenda
1 WHAT IS CSS
2 SYNTAX
3 ADDING STYLES TO THE PAGE
4 SELECTORS
5 COLORS
6 FONTS
CONFIDENTIAL | © 2022 EPAM Systems, Inc. 2

Why CSS?

CSS definitions
Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation of a document written in HTML or XML
(including XML dialects like SVG or XHTML).
CSS describes how elements should be displayed on screen, on paper, in speech, or on other media. CSS is the only document
styling language that browsers understand.
• CSS has a standardized W3C specification.

• CSS1 is now obsolete,
• CSS2.1 is a recommendation,
• CSS3 is splitted into smaller modules, progressing on the standardization track.
The types of styles:

• a browser’s style
• an author’s style
• a user’s styles

The basic syntax of CSS
p {
color: orange;
}

The basic syntax of CSS
O R D E R M AT T E R S COMMENTS IN CSS-FILE
p color will be lime

Adding styles to the page - external styles

Adding styles to the page - internal styles

Adding styles to the page - inline styles

Importing styles

Specify media type: @import

Media type using media queries

Media type in HTML “media” attribute

Device types
Value Description
All Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screen readers that "read" the page out loud
Deprecated values:
aural, braille, embossed, handheld, projection, tty, tv

How to add styles to the page
All described methods of using CSS can be used either alone or in combination with each other.
In the second case, is necessary to remember their hierarchy.
• Inline style - highest priority

• Internal style, external style - lower priority

Absolute Lengths
cm centimeters
mm millimeters
in inches (1in = 2.54cm)
px pixels
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

Relative Lengths
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport
vh Relative to 1% of the height of the viewport
vmin Relative to 1% of viewport's smaller dimension
vmax Relative to 1% of viewport's larger dimension

Property values
Color:
• By hexadecimal values: #6609CF, #fc0
• By name: white, silver, black, lightblue, ...
• RGB: rgb(255, 0, 0)
• RGBA: rgba(0,255,0,0.3)
• HSL: hsl(120,100%, 25%)
• HSLA: hsla(120,100%, 50%, 0.3)

Basic selectors
• ID
• Selects the element with id="firstname"
• Class
• Selects all elements with class="intro"
• Type
• Selects all elements
• Universal
• Selects all elements

Combinators
Groups of selectors
div, p
A comma-separated list of selectors represents the union of all
elements selected by each of the individual selectors in the list
Descendant combinator
div p
Selects all elements inside <div> elements
Child combinator
div > p Selects all elements where the parent is a <div> element
Adjacent sibling combinator
div + p Selects all elements that are placed immediately after <div>
elements
General sibling combinator
p ~ ul
Selects every <ul> element that are preceded by a element

Descendant Selectors
Home page
About me
Contacts

Child combinator
Title of something
Lorem ipsum dolor sit amet, consectetur

adipiscing elit. In condimentum magna leo, sit
amet ultrices eros eleifend a. Aliquam maximus
feugiat posuere. Cras a ultrices urna.
1. Lupus
2. Ursa

Adjacent sibling combinator
Title of something
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In
condimentum magna leo, sit amet ultrices
eros eleifend a. Aliquam maximus feugiat posuere. Cras a
ultrices urna.
Donec quis nibh vitae tellus tristique euismod id sed purus.
Cras quis lacinia sem. Nunc eget purus nec
nibh iaculis suscipit. Morbi quis nunc molestie, ullamcorper
nulla at, vehicula ligula.

General combinator
A paragraph before the headline

Title of something
Praesent ipsum ex, Lorem ipsum dolor sit
efficitur mollis eleifend a, amet, consectetur
convallis a est. adipiscing elit. In
Quisque molestie condimentum magna
vulputate ex, ac pharetra leo.
metus tristique vel. In condimentum
Vestibulum scelerisque magna leo, sit amet
dui sed ipsum bibendum, ultrices eros eleifend a.
sed iaculis sem porta. Aliquam maximus
feugiat posuere. Cras a
ultrices urna

Attribute presence and value selectors
[target] [target=_blank] [title~=“flower”] [lang|=“en”]
Selects all elements Selects all elements Selects elements with a Selects all elements
with a "target” attribute with target="_blank" title attribute containing with a lang attribute
(with any value) (exact value) the word "flower" value starting with "en"

Substring matching attribute selectors
a[href*="w3c"] a[href^="https"] a[href$=".pdf"]
Selects <a> elements Selects <a> elements Selects <a> elements

with href attribute value with href attribute value with href attribute value
containing the substring starting with "https" ending with ".pdf"
"w3c"

Attribute selectors

Advanced attributes selectors

Pseudo-classes
The pseudo-class concept is introduced to

permit selection based on information that lies
outside of the document tree or that cannot be
expressed using the other simple selectors.

Dynamic pseudo-classes
Link
User action

Other pseudo-classes
UI element
Negation (matches-none) Matches-any

(Some) structural pseudo-classes
Selector Example Example description

:first-child p:first-child Selects every element that is the first child of its parent
:first-of-type p:first-of-type Selects every element that is the first element of its parent
:last-child p:last-child Selects every element that is the last child of its parent
:last-of-type p:last-of-type Selects every element that is the last element of its parent
:nth-child(n) p:nth-child(2) Selects every element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every element that is the second child of its parent, counting from
the last child
:nth-of-type(n) p:nth-of-type(2) Selects every element that is the second element of its parent

Pseudo-classes

Pseudo-elements
Selector Example Example description

::after p::after Insert something after the content of each element
::before p::before Insert something before the content of each element
::first-letter p::first-letter Selects the first letter of every element

Pseudo-elements

Grouping selectors

Inheritance

!important
!important declaration overides any other CSS

declaration.
selector {
property: property value !important;
}

!important usage
You can use !important (it is not an anti-pattern), when

your goal is that the property should not be overridden.
Never use !important to override other rules!

Do use selectors with proper specificity to achieve that.

CSS Specificity

CSS Specificity
Specificity Calculator

CSS Variables
CSS Variables are entities defined by CSS authors

which contain specific values to be reused
throughout a document
They are set using custom property notation: e.g., -

-main-color: black, and are accessed using the var()
function, e.g., color: var(--main-color)
Read more in spec Read more in MDN

Cascading
Read more about cascade layers

Cascading
Cascading refers simultaneous use of different style rules to elements by connecting multiple style files,
inheritance of properties and other methods.
The higher style rule is placed in this list, the lower its priority and vice versa:
1. Browser’s style
2. Author’s style
3. User’s style
4. The author's style adding !Important 5.The user’s style adding !Important

A few examples of common CSS properties

Reset | Normalize
The goal of a reset stylesheet is to reduce browser

inconsistencies in default line heights, margins and font
sizes of headings, and so on
https://meyerweb.com/eric/tools/css/reset/
https://github.com/murtaugh/HTML5-
Reset/blob/master/assets/css/reset.css
Normalize.css makes browsers render all elements

more consistently and in line with modern standards. It
precisely targets only the styles that need normalizing.
http://necolas.github.io/normalize.css/

Colors
Name Hex Rgb Hsl
purple #800080 rgb(128, 0, 128) hsl(300deg 100% 25%)
lime #00ff00 rgb(0, 255, 0) hsl(120deg 100% 50%)
aqua #00ffff rgb(0 255 255) hsl(180deg 100% 50%)
https://www.w3.org/wiki/CSS/Properties/color/keywords
RGB color values
The rgb() function accepts the RGB value in three parameters — providing the red, green and blue hues respectively

HSL
• Hue a value ranging from 0 to 360, defines which color you want.
• Saturation percentage, ranging from 0% to 100%, defines how

much of that color you want.
• Lightness percentage, ranging from 0% to 100%, defines how

bright you want that color to be
body {
background: hsl(30, 100%, 50%);
color: hsl(30, 100%, 75%);
font-size: 1.3em;
}

Color opacity

Typography

Web Safe Browser Fonts examples
Sans Serif Serif Monospace Cursive
• Verdana • Times New Roman • Courier New • Comic Sans Ms

• Arial • Georgia • Lucida Console
• Helvetica • Palatino
• Tahoma • Cambria
• Trebuchet Ms

CSS Font Properties Example
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts

font-size units
PX EM % REM
If you need fine- 1em is equal to the Just like em's the very Inherited from the root
grained control, current font-size of the nature of percentage element (html) and do
renders the letters element in question. sizing is that it is not cascade.
exactly that number of relative. It also
pixels in height By default 1em = 16px. cascades in the same
If you were to go and way.
Use this to avoid set a font-size of 20px
dependency on parent on your body, then If a parent has the
components! 1em = 20px. font-size of 20px and
the child has a font-
size of 50%, it will be
10px.

EM vs REM

Font-size
Actual size can be different for each font due to Em-square.
https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align

Line-height
• The content-area height is defined by the

font metrics
• The virtual-area height is the line- height,

and it is the height used to compute the
line-box’s height

Line-height examples

Web fonts
https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts

Font formats
WOFF EOT SVG TTF
Web Open Font Format Embedded OpenType Scalable Vector Graphics TrueType Font
.woff files are .eot files for older .svg files are .ttf .otf files
supported by all Internet Explorer supported by all partial support in
modern browsers versions (< 8) modern IE
browsers

@font-face declaration
https://css-tricks.com/snippets/css/using-font-face/

Games – practicing...
https://flukeout.github.io/ - ...selectors
https://flexboxfroggy.com/ - ...flexbox
https://cssgridgarden.com/ - ...css grid
https://cssbattle.dev/ - replicate targets with the smallest possible CSS code

T H A N K YO U !

CSS Basics 2022

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS Basics 2022

Uploaded by

Copyright:

Available Formats

CSS Basics

CONFIDENTIAL | © 2022 EPAM Systems, Inc.

3 ADDING STYLES TO THE PAGE

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 2

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 3

• CSS has a standardized W3C specification.​

The types of styles:​

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 4

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 5

p color will be lime

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 6

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 7

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 8

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 9

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 10

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 11

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 12

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 13

All Used for all media type devices

print Used for printers

screen Used for computer screens, tablets, smart-phones etc.

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 14

In the second case, is necessary to remember their hierarchy.​

• Inline style - highest priority​

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 15

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 16

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 17

• By hexadecimal values: #6609CF, #fc0

• By name: white, silver, black, lightblue, ...

• HSL: hsl(120,100%, 25%)

• HSLA: hsla(120,100%, 50%, 0.3)

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 18

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 19

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 20

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 21

Lorem ipsum dolor sit amet, consectetur

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 22

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 23

A paragraph before the headline

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 24

[target] [target=_blank] [title~=“flower”] [lang|=“en”]

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 25

a[href*="w3c"] a[href^="https"] a[href$=".pdf"]

Selects <a> elements Selects <a> elements Selects <a> elements

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 26

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 27

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 28

The pseudo-class concept is introduced to

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 29

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 30

Negation (matches-none) Matches-any

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 31

Selector Example Example description

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 32

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 33

Selector Example Example description

::first-letter p::first-letter Selects the first letter of every <p> element

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 34

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 35

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 36

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 37

!important declaration overides any other CSS

CONFIDENTIAL | © 2022 EPAM Systems, Inc. 38

• CSS has a standardized W3C specification.

The types of styles:

In the second case, is necessary to remember their hierarchy.

• Inline style - highest priority