DEV Community

boopalan
boopalan

Posted on

CSS

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;
}

Enter fullscreen mode Exit fullscreen mode
  1. 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:
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
}
Enter fullscreen mode Exit fullscreen mode
  1. 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;
}

Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)