If you want a rule not to be overridden by a subsequent conflicting rule, include the !important indicator just after the property value and before the semicolon for that rule. For example, to guarantee paragraph text will be blue, use the following rule:
p {color: blue !important;}Even if the browser encounters an inline style later in the document (which should override a document-wide style sheet), like this one:
<p style="color: red">that paragraph will still be blue because the rule with the !important indicator cannot be overridden by other styles in the author's style sheet.
CSS3 provides a variety of units of measurement. They fall into two broad categories: absolute and relative. View table of CSS Units and try them
Absolute units have predefined meanings or real-world equivalents. They are always the same size, regardless of the context in which they appear.
The most popular absolute unit for web design is the pixel, which CSS3 defines as 1/96th of an inch. Pixels are right at home on a pixel-based screen and offer precise control over the size of the text and elements on the page. For a while there, pixels were all we used. Then we realized they are too rigid for pages that need to adapt to a wide variety of screen sizes and user preferences. Relative measurements like rem, em, and % are more appropriate to the fluid nature of the medium.
As long as we are kicking px to the curb, all of the absolute units such as pt, pc, in, mm, and cm - are out because they are irrelevant on screens, although they may be useful for print style sheets. That narrows down your unit choices a bit.
That said, pixels do still have their place in web design for elements that truly should stay the same size regardless of context. Border widths are appropriate in pixels, as are images that have inherent pixel dimensions.
Relative units are the way to go for most web measurements because they are fluid and will adjust according to the viewport. There are a few options: rem, em, and vw/vh.
CSS3 introduced a relative measurement called a rem (for root em) that is based on the font size of the root (html) element, whatever that happens to be. In modern browsers, the default root font size is 16 pixels; therefore, a rem is equivalent to a 16-pixel unit (unless you set it explicitly to another value). An element sized to 10rem would measure 160 pixels.
For the most part, you can use rem units like an absolute measurement in style rules; however, because it is relative, if the base font size changes, so does the size of a rem. If a user changes the base font size to 24 pixels for easier reading from a distance, or if the page is displayed on a device that has a default font size of 24 pixels, that 10rem element becomes 240 pixels. That seems dodgy, but rest assured that it is a feature, not a bug. There are many instances in which you want a layout element to expand should the text size increase. It keeps the page proportional with the font size, which can help maintain optimum line lengths.
Absolute units have predefined meanings or real-world equivalents. With the exception of pixels, they are not appropriate for web pages that appear on screens.
| px | pixel, defined as equal to 1/96 of an inch in CSS3. |
| in | inches. |
| mm | millimeters. |
| cm | centimeters. |
| q | 1/4 millimeter. |
| pt | points (1/72 inch). Points are a unit commonly used in print design. |
| pc | picas (1 pica = 12 points or 1/6 inch). Points are a unit commonly used in print design. |
Relative units are based on the size of something else, such as the default text size or the size of the parent element.
| em | a unit of measurement equal to the current font size. |
| ex | x-height, approximately the height of a lowercase 'x' in the font. |
| rem | root em, equal to the em size of the root element (html). |
| ch | zero width, equal to the width of a zero (0) in the current font and size. |
| vw | viewport width unit, equal to 1/100 of the current viewport (browser window) width. |
| vh | viewport height unit, equal to 1/100 of the current viewport height. |
| vmin | viewport minimum unit, equal to the value of vw or vh, whichever is smaller. |
| vmax | viewport maximum unit, equal to the value of vw or vh, whichever is larger. |
Although not a 'unit,' percentages are another common measurement value for web page elements. Percentages are calculated relative to another value, such as the value of a property applied to the current element or its parent or ancestor.
When used for page layouts, percentage values ensure that page elements stay proportional.
The viewport width (vw) and viewport height (vh) units are relative to the size of the viewport (browser window). A vw is equal to 1/100 the width of the viewport. Similarly, a vh is equal to 1/100 the height of the viewport. Viewport-based units are useful for making images and text elements stay the full width or height of the viewport:
header {
width: 100vw;
height: 100vh; }
You may also specify a percentage of the viewport size, such as 50%:
img {
width: 50vw;
height: 50vh; }Related are the vmin unit (equal to the value of vw or vh, whichever is smaller) and vmax (equal to the value of vw or vh, whichever is larger).
When I design a text document (for print or the web), one of the first things I do is specify a font. In CSS, fonts are specified using a set of font-related properties for typeface, size, weight, font style, and special characters. There are also shortcut properties that let you specify multiple font attributes in a single rule.
The CSS2.1 font-related properties are universally supported:
font-family
font-size - possible values: 12pt, 12px, 1em, 1rem more options
font-weight
font-style
font-variant
font
The CSS Font Module Level 3 adds these properties for more sophisticated font handling, although browser support is inconsistent (2018):
font-stretch
font-variant-ligatures
font-variant-position
font-variant-caps
font-variant-numeric
font-variant-alternates
font-variant-east-asian
font-size-adjust
font-kerning
font-feature-settings
font-language-override
Besides the font properties, you may also employ text properties to format text.
Consider the difference between font and text properties as:
color
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-justify
text-outline
text-overflow
text-shadow
text-transform
text-wrap
vertical-align
word-spacing