Units
it helps to define the properties metrics
px: it is the default, eg10px
vw: it take the whole view width of the screen, eg 100vm
vh: it take the whole view height of the screen, eg 100vh
%: it occupies the defined ration in the screen, or in the parent’s. Eg 50%
Typography:
line-heigth: In a paragraph, it helps to define the hight between the first and second line to the whole paragraph
letter-spacing: helps to spaced add between the two letters,
word-spacing: similarly like the letter-spacing, but it add spaces between the words
text-intent: in news letter, articles we can be able to see the initial intents to the paragraph, that same thing can be done with the help this property in the web page.
*Selectors *
universal selector
it will reset all the default css properties to all the elements in the html tags
* {
padding : 0px;
margin: 0px;
}
- element selector
we can be able to select the html tags directly in the css, and defining all the properties to it will reflected in the pages
eg
body {
margin : 10px;
padding : 5px:
}
- class selector
we will add the class attribute to the html tags and then we select the class in CSS using class selector and define the properties to them
example
select the .para class and add the properties in css
.para {
word-spacing : 20px;
}
-
id selector
it do same as the class selector but instead in a different attribute called id
select the .para class and add the properties in css
#para {
word-spacing : 20px;
}
note class selector want to select in the . Prefix and the id selector want to select in the # prefix
Font properties
font-family : here we can be able to select the font family
font-style: the we can be able to change the style like, italic, bold,
font-size: here we can define the font style in the px or in other units
color: just like the the name of the property it for color, similarly like the units color also have some different units.
Opacity property
it make the opacity property having tags to transparency. We give the value in the 0:1 ratio.
Example
div {
opacity : 0.5 // half transparency
}
Text properties
text-decoration: we can be able to add the decoration for the text like the underscore, overline, line through the text.
Text-transfrom: using the text transform property, we can can the lowers to upper, upper to lowers and more.
Vertical-align: some time there will have some need to add the subscript and super script for the letter, on that scenarios we can use it
List properties
list-style: it helps to specify the list look like to a circle, disc, square, and more
list-style-image: instead using the build in styles we can be able to set an custom image to act as an list style.
List-style-type: some time we have some need to use the different list style, instead of defaults on those scenario it helps to use the roman, alpha, greek, latin, this property supports for the both upper and the lowers cases fort this list style types.
Margin property
margin: 10 px; it adds 10 px margin all the sides
instead if you want to define any one side, you can be able to specify which one particular side only want to add margin
margin-top
margin-left
margin-right
margin-bottom
if you in the situation of adding both the right and left where same width, and the top and bottom where same width, you can be able to use it
margin : vertical px horizontal px
otherwise both the top and bottom(horizontally) same size and the left and right are in the different size we can use this
margin top px, horizontal px right px
Top comments (0)