Aniket | Blogs

Some Important Properties Of CSS

Font

Fonts overall refer to the presence of text in your web app. There are a couple of things to pay special mind to like font has a shorthand. Do take note that it is entirely expected to see the font shorthand declaration just a single time in the entire CSS document. It is entirely expected to utilize the various properties at different times:

body {
font: italic small-caps bold 20px/1.5 helvetica, arial, sans-serif;
}

font-style: Style of the font. valid values are either italic or normal. Defaults to normal

font-variant: variant of the font. valid values are normal and small caps. Defaults to normal.

font-weight: weight of font. determines if text is bold. valid values are normal, bold, bolder, or 100 - 900

font-size: size of font.

line-height: determines the amount of space above and below the text.

font-family: specifies a list of fonts

Background

body {
background:transparent image-url('image.png') left top no-repeat;
}

background-color: color of the background. Takes #hex value or an rgb value

background-image: url(URI). Takes on the path to your image.

background-repeat: sets how background images are repeated.

background-position:sets the initial position for each background image.

Border

div{
border: 1px solid black;
}

border-width : width of the border.

border-style : style of the border. Usual values are solid and dashed.

border-color : color of the border

Margin and Padding

Margin is the space around an element's border. while padding is the space between an element's border and the element's content.

div{
margin: 20px 10px 20px 10px;
}
- (TOP, Right, Bottom, Left)

Display

div {
display: block;
display: inline-block;
display: inline;
display: none;
}

block means that the element is displayed as a block

inline-block: used to display an element as an inline-level block container.

inline means that the element is displayed inline, inside the current block on the same line.

none means that the element is not displayed at all

Centering a Div

Centering a div was very challanging for in initial days, infact now also I stuck some times.
So Here are some methods which we can use

1. Using FlexBox - css: .div-container{display:flex; justify-content:center; (horizontal center)}

2. Using CSS Transform - css: .div-container{position:relative}
(innerDiv).element{position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}

3. Using Margin:0 auto; - css: .div-container{position:relative; width:100px; height:100px; margin:0 auto;}

#Blogs