Scribd
Upload
68 views

Css Color Use Module

The document discusses CSS colors and units. It explains that CSS uses color values to specify colors for elements, backgrounds, borders, and effects. Color values can be specified in different formats, including hexadecimal codes, RGB values, RGBA values, HSL values, color names, and RGB percentages. The document also discusses CSS units like pixels, ems, and percentages that are used to set lengths, paddings, margins, and align elements. Absolute units like pixels will appear as a fixed size, while relative units scale between rendering mediums.

Uploaded by

Jared Patani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
68 views

Css Color Use Module

The document discusses CSS colors and units. It explains that CSS uses color values to specify colors for elements, backgrounds, borders, and effects. Color values can be specified in different formats, including hexadecimal codes, RGB values, RGBA values, HSL values, color names, and RGB percentages. The document also discusses CSS units like pixels, ems, and percentages that are used to set lengths, paddings, margins, and align elements. Absolute units like pixels will appear as a fixed size, while relative units scale between rendering mediums.

Uploaded by

Jared Patani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 13

CSS COLORS

Learning Objectives
At the end of this lesson, you will be able to understand the different
CSS measurement units, use comments to explain codes and identify
the different color values to specify a color.

CSS COLORS 2
CSS UNITS

One of the things you will use every day in CSS are units. They are
used to set lengths, paddings, margins, align elements and so on.

Things like px, em, rem, or percentages.

01/30/2023 PRESENTATION TITLE 3


Absolute and
Relative Lengths
Two types of Length units
Absolute Lengths
The absolute length units are fixed and a length expressed in any
of these will appear as exactly that size.

Pixels
The most widely used
measurement unit.

01/30/2023 https://www.w3schools.com/cssref/css_units.php 5
Relative Lengths
Relative length units specify a length relative to another length
property. Relative length units scale better between Adifferent
browser’s default
font-size is 16px.
rendering medium.

01/30/2023 https://www.w3schools.com/cssref/css_units.php 6
CSS COMMENTS
Comments are used to explain the code and may help when you edit
the source code at a later date. Comments are ignored by browsers.

A CSS comment is placed inside the <style> element, and starts with /*
and ends with */:

Example

/* This is a single-line comment */

p { color: red; }
01/30/2023 PRESENTATION TITLE 7
Pre-Test: Identify the Hexadecimal Code of the given CSS
Colors. Choose your answer on the box.

#FFFF00
#FF0000 #00FF00
#00FF00
#FFA500
#FFFF00 #0000FF
#FF0000
#FFA500 #0000FF

01/30/2023 PRESENTATION TITLE 8


CSS COLORS

•CSS uses color values to specify a color. Typically, these are used to
set a color either for the foreground of an element or else for the
background of the element. They can also be used to affect the color
of borders and other decorative effects.

01/30/2023 PRESENTATION TITLE 9


You can specify your color values in various formats. Following table
lists all the possible formats

01/30/2023 PRESENTATION TITLE 10


Click icon to add picture Click icon to add picture

Click icon to add picture Click icon to add picture

01/30/2023 PRESENTATION TITLE 11


Click icon to add picture Click icon to add picture

Click icon to add picture Click icon to add picture

01/30/2023 PRESENTATION TITLE 12


Click icon to add picture Click icon to add picture

Click icon to add picture Click icon to add picture

01/30/2023 PRESENTATION TITLE 13

You might also like