CSS Tutorial
Inheritance In CSS
Inheritance is a process of receiving values of properties by a child element from its parent element. Each element in an HTML document is part of a tree, and every element except the initial <html> element has a parent element that encloses it. Whatever styles are applied to that parent element can be applied to the elements enclosed in it if the properties are inherited.
Not all properties are inherited .
For example , font-size is inherited but border is not inherited.
For a complete list of inherited/non inherited properties we can refer to the link:
https://www.w3.org/TR/CSS22/propidx.html
CSS Units
A CSS unit determines the size of a property we’re setting for an element or its content.
For example, if we wanted to set the property margin of a paragraph, we would give it a specific value.
This value includes the CSS unit.
Example:
p {
margin: 20px;
}
In this case:
margin is the property
20px; is the value, and
px (or “pixel”) is the CSS unit.
Two Categories Of Units
Before we can understand more about CSS units , it’s important to consider the two categories of units:
These are:
absolute
relative
Absolute Units
Units that are “absolute” are the same size regardless of the parent element or device size.
This means a property set with a value that has an absolute unit will always stick to that size when looked at on a phone or on a laptop or on a large screen.
| Absolute | Description |
|---|---|
| px | 1/96 of 1 inch (96px = i inch) |
| pt | 1/72 of 1 inch (72pt = i inch) |
| pc | 12 pt = 1 pc |
| cm | centimeter |
| mm | millimeter(10 mm = 1cm) |
| in | inches |
Example:
h1 {
font-size: 1in;
}
h2 {
font-size: 0.5in;
}
p
{
font-size: 0.2in;
line-height: 0.5in;
}
Relative Units
Relative measurements have no fixed, specific value. Instead, they are calculated in comparison to an inherited value.
Relative units are useful for styling responsive sites because they scale relative to the parent or window size (depending on the unit).
| Relative | Description |
|---|---|
| % | Relative to the parent element’s value for that property |
| em | Relative to the current font-size of the element |
| rem | Relative to the font-size of the root (e.g. the element). “rem” = “root em” |
| ch | Number of characters (1 character is equal to the width of the current font’s 0/zero) |
| ex | Relative to height of the current font’s lowercase “x”. |
Example:
.child {
margin: 10%;
}
We want a child element to have 10% of the parent’s width as a margin so it never fills the whole parent element. If the parent’s size changes, the margin will update too.
Styling Background using CSS
Backgrounds are a core part of CSS. They are one of the fundamentals that we simply need to know. We have five main background properties to use in CSS .
Background-color: specifies the solid color to fill the background with.
The background-color property fills the background with a solid color. br There are 3 ways to set the background-color and they are:
background-color: blue;
background-color: rgb(0, 0, 255);
background-color: #0000ff;
Background-image: calls an image for the background.
The background-image property allows us to specify an image to be displayed in the background.
Syntax:
background-image: url(‘path to image’);
The background-position property sets the starting position of a background image.
Possible values are
left top
left bottom
left center
right center
right top
right bottom
center top
center bottom
center center
left% top%
xpos ypos
inherit
Background-repeat: determines whether the image is tiled.
By default, when we set an image, it is repeated both horizontally and vertically until the entire element is filled.
But sometimes we want an image to be displayed only once or to be tiled in only one direction.
The possible values are:
repeat;
no-repeat;
repeat-x;
repeat-y;
inherit;
Background-attachment: determines whether the image scrolls with the page.
The background-attachment property determines what happens to an image when the user scrolls the page.
The three available values are scroll, fixed and inherit.