17- Learn CSS Fundamentals / Units

Apr 13, 20201 like373 views

This document discusses different units used in CSS including absolute and relative units. Absolute units like pixels and points set fixed sizes, while relative units scale with parent elements. Examples show how percentages, ems, rems, viewport units like vw and vh, and font-based units like vmin and vmax scale elements relative to different contexts. The document recommends choosing relative units when elements need to scale with viewport changes. It also promotes understanding units to build flexible and responsive designs.

IN A ROCKET
Learn front-end development at rocket speed
CSS CSS FUNDAMENTALS
Units

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ABSOLUTE  
UNITS
RELATIVE  
UNITS

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
ABSOLUTE  
UNITS
px pixel
1/96 of 1 inch

(96px = 1 inch)
pt point
1/72 of 1 inch

(72pt = 1 inch)
pc pica 12pt = 1pc
mm millimeter 1cm = 10mm
cm centimeter 10mm = 1cm
in inch 2.54 cm = 1 inch

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
GOOD
PRACTICE
Pixels are bad for usability:

• they don't scale,

• they don't help other elements
to scale proportionally.
Use them only when you
really need an exact and
ﬁxed size.
EXAMPLE
border: 1px solid #000;
AVOID PIXELS

Most read

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VW
.box {
width: 50vw;
}
viewport
Box
50% of the viewport

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VH
.box {
height: 100vh;
}
viewport
Box
100% of the viewport

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VMIN
.box {
font-size: 10vmin;
}
width: 1000px
Box 10% of 500px=50px
1vmin = 1vw or 1vh, whichever is smaller.
height: 500px

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / VMAX
.box {
font-size: 10vmax;
}
width: 1000px
Box
1vmax = 1vw or 1vh, whichever is larger.
height: 500px
10% of 1000px=100px

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HOW TO CHOOSE A CSS UNIT
Do I need to scale an element when
the viewport size changes?
What do I want it to scale relative to?

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: TYPE SCALE

Learn front-end development at rocket speed
inarocket.com
by miguelsanchez.com
YOU CAN CONTINUE THIS COURSE FOR FREE ON
+ READY TO USE CODE
+ QUIZZES
+ FREE UPDATES

We respect your time 
No more blah blah videos. Just straight to
the point slides with relevant information.
Ready to use code 
Real code you can just copy and paste into
your real projects.
Step by step guides 
Clear and concise steps to build real use
solutions. No missed points.
Learn front-end development at rocket speed
inarocket.com

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE  
UNITS
% Percentage Relative to the parent element’s

value for that property.
em Em Relative to the current font-size of the element.
rem Root em Relative to the font-size of the root.
ch Character Relative to width of the "0".
vw Viewport width Relative to the width of viewport.

1vw = 1/100 of the viewport’s width.
vh Viewport height Relative to the height of viewport.

1vw = 1/100 of the viewport’s height.
vmin Smaller dimension 1vmin = 1/100 of viewport’s

smaller dimension.
ex x-height Relative to the height of a lower-case x.
vmax Larger dimension 1vmax = 1/100 of viewport’s

larger dimension.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / PERCENTAGE
.box { width: 50%; }
container: 1000x
Box
500px

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / EM
.box {
font-size: 2em;
width: 4em;
}
font-size: 20px
Box
20x4
Container text.
20x2

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / REM
:root { font-size: 15px; }
.box {
font-size: 3rem;
width: 6rem;
}
font-size: 20px
Box
15x6
Container text.
15x3

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RELATIVE UNITS / REM vs EM
EM REM
html {font-size: 100%} /* 16px */
h1 {
font-size: 2em;
margin-bottom: 1em;
}
p {
font-size: 1em;
margin-bottom: 1em;
}
/* 1em = 16px */
/* 1em = 32px */
/* 1em = 16px */
/* 1em = 16px */
html {font-size: 100%} /* 16px */
h1 {
font-size: 2rem;
margin-bottom: 1rem;
}
p {
font-size: 1rem;
margin-bottom: 1rem;
}
/* 1em = 16px */
/* 1em = 16px */
/* 1em = 16px */
/* 1em = 16px */
[
[

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to set a background using CSS. - How to apply different background options: background-color, background-position, background-image, background-repeat and background-attachment. - How to create linear and radial gradients. - Tools: examine background and accessibility information, CSS gradients gallery, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/background.php REFERENCES: - The background CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/background - Chrome Developer Tools: Contrast ratio in the Color Picker. https://developers.google.com/web/updates/2018/01/devtools#contrast - Enhanced recommended contrast ratio (AAA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-enhanced - Minimum recommended contrast ratio (AA) by W3C. https://www.w3.org/TR/WCAG21/#contrast-minimum - Gradient Magic: 28 collections and over 1558 unique CSS gradients. https://www.gradientmagic.com/ - WebGradients: free collection of 180 linear gradients. https://webgradients.com/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

Pixel to Percentage conversion Convert left and right padding of a div to per...vishal choudhary

11--CSS-Box-Model.pdf for second collegeshwan it

Responsive Web Design & TypographyDanny Calders

Responsive Web Design - Drupal Camp CPHPeytz Design

This document discusses responsive web design. It begins by explaining that current grid/layout thinking is based on pages, but with responsive design there is no page. It then discusses how responsive design works by using fluid grids, flexible images and media, and media queries to adapt the layout based on screen size. It provides examples of how to implement a fluid grid and make images flexible. Finally, it gives some tips for responsive design such as using relative sizing and media queries to define breakpoints for different screen widths.

Adobe MAX 2008: HTML/CSS + FireworksNathan Smith

The document summarizes a presentation about using Adobe Fireworks for designing HTML and CSS websites. It discusses how Fireworks is ideal for web design as it integrates well with other Adobe applications. It also explores how Fireworks allows for rapid prototyping through features like slicing images and exporting code. The presentation emphasizes writing code by hand and using frameworks like the 960 grid system to help maintain consistency and improve efficiency.

Yes we can!Elcio Ferreira

slides-students-C04.pdfMonkeyDLuffy708724

The document provides an overview of CSS topics covered in an advanced CSS course. It includes sections on lectures covering CSS theory, the Natours project setup and use of advanced CSS techniques, responsive design, flexbox, CSS grid, and several coding projects. Individual lectures cover topics such as CSS architecture, the cascade, specificity, value processing, inheritance, and the visual formatting model.

Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens

From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.

Squishy pixelsFITC

Squishy Pixels with Varun Vachhar Presented at FITC's Web Unleashed Toronto 2014 Conference on September 17 More info at www.FITC.ca Adaptive Web Design and Responsive Web Design are often presented as competing design strategies. However, Adaptive Web Design is a superset of techniques aimed at crafting sites which provide an optimal user experience across multiple screen sizes. Responsive Web Design is just one such technique. In this session, Varun will cover the major techniques that make up the Adaptive Web Design strategy, how and when to choose these techniques for creating contextually-aware web experiences, and will give an introduction to building responsive layouts using CSS Flexbox. OBJECTIVE To demystify the world of multi-device and cross-platform web design. TARGET AUDIENCE Web designers and developers ASSUMED AUDIENCE KNOWLEDGE Intermediate HTML and CSS. Basic design knowledge. FIVE THINGS AUDIENCE MEMBERS WILL LEARN What is Adaptive/Responsive Web Design Where responsive design fits in an adaptive web design strategy Other techniques that are a part of an adaptive web design strategy How/when to pick from the various available strategies Introduction to layouts with CSS Flexbox

Spectrum 16 pmc 16 - preparing legacy projects for responsive designNeil Perlin

This document discusses responsive design for online help outputs from tools like Flare and RoboHelp. It covers converting legacy projects, which can involve addressing local formatting, images that are too large or not resizable, tables, and other issues. New issues with responsive design include supporting different image resolutions, handling videos and captions at different screen widths, and optimizing CSS. The document provides examples and suggestions for addressing many of these common challenges.

Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda

Não é nenhum segredo que o mundo está cada vez mais móvel. As vendas de PCs caíram em 20% desde 2008, e em 2015 é esperado que o acesso à Internet por dispositivos portáteis supere o acesso por desktops. A Web pode ser acessada de qualquer lugar, a qualquer hora. Mas com tantos modelos de dispositivos—tablets, notebooks, netbooks e smartphones—como fazer com que seu produto funcione em todos? O Responsive Web Design—um conjunto de técnicas e ideologias—promete solucionar este problema, oferecendo o mesmo conteúdo em todas as plataformas, da melhor maneira. Nesta palestra, serão ensinadas técnicas de design, front e back-end para que seu site seja usável e acessível por todos, sem limitar-se a modelos, tamanhos de tela ou versões específicas.

Accelerated StylesheetsWynn Netherland

This document discusses accelerated CSS techniques using tools like CSS frameworks, JavaScript, and CSS preprocessors. It introduces concepts like nested rules, variables, mixins, extends, imports, and powerful functions in CSS preprocessors that allow generating complex CSS from simpler code. CSS frameworks like Blueprint and modules for CSS3 properties are demonstrated. Image sprites are also mentioned briefly.

Web LayoutShawn Calvert

Fewd week3 slidesWilliam Myers

This document provides an agenda and information for FEWD Week 3. It discusses units of measurement like pixels, percentages and ems. It also covers font sizing, layouts like static, liquid, adaptive and responsive designs. Media queries and flexbox are introduced as tools for responsive layouts. Students are assigned to continue working on the Relaxr project and learn about units, layouts, media queries and flexbox through examples and exercises.

01 Introduction To CSScrgwbr

This document provides an introduction to CSS (Cascading Style Sheets) including: - What CSS allows you to change (appearance and layout of HTML) - Key CSS concepts like selectors, colors specified as hex codes, the box model - Common CSS properties for fonts, colors, spacing, dimensions - Examples of CSS rules and using the Chrome Dev Tools to experiment - Shorthand vs longhand property notation and common units like pixels and percentages - How CSS manages complexity through modules, layers and declarative programming

Css methods architectureLasha Sumbadze

The document discusses CSS architecture methodology called ITCSS (Inverted Triangle CSS). ITCSS involves visualizing CSS projects as a layered inverted triangle with the following properties: from generic to explicit styles, low specificity to high specificity, and far-reaching to localized selectors. This hierarchical structure is meant to improve scalability, maintainability, and reduce conflicts. The document also discusses object-oriented CSS methodology, separating structure from skin, avoiding location-dependent styles, and using classes, mixins, extends, and preprocessors to improve reusability.

Responsive web designBen MacNeill

This presentation introduces responsive web design which allows websites to automatically adapt their layout to different screen sizes. It discusses using a flexible grid system, flexible images and media, and media queries to create a single adaptive design. The strategy is to use a linear mobile-first approach and progressively enhance the design for larger screens using media queries. This allows the site to work on any device while providing the best experience for each form factor.

Build your own CDN with Varnish - Confoo 2022Thijs Feryn

CSS FrameworksWeb Directions

This document discusses CSS frameworks and how to choose the right one. It begins by defining what CSS frameworks are, which is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into reusable modules. It then asks three questions: What do CSS frameworks do? How to choose a CSS framework? Are CSS frameworks pure evil? It discusses how frameworks provide resets, grids and other common components to standardize styles. When choosing a framework, considerations include popularity, documentation, flexibility and source code quality. While frameworks may seem to reduce control and introduce non-semantic classes, they provide large benefits in standardization and speed of development.

Html frameseShikshak

Intro to CSSRandy Oest II

This document provides an introduction to CSS (Cascading Style Sheets) and covers key concepts such as selectors, the box model, positioning, and responsive design. It explains that CSS is used to style and lay out elements on web pages and works together with HTML. The document outlines important CSS topics like selectors, properties and values, units of measurement, the box model, display types, flow, floats, and positioning. It emphasizes best practices like using relative units and media queries for responsive designs.

esponsive web design means that your website (vishal choudhary

Front End Best PracticesHolger Bartel

card flip slidesharepimp

The document discusses CSS length units, font sizing techniques, floating elements, clearing floats, using classes and IDs for styling, and other CSS effects like rounded corners and hover styles. It provides examples of relative and absolute length units, setting a base font size and scaling font sizes for headings and other elements using percentages, floating elements left or right and clearing floats, applying styles using classes and IDs, and CSS properties for rounded corners, fading opacity on hover, and transitions.

Introduction to Responsive Design v.2Clarissa Peterson

intro-to-fluent-tutorial-tutiafflen24.pdfVAIBHAVBANSODE10

Advance Css 1194323118268797 5dharshyamal

The document discusses various CSS concepts including cascading style sheets, the box model, styling lists, rounded corners without images, working with divs and floats, CSS hacks, and grouping and nesting styles. Some key points include: - CSS controls the appearance and layout of content on web pages and allows defining styles that can then be reused across elements. - The box model describes the boxes that form around elements and includes the margin, border, padding, and content. - Divs can be used as an alternative to tables for page layout and positioning with floats. - CSS hacks exploit browser parsing of rules to control styles based on browser type/version. - Styles can be grouped or

3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Any HTML element can be a flex container. Child elements of that container are considered flex items. - A flex container can be displayed as a block (display: flex) or inline (display: inline-flex). - By default, flex items width and height are defined by their content. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - We no longer talk about CSS 3 or 4. CSS has now more than 80 specifications that evolve independently. - Where to find all CSS specifications. - How to check maturity of specifications by status code. - Where to follow CSS current work. - Where to find Flexbox and CSS Grid specifications. - How to check Flexbox and CSS Grid browser support. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/context.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

More Related Content

Similar to 17- Learn CSS Fundamentals / Units (20)

Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens

Squishy pixelsFITC

Spectrum 16 pmc 16 - preparing legacy projects for responsive designNeil Perlin

Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda

Accelerated StylesheetsWynn Netherland

Web LayoutShawn Calvert

Fewd week3 slidesWilliam Myers

01 Introduction To CSScrgwbr

Css methods architectureLasha Sumbadze

Responsive web designBen MacNeill

Build your own CDN with Varnish - Confoo 2022Thijs Feryn

CSS FrameworksWeb Directions

Html frameseShikshak

Intro to CSSRandy Oest II

esponsive web design means that your website (vishal choudhary

Front End Best PracticesHolger Bartel

card flip slidesharepimp

Introduction to Responsive Design v.2Clarissa Peterson

intro-to-fluent-tutorial-tutiafflen24.pdfVAIBHAVBANSODE10

Advance Css 1194323118268797 5dharshyamal

Intro to @viewport & other new Responsive Web Design CSS featuresAndreas Bovens

Squishy pixelsFITC

Spectrum 16 pmc 16 - preparing legacy projects for responsive designNeil Perlin

Responsive Web Design e a Ubiquidade da WebEduardo Shiota Yasuda

Accelerated StylesheetsWynn Netherland

Web LayoutShawn Calvert

Fewd week3 slidesWilliam Myers

01 Introduction To CSScrgwbr

Css methods architectureLasha Sumbadze

Responsive web designBen MacNeill

Build your own CDN with Varnish - Confoo 2022Thijs Feryn

CSS FrameworksWeb Directions

Html frameseShikshak

Intro to CSSRandy Oest II

esponsive web design means that your website (vishal choudhary

Front End Best PracticesHolger Bartel

card flip slidesharepimp

Introduction to Responsive Design v.2Clarissa Peterson

intro-to-fluent-tutorial-tutiafflen24.pdfVAIBHAVBANSODE10

Advance Css 1194323118268797 5dharshyamal

More from In a Rocket (15)

3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Any HTML element can be a flex container. Child elements of that container are considered flex items. - A flex container can be displayed as a block (display: flex) or inline (display: inline-flex). - By default, flex items width and height are defined by their content. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/flexbox-container-items.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - We no longer talk about CSS 3 or 4. CSS has now more than 80 specifications that evolve independently. - Where to find all CSS specifications. - How to check maturity of specifications by status code. - Where to follow CSS current work. - Where to find Flexbox and CSS Grid specifications. - How to check Flexbox and CSS Grid browser support. READY-TO-USE CODE: http://inarocket.com/courses/css/css-flexbox-cssgrid/context.php BEST BOOKS TO LEARN FLEXBOX & CSS GRID: - The New CSS Layout by A Book Apart. https://amzn.to/2ThK0f7 - Flexbox in CSS by O'Reilly Media. https://amzn.to/2Zfekeg - Grid Layout in CSS: Interface Layout for the Web by O'Reilly Media. https://amzn.to/36fmIMf - CSS Grid Layout: 5 Practical Projects by SitePoint. https://amzn.to/3bFWYd3

1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket

The document discusses setting up a development environment for learning CSS Flexbox and Grid layouts. It recommends using Visual Studio Code as the text editor and Google Chrome as the browser, which both have tools for inspecting Flexbox and Grid layouts. It provides instructions for installing all required software on Windows using Chocolatey or on MacOS using Homebrew, including downloading Chrome, Firefox, and VS Code.

15- Learn CSS Fundamentals / ColorIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use the color property to set the foreground color of an element's text content, and its decorations. - Methods to apply colors in CSS: named colors, HEX, RGB/RGBA and HSL/HSLA. - Color tools: CSS Peeper, color converter, material design palette, etc. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/color.php REFERENCES: - The color CSS property by MDN. https://developer.mozilla.org/en-US/docs/Web/CSS/color - Game: What the Hex? http://yizzle.com/whatthehex/ - CSS Peeper: Inspect styles in a simple and well-organized way. https://csspeeper.com/ - RapidTables Color Conversion. https://www.rapidtables.com/convert/color/index.html - Impalette: Scan images for dominant pantone colors. https://www.impalette.com/ - Material Design Palette. https://www.materialpalette.com/ - Brands in colours: Brands colour reference. https://loriskumo.github.io/Brands-In-Colours/ - BrandColors: Collection of official brand color codes. https://brandcolors.net/ BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

14- Learn CSS Fundamentals / InheritanceIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How some properties on a selector are inherited by all the children of that selector. - List of properties that inherit. - How to override inherited values and prevent inheritance in CSS. - How to reset a property to its inherited or initial value. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/inheritance.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

13- Learn CSS Fundamentals / SpecificityIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How specificity works for different kind of selectors. - How to create selectors avoiding specificity issues and conflicts. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/specificity.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to mix selectors (eg. Combine classes and IDs). - How to group selectors as a best practice to get a much optimized CSS. READY-TO-USE CODE: http://localhost/courses/css/css-fundamentals/mix-group.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Different combinator selectors that can be used in CSS. - How to use descendant, child and siblings combinators. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/combinators.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - Pseudo-elements as a way to refer to content that does not exist in the source document. - How to style the first letter or line of a text. - How to use CSS to generate content before/after an element’s content. READY-TO-USE CODE: https://inarocket.com/courses/css/css-fundamentals/pseudo-elements.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket

This document provides information about CSS pseudo-classes. It defines several types of pseudo-classes including dynamic, structural, and others. Dynamic pseudo-classes like :hover and :active select elements when a user interacts with them. Structural pseudo-classes select elements based on their position in a document tree, such as :first-child to select the first child element. The document provides examples of how to use different pseudo-class selectors in CSS code to style elements.

8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket

Learn CSS fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to use attribute presence and value selectors. - How to apply substring matching attribute selectors. READY-TO-USE CODE: http://inarocket.com/courses/css/css-fundamentals/selectors-attribute.php BEST BOOKS TO LEARN CSS: - CSS: The Definitive Guide: Visual Presentation for the Web by O'Reilly Media. https://amzn.to/2VOWHQT - HTML and CSS: Design and Build Websites by John Wiley & Sons. https://amzn.to/2Ir5y3i - CSS: The Missing Manual by O'Reilly Media. https://amzn.to/2ImdyTf - CSS Visual Dictionary by Independently published. https://amzn.to/2xgwHUh

2- Learn HTML Fundamentals / Text FormattingIn a Rocket

Learn HTML5 fundamentals really fast, online and free. FULL COURSE: http://inarocket.com Learn front end development fast, step-by-step and with ready-to-use code. IN THIS MODULE YOU'LL LEARN: - How to structure your content with headers. - How to organize your ideas with paragraphs. - How to force spaces and preformat text. - How to format quotes with blockquote. - How to tag relevant content with mark. - How to create ordered, unordered and description lists. - How to show/hide additional content with details. - How to document your code with comments. - How to display reserved and invisible characters with HTML entities.

1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket

Learn SUIT: CSS Naming ConventionIn a Rocket

Learn BEM: CSS Naming ConventionIn a Rocket

3- Learn Flexbox & CSS Grid / Container & itemsIn a Rocket

2- Learn Flexbox & CSS Grid / ContextIn a Rocket

1- Learn Flexbox & CSS Grid / Environment setupIn a Rocket

15- Learn CSS Fundamentals / ColorIn a Rocket

14- Learn CSS Fundamentals / InheritanceIn a Rocket

13- Learn CSS Fundamentals / SpecificityIn a Rocket

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

10- Learn CSS Fundamentals / Pseudo-elementsIn a Rocket

9- Learn CSS Fundamentals / Pseudo-classesIn a Rocket

8- Learn CSS Fundamentals / Attribute selectorsIn a Rocket

2- Learn HTML Fundamentals / Text FormattingIn a Rocket

1- Learn HTML Fundamentals / Start in 5 MinutesIn a Rocket

Learn SUIT: CSS Naming ConventionIn a Rocket

Learn BEM: CSS Naming ConventionIn a Rocket

Recently uploaded (17)

Networking_Essentials_version_3.0_-_Module_7.pptxelestirmen

MOBILE PHONE DATA presentation with all necessary detailsbenamorraj

Darley - BSides Nairobi (2025-06-07) Epochalypse 2038 - Time is Not on Our Si...treyka

Epochalypse 2038: Time is Not on Our Side Presented by Trey Darley, Founder – Threshold Continuity Alliance BSides Nairobi – 2025-06-07 The Year 2038 Problem is real — and it's already here. At exactly 03:14:07 UTC on January 19, 2038, 32-bit signed Unix time overflows. Systems that use 32-bit time_t will reset to 1901 and/or fail outright. But this isn’t just about old embedded gear. It’s about trust, cryptographic integrity, log coherence, financial timestamps, system coordination, and the fragile scaffolding of global infrastructure. This talk explores a dangerous and still largely invisible class of vulnerabilities: timestamp fragility and time synchronization failure. We cover: - Why over 60% of global software systems still depend on Unix epoch time - How 2038 bugs can manifest subtly — without a crash, and without warning - Why critical infrastructure (energy, telecom, aviation, finance) is especially at risk - How even modern firmware is being shipped today with latent Y2038 bugs - The implications for TLS certificates, forensic timelines, billing systems, and safety-critical protocols - How time can be maliciously spoofed, delayed, or misaligned — and why legacy NTP is often unauthenticated - A pragmatic call for 2038 rollover testbeds, code audits, and hardened time infrastructure - Recommendations for deploying secure time protocols (NTS, RFC 8915), GPS + Rubidium/Cesium fallback, and air-gapped sync You’ll leave with a grounded understanding of: - Why time isn’t just an input — it’s an untrusted vector - What engineers, regulators, and defenders must do now to avert a long-tail catastrophe - How underserved regions may suffer disproportionately — but also leap ahead by refusing to inherit broken time About the Speaker Trey Darley is the founder of the Threshold Continuity Alliance (TCA), an initiative focused on strategic risk, infrastructure integrity, and time-based vulnerability remediation. A long-time figure in the global cybersecurity community, Trey works at the intersection of symbolic systems, resilience engineering, and future ethics.

ICP -2 Review – What It Is, and How to Participate and Provide Your FeedbackAPNIC

What to Expect When Hiring Shopify Development Services_ A Technical Walkthro...CartCoders

ARTIFICIAL INTELLIGENCE.pptx2565567765676areebaimtiazpmas

Inter-Mirifica-Navigating-Media-in-the-Modern-World.pptxsecretarysocom

On Dec. 4, 1963, the Second Vatican Council solemnly approved its first two documents: the constitution on the Sacred Liturgy, Sacrosanctum Concilium, and the decree Inter Mirifica, regarding the mass media. The latter document is much less known than the former one. Nonetheless, Inter Mirifica offers some crucial principles to guide us in a world where we find ourselves ever more immersed in mass communication: the press, film, television, along with the newer forms of media. During the preparation for Vatican II, the Church keenly realized the importance of this topic, and Pope John XXIII established a special body to work on a text that might articulate the Church’s teaching on the mass media and promote her action in this area. The result of this work was an extensive document, entitled “On the instruments of social communication,” which was presented to the Council on Nov. 23, 1962.

10 Latest Technologies and Their Benefits to End.pptxEphraimOOghodero

UV_Unwrapping_Lecture_with_Figures.pptx presentation for lecture of animation17218

How to Make Money as a Cam Model – Tips, Tools & Real TalkCam Sites Expert

Want to turn your charm, confidence, and camera into a real source of income? This presentation reveals everything you need to know about making money as a cam model — whether you're just starting out or looking to boost your earnings. From choosing the right platform, building your fanbase, and setting up your cam space, to marketing yourself and creating passive income with clips, this guide covers it all. I’ll also share real-world insights from my experience on CamsRating.com. No BS — just proven tips, smart tools, and sexy strategies to get paid doing what you love.

Cloud Computing - iCloud by Hamza Anwaar .pptxislamicknowledge5224

Cloud Computing – iCloud Cloud computing is a modern technology that allows users to store and access data over the internet instead of using local storage devices. One of the most popular cloud services is Apple's iCloud, which is specially designed for Apple users. iCloud helps users keep their data safe, accessible, and synchronized across all Apple devices like iPhones, iPads, and MacBooks. It is simple to use, secure, and saves time by automatically backing up important information.

Google_Cloud_Computing_Fundamentals.pptxektadangwal2005

最新版西班牙加泰罗尼亚国际大学毕业证（UIC毕业证书）原版定制Taqyea

挂科无法毕业鉴于此购买文凭【q薇1954292140】一比一原版(UIC毕业证)加泰罗尼亚国际大学毕业证如何办理改成绩单GPA，文凭购买，毕业证办理，文凭办理只是基础业务。【q薇1954292140】一比一还原国外大学毕业证，定制国外大学学历，制作国外大学文凭，复刻国外大学毕业证书。学位证1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。【办理加泰罗尼亚国际大学成绩单Buy Universitat Internacional de Catalunya Transcripts】购买日韩成绩单、英国大学成绩单、美国大学成绩单、澳洲大学成绩单、加拿大大学成绩单（q微1954292140）新加坡大学成绩单、新西兰大学成绩单、爱尔兰成绩单、西班牙成绩单、德国成绩单。成绩单的意义主要体现在证明学习能力、评估学术背景、展示综合素质、提高录取率，以及是作为留信认证申请材料的一部分。加泰罗尼亚国际大学成绩单能够体现您的的学习能力，包括加泰罗尼亚国际大学课程成绩、专业能力、研究能力。（q微1954292140）具体来说，成绩报告单通常包含学生的学习技能与习惯、各科成绩以及老师评语等部分，因此，成绩单不仅是学生学术能力的证明，也是评估学生是否适合某个教育项目的重要依据！ Buy Universitat Internacional de Catalunya Diploma《正式成绩单论文没过》有文凭却得不到认证。又该怎么办？鉴于此，购买西班牙毕业证【q微1954292140】西班牙文凭购买，西班牙文凭购买，西班牙文凭定制，西班牙文凭补办。专业在线定制西班牙大学文凭，定做西班牙本科文凭，【q微1954292140】复制西班牙Universitat Internacional de Catalunya completion letter。在线快速补办西班牙本科毕业证、硕士文凭证书，购买西班牙学位证、加泰罗尼亚国际大学Offer，西班牙大学文凭在线购买。【主营项目】一、工作未确定，回国需先给父母、亲戚朋友看下文凭的情况，办理毕业证|办理加泰罗尼亚国际大学毕业证（UIC毕业证书）文凭: 买大学毕业证|买大学文凭【q薇1954292140】学位证明书如何办理申请？二、回国进私企、外企、自己做生意的情况，这些单位是不查询毕业证真伪的，而且国内没有渠道去查询国外文凭的真假，也不需要提供真实教育部认证。鉴于此，办理加泰罗尼亚国际大学毕业证【q薇1954292140】西班牙学位证（UIC毕业证书）加泰罗尼亚国际大学毕业证书如何办理国外大学毕业证, 文凭办理, 国外文凭办理, 留信网认证三.材料咨询办理、认证咨询办理加泰罗尼亚国际大学毕业证（UIC毕业证书）请加学历顾问【微信:1954292140】毕业证购买指大学文凭购买，毕业证办理和文凭办理。学院文凭定制，学校原版文凭补办，扫描件文凭定做，100%文凭复刻。经常操作的国家有美国毕业证，英国毕业证，澳洲毕业证，加拿大毕业证，以及德国毕业证，法国毕业证、荷兰毕业证、瑞士毕业证、日本毕业证、韩国毕业证、新西兰毕业证、新加坡毕业证、泰国毕业证、马来西亚毕业证等。包括了本科毕业证，硕士毕业证。

Predicting Site Quality Google Patent US9767157B2 - Behzad Hussain.pdfBehzad Hussain

𝐏𝐚𝐭𝐞𝐧𝐭 𝐈𝐧𝐟𝐨𝐫𝐦𝐚𝐭𝐢𝐨𝐧 𝗣𝗮𝘁𝗲𝗻𝘁 𝗡𝗼.: US9767157B2 𝗧𝗶𝘁𝗹𝗲: Predicting Site Quality 𝗔𝘀𝘀𝗶𝗴𝗻𝗲𝗲: Google Inc., Mountain View, CA 𝗜𝗻𝘃𝗲𝗻𝘁𝗼𝗿𝘀: Navneet Panda; Yun Zhou 𝗜𝘀𝘀𝘂𝗲 𝗗𝗮𝘁𝗲: September 19, 2017 𝐀𝐛𝐬𝐭𝐫𝐚𝐜𝐭 This patent describes methods and systems for automatically predicting a quality score for a website (or “site”) that can be used as a ranking signal in search engines: 1. 𝗕𝗮𝘀𝗲𝗹𝗶𝗻𝗲 𝘀𝗶𝘁𝗲 𝗾𝘂𝗮𝗹𝗶𝘁𝘆 𝘀𝗰𝗼𝗿𝗲𝘀 obtained for previously scored sites. 2. 𝗣𝗵𝗿𝗮𝘀𝗲 𝗺𝗼𝗱𝗲𝗹𝘀 that map phrase-specific relative frequency measures to baseline quality scores. 3. 𝗔𝗴𝗴𝗿𝗲𝗴𝗮𝘁𝗲 𝘀𝗰𝗼𝗿𝗶𝗻𝗴 of a new site by applying the phrase model to its phrase frequencies and then predicting its overall site quality score from the aggregate. 𝐒𝐲𝐬𝐭𝐞𝐦 𝐀𝐫𝐜𝐡𝐢𝐭𝐞𝐜𝐭𝐮𝐫𝐞 (𝐅𝐢𝐠. 𝟏) 1. 𝗨𝘀𝗲𝗿 𝗗𝗲𝘃𝗶𝗰𝗲 & 𝗡𝗲𝘁𝘄𝗼𝗿𝗸: Users submit queries via a device (e.g., browser) over a network. 2. 𝗦𝗲𝗮𝗿𝗰𝗵 𝗦𝘆𝘀𝘁𝗲𝗺: Contains an Indexing Engine (builds the index database) and a Ranking Engine (ranks results). 3. 𝗦𝗶𝘁𝗲 𝗦𝗰𝗼𝗿𝗶𝗻𝗴 𝗘𝗻𝗴𝗶𝗻𝗲: Computes site quality scores using the phrase model and provides these scores to the ranking engine as part of the ranking signals. 𝐏𝐡𝐫𝐚𝐬𝐞 𝐌𝐨𝐝𝐞𝐥 𝐆𝐞𝐧𝐞𝐫𝐚𝐭𝐢𝐨𝐧 (𝐅𝐢𝐠. 𝟐) 1. 𝗧𝗼𝗸𝗲𝗻𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗮𝗻𝗱 𝗻-𝗴𝗿𝗮𝗺 𝗘𝘅𝘁𝗿𝗮𝗰𝘁𝗶𝗼𝗻: For each site in a corpus of previously scored sites, extract n-grams (typically 2- to 5-grams) from page content. 2. 𝗥𝗲𝗹𝗮𝘁𝗶𝘃𝗲 𝗙𝗿𝗲𝗾𝘂𝗲𝗻𝗰𝘆 𝗖𝗮𝗹𝗰𝘂𝗹𝗮𝘁𝗶𝗼𝗻: For each extracted n-gram, compute its relative frequency as the ratio of pages containing that n-gram to total pages on the site. 3. 𝗕𝘂𝗰𝗸𝗲𝘁 𝗣𝗮𝗿𝘁𝗶𝘁𝗶𝗼𝗻𝗶𝗻𝗴: Group sites into 20–100 buckets based on their relative frequency measures for each n-gram, ensuring roughly equal bucket sizes or equal interval ranges. 4. 𝗕𝗮𝘀𝗲𝗹𝗶𝗻𝗲 𝗦𝗰𝗼𝗿𝗲 𝗔𝗴𝗴𝗿𝗲𝗴𝗮𝘁𝗶𝗼𝗻: For each bucket, calculate an average baseline quality score from the known scores of sites in that bucket. 5. 𝗣𝗵𝗿𝗮𝘀𝗲 𝗠𝗼𝗱𝗲𝗹 𝗖𝗼𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻: Associate each n-gram with its vector of bucket-average quality scores. Optionally exclude “neutral” phrases whose scores are statistically indistinguishable from the global average. 𝐒𝐢𝐭𝐞 𝐐𝐮𝐚𝐥𝐢𝐭𝐲 𝐏𝐫𝐞𝐝𝐢𝐜𝐭𝐢𝐨𝐧 𝐏𝐫𝐨𝐜𝐞𝐬𝐬 (𝐅𝐢𝐠. 𝟑) 1. 𝗥𝗲𝗹𝗮𝘁𝗶𝘃𝗲 𝗙𝗿𝗲𝗾𝘂𝗲𝗻𝗰𝘆 𝗳𝗼𝗿 𝗡𝗲𝘄 𝗦𝗶𝘁𝗲: Extract the same set of n-grams from the new (previously unscored) site and compute their relative frequencies. 2. 𝗕𝘂𝗰𝗸𝗲𝘁 𝗟𝗼𝗼𝗸𝘂𝗽: For each phrase, map its relative frequency to the corresponding bucket’s average score in the phrase model. 3. 𝗔𝗴𝗴𝗿𝗲𝗴𝗮𝘁𝗲 𝗦𝗰𝗼𝗿𝗲 𝗖𝗼𝗺𝗽𝘂𝘁𝗮𝘁𝗶𝗼𝗻: Compute an aggregate score across all phrases’ bucket scores—typically via a weighted or unweighted mean. Weights can reflect phrase frequency, distance from a “neutral” score, or limit the influence of overly frequent phrases.

Vigilanti-Cura-Protecting-the-Faith.pptxsecretarysocom

On the 29th of June, 1936, Pius XI addressed a pontifical encyclical entitled "Vigilanti Cura" to all the Catholic bishops in the United States. This encyclical was dedicated to "The Motion Picture" and justified his intervention by "the lamentable progress of the motion picture art and industry in the portrayal of sin and vice". I've appropriated the title of his encyclical for my film, putting it to a completely different use to that originally intended. The 'photogenic quality' of the Latin terminology has, however, been preserved and, as per Adorno: "like a neon light which has just been switched on, the commercial and promotional nature of contemporary culture glows brightly". Vigilanti Cura is an irreverent film; insolent and deliberately confusing; a grab-bag of immorality. The montage combines a range of archival imagery from Humanite magazine with images sourced from the media (the military parade of the 14th of July, the current sorry crop of political celebrities ...) or from the cinema (the automatic writing of a puzzle composed of motifs borrowed from existing films). Vigilanti Cura ... or merely a tacit admission of the downfall of contemporary man, drowning in a sea of political, social and religious fundamentalisms. Where is he to be found? Locked in a vis-a-vis with depression and ego. Psychoanalysis no longer serves as a pretext for the dissolution of sexual and social taboos; it now provokes withdrawal into an auto-reflexive isolation, to the extent that societal problems get frozen in the mirror of Auto-Medusification. The mirror has become our idol - let's destroy it!

Internet_of_Things_Presentation_by-Humera.pptxcshumerabashir

3D Graphics an introduction and details .pptxislamicknowledge5224

Networking_Essentials_version_3.0_-_Module_7.pptxelestirmen

MOBILE PHONE DATA presentation with all necessary detailsbenamorraj

Darley - BSides Nairobi (2025-06-07) Epochalypse 2038 - Time is Not on Our Si...treyka

ICP -2 Review – What It Is, and How to Participate and Provide Your FeedbackAPNIC

What to Expect When Hiring Shopify Development Services_ A Technical Walkthro...CartCoders

ARTIFICIAL INTELLIGENCE.pptx2565567765676areebaimtiazpmas

Inter-Mirifica-Navigating-Media-in-the-Modern-World.pptxsecretarysocom

10 Latest Technologies and Their Benefits to End.pptxEphraimOOghodero

UV_Unwrapping_Lecture_with_Figures.pptx presentation for lecture of animation17218

How to Make Money as a Cam Model – Tips, Tools & Real TalkCam Sites Expert

Cloud Computing - iCloud by Hamza Anwaar .pptxislamicknowledge5224

Google_Cloud_Computing_Fundamentals.pptxektadangwal2005

最新版西班牙加泰罗尼亚国际大学毕业证（UIC毕业证书）原版定制Taqyea

Predicting Site Quality Google Patent US9767157B2 - Behzad Hussain.pdfBehzad Hussain

Vigilanti-Cura-Protecting-the-Faith.pptxsecretarysocom

Internet_of_Things_Presentation_by-Humera.pptxcshumerabashir

3D Graphics an introduction and details .pptxislamicknowledge5224

17- Learn CSS Fundamentals / Units

1. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Units

2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE   UNITS RELATIVE   UNITS

3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE   UNITS px pixel 1/96 of 1 inch (96px = 1 inch) pt point 1/72 of 1 inch (72pt = 1 inch) pc pica 12pt = 1pc mm millimeter 1cm = 10mm cm centimeter 10mm = 1cm in inch 2.54 cm = 1 inch

4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com GOOD PRACTICE Pixels are bad for usability: • they don't scale, • they don't help other elements to scale proportionally. Use them only when you really need an exact and ﬁxed size. EXAMPLE border: 1px solid #000; AVOID PIXELS

5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE   UNITS RELATIVE   UNITS

6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE   UNITS % Percentage Relative to the parent element’s value for that property. em Em Relative to the current font-size of the element. rem Root em Relative to the font-size of the root. ch Character Relative to width of the "0". vw Viewport width Relative to the width of viewport. 1vw = 1/100 of the viewport’s width. vh Viewport height Relative to the height of viewport. 1vw = 1/100 of the viewport’s height. vmin Smaller dimension 1vmin = 1/100 of viewport’s smaller dimension. ex x-height Relative to the height of a lower-case x. vmax Larger dimension 1vmax = 1/100 of viewport’s larger dimension.

7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / PERCENTAGE .box { width: 50%; } container: 1000x Box 500px

8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / EM .box { font-size: 2em; width: 4em; } font-size: 20px Box 20x4 Container text. 20x2

9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / REM :root { font-size: 15px; } .box { font-size: 3rem; width: 6rem; } font-size: 20px Box 15x6 Container text. 15x3

10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / REM vs EM EM REM html {font-size: 100%} /* 16px */ h1 { font-size: 2em; margin-bottom: 1em; } p { font-size: 1em; margin-bottom: 1em; } /* 1em = 16px */ /* 1em = 32px */ /* 1em = 16px */ /* 1em = 16px */ html {font-size: 100%} /* 16px */ h1 { font-size: 2rem; margin-bottom: 1rem; } p { font-size: 1rem; margin-bottom: 1rem; } /* 1em = 16px */ /* 1em = 16px */ /* 1em = 16px */ /* 1em = 16px */ [ [

11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VW .box { width: 50vw; } viewport Box 50% of the viewport

12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VH .box { height: 100vh; } viewport Box 100% of the viewport

13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VMIN .box { font-size: 10vmin; } width: 1000px Box 10% of 500px=50px 1vmin = 1vw or 1vh, whichever is smaller. height: 500px

14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RELATIVE UNITS / VMAX .box { font-size: 10vmax; } width: 1000px Box 1vmax = 1vw or 1vh, whichever is larger. height: 500px 10% of 1000px=100px

15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HOW TO CHOOSE A CSS UNIT Do I need to scale an element when the viewport size changes? What do I want it to scale relative to?

16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com ABSOLUTE   UNITS RELATIVE   UNITS

17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: TYPE SCALE

18. Learn front-end development at rocket speed inarocket.com by miguelsanchez.com YOU CAN CONTINUE THIS COURSE FOR FREE ON + READY TO USE CODE + QUIZZES + FREE UPDATES

19. We respect your time  No more blah blah videos. Just straight to the point slides with relevant information. Ready to use code  Real code you can just copy and paste into your real projects. Step by step guides  Clear and concise steps to build real use solutions. No missed points. Learn front-end development at rocket speed inarocket.com

20. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Units

17- Learn CSS Fundamentals / Units

Recommended

More Related Content

Similar to 17- Learn CSS Fundamentals / Units (20)

More from In a Rocket (15)

Recently uploaded (17)

17- Learn CSS Fundamentals / Units