CSS PADDING:
The padding property is used to specify the padding between an element’s edges and its content. It can be applied to both block and inline elements. Padding can be specified in a number of units (e.g. 20 px) or in a percentage of the width of the containing element.
Start with a standard HTML document, then add the div tags with the style information in them
An element’s padding is the amount of space between the border and the content of the element. Between one and four values are given, where each value is either a length or a percentage. Percentage values refer to the parent element’s width. Negative values are not permitted.
If four values are given, they apply to the top, right, bottom, and left padding, respectively. If one value is given, it applies to all sides. If two or three values are given, the missing values are taken from the opposite side.
The padding property is a shorthand for the padding-top, padding-right, padding-bottom, and padding-left properties.
For example, the following rule sets the top padding to 2em, the right padding to 4em, the bottom padding to 5em, and the left padding to 4em:
BLOCKQUOTE { padding: 2em 4em 5em }
CSS OPACITY:
The CSS opacity property is the first way that might come to your mind to change transparency. But this property can’t come to the rescue all the time, especially when there is a background image with text in it that you want to make transparent. To make an image transparent, you can use the CSS opacity property, as I mentioned above. The basic syntax of the opacity property is shown:
selector {
opacity: value;
}
The opacity setting is applied uniformly across the entire object and the opacity value is defined in terms of digital value less than 1. The lesser opacity value displays the greater opacity. Opacity is not inherited.
CSS FLOAT:
you can float elements to the left or right but only applies to the elements that generate boxes that are not absolutely positioned. Any element that follows the floated element will flow around the floated element on the other side.
The float property may have one of the three values:
- Left
- Right
- None
A floated element is taken out of the normal flow and shifted to the left or right as far as possible in the space available of the containing element. Other elements normally flow around the floated items, unless they are prevented from doing so by their clear property. Elements are floated horizontally, which means that an element can only be floated left or right, not up or down.
CSS COLOR:
The color property defines the text color (foreground color in general) of an element.
For instance, the color property specified in the body selector defines the default text color for the whole page. Let’s try out the following example to see how it works:
body {
color: #ff5722;
}
Colors in CSS are most often specified in the following formats:
- a color keyword – like “red”, “green”, “blue”, “transparent”, etc.
- a HEX value – like “#ff0000”, “#00ff00”, etc.
- an RGB value – like “rgb(255, 0, 0)”
CSS3 has introduced several other color formats such as HSL, HSLA, and RGBA that also support alpha transparency
CSS POSITION :
Positioning elements appropriately on the web pages is a necessity for a good layout design. There are several methods in CSS that you can use for positioning elements.
Static Positioning:
A static-positioned element is always positioned according to the normal flow of the page. HTML elements are positioned static by default. Static-positioned elements are not affected by the Top, Bottom, Left, Right, and z-Index properties.
Relative Positioning:
A relatively positioned element is positioned relative to its normal position. In the relative positioning scheme, the element’s box position is calculated according to the normal flow. Then the box is shifted from this normal position according to the properties Top Or Bottom And/Or Left Or Right
Absolute Positioning:
An absolutely positioned element is positioned relative to the first parent element that has a position other than static. If no such element is found, it will be positioned on a page relative to the ‘top-left’ corner of the browser window. The box’s offsets further can be specified using one or more of the properties Top, Right, Left, and Bottom.
Fixed Positioning:
Fixed positioning is a subcategory of absolute positioning.
The only difference is a fixed-positioned element is fixed with respect to the browser’s viewport and does not move when scrolled.
Absolutely positioned elements are taken out of the normal flow entirely and thus take up no space when placing sibling elements. However, it can overlap other elements depending on the z-index property value. Also, an absolutely positioned element can have margins, and they do not collapse with any other margins.
You Might Also Interested In Reading, CSS: An Introduction To CSS And Their Properties
