Image for post
Image for post

CSS border property is used to set the border of an HTML element.

The border property is shorthand for three sub-properties that define the style, color, and width of a border.


border: 1px solid red;


border: border-width border-style color;

border-width 👻

Sets the thickness of the border. Defaults to medium if absent.

border-width: thin | medium | thick;


border-width: border-top-width border-right-width border-bottom-width border-right-width;
border-width: 0 4px 8px 12px;

border-style 🙅‍♀️

Sets the style of the border. Defaults to none if absent.

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

color 🎨

Sets the color of the border. …

Image for post
Image for post

Selectors are used to selecting elements in an HTML document, in order to attach (style) properties to them.

The most used CSS selectors are by class and by id, nevertheless, there are many selectors which you can use easily and fairly to add styles into a set of elements.

A. Combinators

B. Attribute Selector

C. Pseudo Selector

D. Pseudo Classes

In this article, I will be talking about different selectors beyond class and id and will be covering Combinators and Attribute Selector.

We will be using the below HTML snippet for all the Attribute Selector:

<p>First Paragraph</p>
<p>Second Paragraph</p>
<span>Third Span</span>
<p>Fourth Paragraph</p>
<li>First Item</li>
<li>Second Item</li>

Image for post
Image for post

Centering an element horizontally and vertically is a very common interview question. Suppose there is a parent element surrounding the child element:

<div class="parent">
<div class="child">hello world</div>

Different ways to align an element to the center of the page:

  1. Using Flex
  2. Using Grid
  3. Using position absolute
  4. Using Table
  5. Using writing-mode
  6. Using Table tag
  7. Using margin auto

1️. Using Flex ⭐️

Flexbox control how items are placed and how empty space is distributed in ways that would have required either magic numbers in CSS for a specific number of elements.

Depending on the flex-direction, we might use justify-content or align-items to adjust as needed.

.parent {
height: 100%;
display: flex;
align-items: center;
justify-content: center;

2️. Using Grid ⭐️

CSS Grid includes pretty much the same alignment options as flexbox, so we can use it on the…


Suprabha Supi

Frontend Developer sharing JS, HTML, CSS, GoLang🔥 Find all on💛

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store