DEV Community

boopalan
boopalan

Posted on

CSS part-2

Padding properties

Similarly padding acts like margins but rather than giving the space outside the elements it provides spaces inside the elements.

padding: 10px;
Enter fullscreen mode Exit fullscreen mode

it act all the four sites of the elements

In case if you need to add any one side you can do it by specifying which one side you want to add, it will provide the padding to respective sides you specified

padding-top: 10px;
padding-left: 10px;
padding-bottom: 10px;
padding-right: 10px;
Enter fullscreen mode Exit fullscreen mode

In specific scenario if you need to specify all the four sides with distincts padding it will help

padding: 5px 10px 15px 20px;
Enter fullscreen mode Exit fullscreen mode

If you want to add same padding on the vertically and same padding on the horizontal side this will help to do it

padding: 5px 20px;
Enter fullscreen mode Exit fullscreen mode

With the same horizontal padding you want to adjust the right and left with it

padding 10px 5px 20px;
Enter fullscreen mode Exit fullscreen mode

Border properties

By border property we can adjust the width, color and styles by specifying with your requirements. We have to give the width of the border and style the border with a specific colour.

border: 1px solid green;
Enter fullscreen mode Exit fullscreen mode

There are several styles we can add to the borders that are

  • Double
  • Solid
  • Group
  • Inside
  • Outside
  • dotted

It also provides to do to this three specific properties either any one of these sites we can specify here

border-right-width:2px;
border-right-color:red;
border-right-style:dotted;
Enter fullscreen mode Exit fullscreen mode

In this way we can apply for all the four side with each one side distinct styles

Adding comments to the style sheet

In many cases the code grows much larger. In those scenarios we may sometimes forget why we define them instead of making confusition, comments that will help us identify immediately.

/*
comment
*/
Enter fullscreen mode Exit fullscreen mode

Display property

For responsiveness in media queries we will use display property highly, by changing the display properties we were able to decide which division wanted to display in the screens throughout this property.

! important
This property breaks all the previous class behaviours and implement what we finally defined here

Pseudo class

How to access the first child and Last child

<li>apple</li>
<li>pear</li>
<li>mango</li>
<li>banana</li>
Enter fullscreen mode Exit fullscreen mode

First child
It will select the first child in the list of same elements

li:first-child{
color : red;
}
Enter fullscreen mode Exit fullscreen mode

To select the last child of the

li:last-child {
color: green;
}
Enter fullscreen mode Exit fullscreen mode

Colours

_Hexadecimal _
It contains # at the beginning and followed by six digits of numbers in the base-16.
Syntax look like

#RRGGBB
Enter fullscreen mode Exit fullscreen mode

It ranges from the 00 to FF
If you want to specify the green by using the end of the range in the green palace and make the remaining positions by 00

color: #00ff00;
Enter fullscreen mode Exit fullscreen mode

RGB
Here we will specify the color inside the rgb between the range of 0 to 255,

color: rgb(255,0,0);
Enter fullscreen mode Exit fullscreen mode

Rgba
It is same as the rgb but additionally we will pass the transparency to it

color : rgba (0,0,255, 0.5)
Enter fullscreen mode Exit fullscreen mode

Box shadow
It will help to specify the shadows around the elements

Syntax

box-shadow : horizontal offset vertical offset, blear radius, density spread color;
Enter fullscreen mode Exit fullscreen mode

Mostly not all the bowsers support this box-shadow to support the mozilla and shafari
We have to use this

–webkit-box-shadow: horizontal offset vertical offset, blear radius, density spread color;
–moz-box-shadow: horizontal offset vertical offset, blear radius, density spread color;
Enter fullscreen mode Exit fullscreen mode

Top comments (0)