15- Learn CSS Fundamentals / Color

Apr 13, 20200 likes172 views

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

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

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
NAMED COLORS
With this code all paragraphs are shown in green.
The color property sets the foreground color of an element's text content, and its decorations.
p { color: green }

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX
COLORS
NAMED 
COLORS
HSL/HSLA
COLORS
RGB/RGBA
COLORS

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
NAMED COLORS
Pink Hex RGB
Red Hex RGB
Orange Hex RGB
Yellow Hex RGB
White Hex RGB Gray & black Hex RGB Green Hex RGB

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
NAMED COLORS
Blue Hex RGB Purple Hex RGBCyan Hex RGB Brown Hex RGB

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
NAMED COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: red; }
Web page title
index.html
CSS rocks!

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX COLORS
p { color: #000000 }
Red Green Blue

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX COLORS
#
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
RED GREEN BLUE

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX COLORS
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
#
RED
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
GREEN
F
E
D
C
B
A
9
8
7
6
5
4
3
2
1
0
BLUE
= #ff0000

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HEX COLORS
#000000
#000
#ffffff
#fff
#ff0000
#f00
#00ff00
#0f0
#0000ff
#00f

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
HEX COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: #f00; }
Web page title
index.html
CSS rocks!

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
GAME: GUESS THE COLOR

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RGB / RGBA COLORS
p { color: rgb(0,0,255) }
Red Green Blue
255
0
255
0
255
0
With this code all paragraphs are shown in blue.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RGB / RGBA COLORS
rgb(0,0,0)
rgb(255,255,255)
rgb(255,0,0)
rgb(0,255,0)
rgb(0,0,255)

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
RGB / RGBA COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: rgb(0,0,255) }
Web page title
index.html
CSS rocks!

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
RGB / RGBA COLORS
p { color: rgba(0,0,255,0.5) }
Alpha 
(transparency)
1
0
With this code all paragraphs are shown in blue with 50% transparency.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HSL/HSLA COLORS
p { color: hsl(240,100%,50%) }
Hue Saturation Lightness
0 360

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HSL/HSLA COLORS
hsl(0,0%,0%)
hsl(0,0%,100%)
hsl(0,100%,50%)
hsl(120,100%,50%)
hsl(240,100%,50%)

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HTML CSS
Browser
HSL/HSLA COLORS
<body>
<p>CSS rocks!</p>
</body>
p { color: hsl(240,100%,50%) }
Web page title
index.html
CSS rocks!

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
HSL/HSLA COLORS
p { color: hsla(240,100%,50%,0.5) }
Alpha 
(transparency)
1
0
With this code all paragraphs are shown in blue with 50% transparency.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: CSS PEEPER
Inspect a color palette used on a website.

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: COLOR CONVERTER

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: IMPALETTE
Find the most dominant color in an image

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: MATERIAL DESIGN PALETTE

CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com
TOOLS: BRANDS IN COLOURS

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

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

This document provides an overview and introduction to Sass and Compass: - Sass is a CSS pre-processor that adds features like variables, nesting, mixins and functions to regular CSS. It makes CSS more powerful and maintainable. - Compass is a library of useful CSS functions and mixins built on Sass. It helps speed up development by providing things like cross-browser CSS3 rounded corners. - Grunt is a JavaScript task runner that can be used to automate repetitive tasks like compiling Sass files into regular CSS. The Gruntfile.js configures Grunt's settings and tasks.

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

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.

AAVN_Presentation_SASS.pptxHoàng Nguyễn Mạnh

SASS is a meta-language that extends CSS by providing features like nesting rules, variables, mixins and importing to create more organized and maintainable stylesheets. It compiles SASS files into normal CSS files. SASS allows nesting CSS rules to organize code, using variables to declare values that can be reused, and writing reusable code blocks called mixins. It also enables importing partial SASS files to modularize CSS code.

Static web sites assignment 1 philip lemmon1Lemmon12

This document discusses the creation of a static website assignment using HTML5 and CSS. It focuses on coding a grid table with HTML tags and then styling the table with CSS code to change features like colors, borders, font size and padding. The author tests the code on popular browsers like Firefox, Chrome, Opera and Internet Explorer and finds the CSS styling works across all browsers as intended.

ARTDM 171, Week 5: CSSGilbert Guerrero

This document provides an overview of CSS tags and concepts covered in an ARTDM 171 class. It discusses common CSS tags like <a>, <img>, <ul>, <ol>, and <table> and how to structure them. It also covers CSS concepts like selectors, pseudo-classes, embedded/linked/inline stylesheets, relative vs absolute font sizing, and CSS properties like color, font-family and font-size. The document concludes by reminding students that group projects are due next week and homework is due on September 22nd to cover formatting images for the web.

Class 2: CSS Selectors, Classes & IdsErika Tarte

Web Form Design (Web Visions 2009)Christopher Schmitt

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

SASS Lecture Adnan Arshad

SASS (Syntactically Awesome Stylesheets) is a CSS preprocessor that adds powerful features to regular CSS like variables, nesting, mixins, inheritance and more. This allows developers to write more organized, reusable and maintainable CSS code. The document introduces SASS, its features and benefits. It explains how SASS code is compiled into regular CSS and can be used to enhance development workflows and productivity.

CSS ExtendersIdan Gazit

This document summarizes and compares CSS preprocessor tools Sass and LESS. Both tools allow for variables, mixins, nested rules and other features to aid in writing CSS in a more modular way. Sass uses the SCSS syntax which is a CSS superset, while LESS uses its own syntax. Both compile to plain CSS. The Compass framework is also mentioned, which builds on Sass and provides reusable components and a workflow for building CSS.

CSSDeepa Lakshmi

The document provides an introduction to Cascading Style Sheets (CSS) and explains that CSS allows styling and formatting of HTML documents through properties that control elements like color, font, size and layout. It covers the different methods of implementing CSS including internal, external and inline styles and describes various CSS properties for manipulating text styling, backgrounds, images, padding, margins and more.

Thuray css3Amrinder SINGH

This document provides a tutorial on using external style sheets (CSS) to control formatting across multiple web pages. It explains how to link a CSS file to HTML pages using the <link> tag, and how this allows editing styles in one place to update all pages. Special CSS classes are defined for things like headings, links, and footnotes, and the tag is used to apply these styles. The example CSS code provided sets fonts, colors, and other styles for basic page elements like body text, headings, and tables. Using an external CSS makes it easy for webmasters to change the look of an entire site by editing just one CSS file.

Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Tom Hapgood

Learn Sass and Compass quickBilly Shih

Sass & Compass (Barcamp Stuttgart 2012)emrox

CSS3 is Not Magic Pixie DustKyle Adams

Fasten RWD Development with SassSven Wolfermann

Big Design Conference: CSS3 Wynn Netherland

CSS frameworks allow for nested rules, variables, mixins, extends and imports to simplify stylesheet maintenance. Preprocessors like Sass compile CSS with additional features like nested selectors, variables, functions and mixins. Popular frameworks include Blueprint and Compass which provide tools and patterns for common tasks. Preprocessors increase abstraction and reduce duplication, improving organization and simplifying code.

Wrangling the CSS Beast with SassRob Friesel

Sass is an extension of CSS3 that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax. (With a little help from Ruby) This talk will cover an overview of what Sass is, how to get it, run it, and use it, and show some examples of its magic. Code examples at: https://github.com/founddrama/vt-code-camp

LIS3353 SP12 Week 13Amanda Case

The document provides an overview and review of CSS (Cascading Style Sheets) and discusses different methods for applying CSS styles, including internal/embedded styles, external stylesheets, inline styles, and using multiple style sheets. It covers CSS selectors like classes, IDs, divs, and spans. It also lists some common CSS properties that can be changed, such as backgrounds, fonts, text properties, and margins. The document emphasizes that when multiple styles conflict, more specific or later declared styles will override earlier, less specific styles.

Work and play with SASS & CompassAndreas Dantz

Sass and Compass allow for more powerful CSS authoring by adding features like variables, nested rules, mixins and functions. This allows stylesheets to be written in a more modular, maintainable and scalable way. Sass code is compiled to normal CSS for browser rendering. Key features demonstrated include variables for consistent values, nesting to reduce selector complexity, mixins for reusable code snippets, and Compass libraries for common CSS3 features and responsive design.

Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"bentleyhoke

Sass is a CSS preprocessor that allows for variables, nested rules, mixins, inheritance and other features to help organize and maintain CSS code. It compiles Sass/SCSS code into normal CSS. Using Sass offers benefits like better code organization which makes the code easier to maintain and share, it can improve performance by allowing code to be compressed, and it provides powerful features like variables, nesting, mixins and functions that allow for writing cleaner and more reusable CSS.

Advance Web Designing - Lecture 02 / 30alishanvr

This document provides an overview of CSS backgrounds, text, and fonts. It discusses how to change background colors and images, repeat backgrounds, and use shorthand properties. For text, it covers coloring, alignment, decoration, transformation, indentation, letter spacing, line height, word spacing, and shadows. Finally, it discusses changing font families and using fallback fonts. The document includes examples for many of the CSS properties discussed.

Doing More With LessDavid Engel

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

Compass, Sass, and the Enlightened CSS DeveloperWynn Netherland

This document discusses Sass, Compass, and the enlightened web. It describes how Sass provides powerful features like variables, nested rules, mixins, selector inheritance and functions that allow developers to write more maintainable CSS. Compass is a library of Sass extensions that provides CSS3 mixins. Together, Sass and Compass allow developers to write stylesheets in a more simplified and structured way.

CSS 開發加速指南－Sass & CompassLucien Lee

This document introduces Sass (Syntactically Awesome Style Sheets), which is a CSS preprocessor that adds powerful features like variables, nested rules, mixins, inheritance, and other useful tools that help make authoring CSS easier and more maintainable. It discusses some of the key benefits of using Sass like variables, nesting, mixins, functions, and operations that make styling more powerful and repetitive tasks easier. It also covers using Compass, a Sass extension framework, to gain access to useful CSS3 mixins and functions.

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 15- Learn CSS Fundamentals / Color (20)

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

SASS Lecture Adnan Arshad

CSS ExtendersIdan Gazit

CSSDeepa Lakshmi

Thuray css3Amrinder SINGH

Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Tom Hapgood

Learn Sass and Compass quickBilly Shih

Sass & Compass (Barcamp Stuttgart 2012)emrox

CSS3 is Not Magic Pixie DustKyle Adams

Fasten RWD Development with SassSven Wolfermann

Big Design Conference: CSS3 Wynn Netherland

Wrangling the CSS Beast with SassRob Friesel

LIS3353 SP12 Week 13Amanda Case

Work and play with SASS & CompassAndreas Dantz

Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"bentleyhoke

Advance Web Designing - Lecture 02 / 30alishanvr

Doing More With LessDavid Engel

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

Compass, Sass, and the Enlightened CSS DeveloperWynn Netherland

CSS 開發加速指南－Sass & CompassLucien Lee

14- Learn CSS Fundamentals / InheritanceIn a Rocket

SASS Lecture Adnan Arshad

CSS ExtendersIdan Gazit

CSSDeepa Lakshmi

Thuray css3Amrinder SINGH

Embrace the Mullet: CSS is the 'Party in the Back' (a CSS How-to)Tom Hapgood

Learn Sass and Compass quickBilly Shih

Sass & Compass (Barcamp Stuttgart 2012)emrox

CSS3 is Not Magic Pixie DustKyle Adams

Fasten RWD Development with SassSven Wolfermann

Big Design Conference: CSS3 Wynn Netherland

Wrangling the CSS Beast with SassRob Friesel

LIS3353 SP12 Week 13Amanda Case

Work and play with SASS & CompassAndreas Dantz

Brian Hoke: WordCamp Toronto 2014 Presentation "Sass & WordPress"bentleyhoke

Advance Web Designing - Lecture 02 / 30alishanvr

Doing More With LessDavid Engel

11- Learn CSS Fundamentals / CombinatorsIn a Rocket

Compass, Sass, and the Enlightened CSS DeveloperWynn Netherland

CSS 開發加速指南－Sass & CompassLucien Lee

More from In a Rocket (12)

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.

17- Learn CSS Fundamentals / UnitsIn a Rocket

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.

16- Learn CSS Fundamentals / BackgroundIn 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 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

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

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

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

17- Learn CSS Fundamentals / UnitsIn a Rocket

16- Learn CSS Fundamentals / BackgroundIn a Rocket

12- Learn CSS Fundamentals / Mix & groupIn a Rocket

10- Learn CSS Fundamentals / Pseudo-elementsIn 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)

HPC_Course_Presentation_No_Images included.pptxnaziaahmadnm

原版西班牙马拉加大学毕业证(UMA毕业证书)如何办理Taqyea

文凭(UMA毕业证书)马拉加大学毕业证成绩单制作案例【q微1954292140】马拉加大学offer/学位证、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作【q微1954292140】Buy Universidad de Málaga Diploma购买美国毕业证，购买英国毕业证，购买澳洲毕业证，购买加拿大毕业证，以及德国毕业证，购买法国毕业证（q微1954292140）购买荷兰毕业证、购买瑞士毕业证、购买日本毕业证、购买韩国毕业证、购买新西兰毕业证、购买新加坡毕业证、购买西班牙毕业证、购买马来西亚毕业证等。包括了本科毕业证，硕士毕业证。【办理马拉加大学成绩单Buy Universidad de Málaga Transcripts】购买日韩成绩单、英国大学成绩单、美国大学成绩单、澳洲大学成绩单、加拿大大学成绩单（q微1954292140）新加坡大学成绩单、新西兰大学成绩单、爱尔兰成绩单、西班牙成绩单、德国成绩单。成绩单的意义主要体现在证明学习能力、评估学术背景、展示综合素质、提高录取率，以及是作为留信认证申请材料的一部分。马拉加大学成绩单能够体现您的的学习能力，包括马拉加大学课程成绩、专业能力、研究能力。（q微1954292140）具体来说，成绩报告单通常包含学生的学习技能与习惯、各科成绩以及老师评语等部分，因此，成绩单不仅是学生学术能力的证明，也是评估学生是否适合某个教育项目的重要依据！ Buy Universidad de Málaga Diploma《正式成绩单论文没过》有文凭却得不到认证。又该怎么办？？？西班牙毕业证购买，西班牙文凭购买，【q微1954292140】西班牙文凭购买，西班牙文凭定制，西班牙文凭补办。专业在线定制西班牙大学文凭，定做西班牙本科文凭，【q微1954292140】复制西班牙Universidad de Málaga completion letter。在线快速补办西班牙本科毕业证、硕士文凭证书，购买西班牙学位证、马拉加大学Offer，西班牙大学文凭在线购买。特殊原因导致无法毕业，也可以联系我们帮您办理相关材料：１：在马拉加大学挂科了，不想读了，成绩不理想怎么办？ 2：打算回国了，找工作的时候，需要提供认证《UMA成绩单购买办理马拉加大学毕业证书范本》购买日韩毕业证、英国大学毕业证、美国大学毕业证、澳洲大学毕业证、加拿大大学毕业证（q微1954292140）新加坡大学毕业证、新西兰大学毕业证、爱尔兰毕业证、西班牙毕业证、德国毕业证，回国证明，留信网认证，留信认证办理，学历认证。从而完成就业。马拉加大学毕业证办理，马拉加大学文凭办理，马拉加大学成绩单办理和真实留信认证、留服认证、马拉加大学学历认证。学院文凭定制，马拉加大学原版文凭补办，成绩单详解细节，扫描件文凭定做，100%文凭复刻。主营项目： 1、真实教育部国外学历学位认证《西班牙毕业文凭证书快速办理马拉加大学学位证和毕业证的区别》【q微1954292140】《论文没过马拉加大学正式成绩单》，教育部存档，教育部留服网站100%可查. 2、办理UMA毕业证，改成绩单《UMA毕业证明办理马拉加大学学历认证失败怎么办》【Q/WeChat：1954292140】Buy Universidad de Málaga Certificates《正式成绩单论文没过》，马拉加大学Offer、在读证明、学生卡、信封、证明信等全套材料，从防伪到印刷，从水印到钢印烫金，高精仿度跟学校原版100%相同. 3、真实使馆认证（即留学人员回国证明），使馆存档可通过大使馆查询确认. 4、留信网认证，国家专业人才认证中心颁发入库证书，留信网存档可查. 西班牙马拉加大学毕业证(UMA毕业证书）UMA文凭【q微1954292140】高仿真还原西班牙文凭证书和外壳，定制西班牙马拉加大学成绩单和信封。学历认证失败怎么办UMA毕业证【q微1954292140】毕业证工艺详解马拉加大学offer/学位证文凭一模一样、留信官方学历认证（永久存档真实可查）采用学校原版纸张、特殊工艺完全按照原版一比一制作。帮你解决马拉加大学学历学位认证难题。帮您解决在西班牙马拉加大学未毕业难题（Universidad de Málaga）文凭购买、毕业证购买、大学文凭购买、大学毕业证购买、买文凭、日韩文凭、英国大学文凭、美国大学文凭、澳洲大学文凭、加拿大大学文凭（q微1954292140）新加坡大学文凭、新西兰大学文凭、爱尔兰文凭、西班牙文凭、德国文凭、教育部认证，买毕业证，毕业证购买，买大学文凭，【q微1954292140】学位证1:1完美还原海外各大学毕业材料上的工艺：水印，阴影底纹，钢印LOGO烫金烫银，LOGO烫金烫银复合重叠。文字图案浮雕、激光镭射、紫外荧光、温感、复印防伪等防伪工艺。《马拉加大学2025年新版毕业证书西班牙毕业证书办理UMA录取通知书》

Transport Conjjjjjjjjjjjjjjjjjjjjjjjsulting by Slidesgo.pptxssuser80a7e81

Networking concepts from zero to hero that covers the security aspectsamansinght675

all Practical Project LAST summary note.docxseidjemal94

Cloud VPS Provider in India: The Best Hosting Solution for Your BusinessDanaJohnson510230

basic to advance network security conceptsamansinght675

Presentation About The Buttons | Selma SALTIKSELMA SALTIK

Essential Tech Stack for Effective Shopify Dropshipping Integration.pdfCartCoders

OSI_Security_Architecture Computer Science.pptxfaizanaseem873

5 Reasons cheap WordPress hosting is costing you more | Reversed OutReversed Out Creative

10 Latest Technologies and Their Benefits to End.pptxEphraimOOghodero

Networking_Essentials_version_3.0_-_Module_7.pptxelestirmen

Frontier Unlimited Internet Setup Step-by-Step Guide.pdfInternet Bundle Now

ARTIFICIAL INTELLIGENCE.pptx2565567765676areebaimtiazpmas

AI REPLACING HUMANS /FATHER OF AI/BIRTH OF AIskdav34

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.

HPC_Course_Presentation_No_Images included.pptxnaziaahmadnm

原版西班牙马拉加大学毕业证(UMA毕业证书)如何办理Taqyea

Transport Conjjjjjjjjjjjjjjjjjjjjjjjsulting by Slidesgo.pptxssuser80a7e81

Networking concepts from zero to hero that covers the security aspectsamansinght675

all Practical Project LAST summary note.docxseidjemal94

Cloud VPS Provider in India: The Best Hosting Solution for Your BusinessDanaJohnson510230

basic to advance network security conceptsamansinght675

Presentation About The Buttons | Selma SALTIKSELMA SALTIK

Essential Tech Stack for Effective Shopify Dropshipping Integration.pdfCartCoders

OSI_Security_Architecture Computer Science.pptxfaizanaseem873

5 Reasons cheap WordPress hosting is costing you more | Reversed OutReversed Out Creative

10 Latest Technologies and Their Benefits to End.pptxEphraimOOghodero

Networking_Essentials_version_3.0_-_Module_7.pptxelestirmen

Frontier Unlimited Internet Setup Step-by-Step Guide.pdfInternet Bundle Now

ARTIFICIAL INTELLIGENCE.pptx2565567765676areebaimtiazpmas

AI REPLACING HUMANS /FATHER OF AI/BIRTH OF AIskdav34

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

15- Learn CSS Fundamentals / Color

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

2. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com NAMED COLORS With this code all paragraphs are shown in green. The color property sets the foreground color of an element's text content, and its decorations. p { color: green }

3. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS NAMED  COLORS HSL/HSLA COLORS RGB/RGBA COLORS

4. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com NAMED COLORS Pink Hex RGB Red Hex RGB Orange Hex RGB Yellow Hex RGB White Hex RGB Gray & black Hex RGB Green Hex RGB

5. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com NAMED COLORS Blue Hex RGB Purple Hex RGBCyan Hex RGB Brown Hex RGB

6. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser NAMED COLORS <body> CSS rocks! </body> p { color: red; } Web page title index.html CSS rocks!

7. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS NAMED  COLORS HSL/HSLA COLORS RGB/RGBA COLORS

8. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS p { color: #000000 } Red Green Blue

9. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS # F E D C B A 9 8 7 6 5 4 3 2 1 0 F E D C B A 9 8 7 6 5 4 3 2 1 0 F E D C B A 9 8 7 6 5 4 3 2 1 0 RED GREEN BLUE

10. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS F E D C B A 9 8 7 6 5 4 3 2 1 0 # RED F E D C B A 9 8 7 6 5 4 3 2 1 0 GREEN F E D C B A 9 8 7 6 5 4 3 2 1 0 BLUE = #ff0000

11. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS F E D C B A 9 8 7 6 5 4 3 2 1 0 # RED F E D C B A 9 8 7 6 5 4 3 2 1 0 GREEN F E D C B A 9 8 7 6 5 4 3 2 1 0 BLUE = #00ff00

12. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS F E D C B A 9 8 7 6 5 4 3 2 1 0 # RED F E D C B A 9 8 7 6 5 4 3 2 1 0 GREEN F E D C B A 9 8 7 6 5 4 3 2 1 0 BLUE = #0000ff

13. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS #000000 #000 #ffffff #fff #ff0000 #f00 #00ff00 #0f0 #0000ff #00f

14. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser HEX COLORS <body> CSS rocks! </body> p { color: #f00; } Web page title index.html CSS rocks!

15. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com GAME: GUESS THE COLOR

16. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS NAMED  COLORS HSL/HSLA COLORS RGB/RGBA COLORS

17. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RGB / RGBA COLORS p { color: rgb(0,0,255) } Red Green Blue 255 0 255 0 255 0 With this code all paragraphs are shown in blue.

18. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RGB / RGBA COLORS rgb(0,0,0) rgb(255,255,255) rgb(255,0,0) rgb(0,255,0) rgb(0,0,255)

19. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser RGB / RGBA COLORS <body> CSS rocks! </body> p { color: rgb(0,0,255) } Web page title index.html CSS rocks!

20. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com RGB / RGBA COLORS p { color: rgba(0,0,255,0.5) } Alpha  (transparency) 1 0 With this code all paragraphs are shown in blue with 50% transparency.

21. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser RGB / RGBA COLORS <body> CSS rocks! </body> p { color: rgba(0,0,255,0.5) } Web page title index.html CSS rocks!

22. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HEX COLORS NAMED  COLORS HSL/HSLA COLORS RGB/RGBA COLORS

23. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HSL/HSLA COLORS p { color: hsl(240,100%,50%) } Hue Saturation Lightness 0 360

24. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HSL/HSLA COLORS hsl(0,0%,0%) hsl(0,0%,100%) hsl(0,100%,50%) hsl(120,100%,50%) hsl(240,100%,50%)

25. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser HSL/HSLA COLORS <body> CSS rocks! </body> p { color: hsl(240,100%,50%) } Web page title index.html CSS rocks!

26. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HSL/HSLA COLORS p { color: hsla(240,100%,50%,0.5) } Alpha  (transparency) 1 0 With this code all paragraphs are shown in blue with 50% transparency.

27. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com HTML CSS Browser HSL/HSLA COLORS <body> CSS rocks! </body> p { color: hsla(240,100%,50%,0.5) } Web page title index.html CSS rocks!

28. in a ROCKET TOOLS ~ ~ ~

29. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: CSS PEEPER Inspect a color palette used on a website.

30. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: COLOR CONVERTER

31. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: IMPALETTE Find the most dominant color in an image

32. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: MATERIAL DESIGN PALETTE

33. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: BRANDS IN COLOURS

34. CSS FUNDAMENTALS: Build a strong foundation by solving real cases inarocket.com TOOLS: BRANDCOLORS

35. 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

36. 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

37. IN A ROCKET Learn front-end development at rocket speed CSS CSS FUNDAMENTALS Color

15- Learn CSS Fundamentals / Color

Recommended

More Related Content

Similar to 15- Learn CSS Fundamentals / Color (20)

More from In a Rocket (12)

Recently uploaded (17)

15- Learn CSS Fundamentals / Color