w3resource  



 




●Home
 ●CSS Home
 ● What you will learn
 ● CSS basics
 ●CSS values
 ● CSS assigning property values cascading inheritance
 ● CSS Concepts
 ● CSS Selectors
 ● CSS background
 ● CSS padding
 ● CSS margin
 ● CSS border
 ● CSS Font
 ● CSS Media
 ● CSS Color
 ● CSS User interface
 ● CSS text align
  

CSS values

:50:33 (UTC/GMT +8 hours)







 

What are CSS values?


CSS values are set against CSS Properties and reside within CSS declaration block, which is a part of the CSS rule / statement. 
CSS 2.1 allows following types of values : Integers and real numbers, Lengths, Percentages, URLs and URIs, Counters, Colors,
  Strings, Unsupported Values.

Integers and real numbers


Integers and real numbers can be used as CSS values. When used, they can be preceded by + or - sign. Decimal numbers are also allowed.

Used in following CSS properties


z-index, line-height, counter-increment. Also, can be used as CSS color values. 

Lengths


Lengths can be used to specify horizontal or vertical measurements.
When used, <length> is followed immediately by a unit. There should not be any space between the number and the unit. For certain properties, negative lengths are allowed , but for certain properties using a negative value results from an error.

Used in following CSS properties


width, margin, padding, font-size, border-width, text-shadow etc.

Units


There are two types of units are used in CSS, Relative, and Absolute.
Relative units are relative to another length. If used, they can generate a flexible output across various media ( e.g screen, print ). Absolute units are used to specify a fixed width irrespective of viewing area.Useful when the length of the output medium is known. 
Relative units used in CSS: 
Unit Sign used Description
Pixel px Pixel of the viewing device.
em em The relevant font size.
ex ex The 'x-height' of the relevant font.


Absolute units used in CSS
Unit Sign used Description
Inches in 1 inch is equal to 2.54 centimeters and approximately 96 pixels.
centimeters cm Known measurement unit.100 cm = 1 meter.
Millimeters mm Known measurement unit.1000 mm = 1 meter
Points pt 1 pt = 1/72 nd pf an inch.
Picas pc 1 pica = 12 points.

Percentages


Percentages can be used by specifying a number followed by a "%".

Used in following CSS properties


width, margin-top, and font-size etc. 

URLs and URIs 


URLs and URIs are used as CSS values to point to a resource ( e.g. an image ). The format of a URI value is url("URL" ). The quotation around the URL is optional. You can also use Relative URIs.

Used in following CSS properties


background-image, cursor, list-style etc.

Counters 


Counters are denoted by case-sensitive identifiers. The format of using counters are counter(counter-identifier). A common example of a counter identifier is per-num. 

Used in 


Can be used with most if the element selectors and pseudo selectors. 

Colors


A color is either a keyword or a numerical RGB specification or a hexadecimal color value. It is used to set the color of the text written within an HTML document. 

Used in 


color, background, border or box-shadow are common examples of CSS properties that use colors as a value. Most of the CSS properties accept color as values.

Units


Keywords RGB Hexa decimal
aqua 0,25,255 #00ffff
black 0,0,0 #000000
blue 0,0,255 #0000ff
fuchsia 255,0,255 #ff00ff
gray 128,128,128 #808080
green 0,128,0 #008000
lime 0,255,0 #00ff00
maroon 128,0,0 #800000
navy 0,0,128 #000080
olive 128,128,0 #808000
orange 255,165,0 #ffA500
purple 128,0,128 #800080
red 255,0,0 #ff0000
silver 192,192,192 #c0c0c0
teal 0,128,128 #008080
white 255,255,255 #ffffff
yellow 255,255,0 #ffff00


Strings


The format of writing strings may be either with double quotes or with single quotes.

Used in 


Most of the CSS properties accept strings as values. 

Auto


Auto is a value automatically calculated by user agents ( e.g. browsers). 

Used in following CSS properties


overflow, cursor, width, marker-offset, margin, bottom, left, table-layout, z-index.

Inherit


The element which holds an inherit value, acknowledges the value of the same CSS property of its parent element. 

Used in following CSS properties


All of the CSS properties can accept inherit. 

Initial


If used, the corresponding element accepts an initial / default value ( for example the initial value of color CSS property is black).

Used in following CSS properties


Almost all of the CSS properties can accept initial. 

None 


If specified, no value is attached to the corresponding element, often causing the element to be hidden. 

Used in following CSS properties


Almost all of the CSS properties can accept none. 

None 


If specified, no value is attached to the corresponding element, often causing the element to be hidden. 

Used in following CSS properties


border,list-style-type,max-height.

Shape


Used to create a shape for CSS properties like the clip. 

Unsupported


If a value is not supported by a user agent, it ignores that value as an illegal value. 
Previous: CSS comments 
 Next:  Specified, computed, and actual values 
 

Follow us on Facebook  and Twitter for latest update.






●Daily Coding Challenges & Projects
●Weekly Trends and Language Statistics