Scribd
Upload
97 views3 pages

CSS Layout and Positioning Guide

The document discusses CSS concepts like positioning, display, layout, and responsive design. It provides examples of CSS classes for width, height, padding, margin, background color, text formatting, and positioning elements on the page in a flexible, grid-based, or fixed manner. It also demonstrates CSS classes for responsive design, showing or hiding elements based on screen size.

Uploaded by

surendrakakinada
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
97 views3 pages

CSS Layout and Positioning Guide

The document discusses CSS concepts like positioning, display, layout, and responsive design. It provides examples of CSS classes for width, height, padding, margin, background color, text formatting, and positioning elements on the page in a flexible, grid-based, or fixed manner. It also demonstrates CSS classes for responsive design, showing or hiding elements based on screen size.

Uploaded by

surendrakakinada
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

w-full width

h-10 height
bg-violet-600
rounded-md
my-4 Margin
p-2 Padding

text-lg - text-[50px]

<main class='p-5'>
<h1 class="text-center text-lg text-green-400">Hello World</h1>
<div class="my-4 h-10 w-full bg-violet-200 border-violet-600 border-2
rounded-md p-2">
<p class="text-center font-mono font-extrabold">A Div</p>
</div>
</main>

p-5 meaning padding 5

Layout

FlexBox

Position

Position determines how an HTML element is positioned with in its contained element

Relative-position: which shifts its bit from its normal spot but every thing behaves same

Absolute – which makes the element moves independently

Fixed -- which makes the element stay in the place event we scroll
(Sticky)
Display

->block

->inline

->inline-block

-> none

<main class="p-5">
<h1 class="text-center text-lg text-green-400">Hello World</h1>
<div class="my-4 h-10 w-full rounded-md border-2 border-violet-600 bg-
violet-200 p-2">
<p class="text-center font-mono font-extrabold">A Div</p>
</div>
<div class="fixed top-0 h-10 w-10 bg-red-500"></div>
<div class="flex justify-between">
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
</div>
<div class="grid grid-cols-5 gap-2 mt-3">
<div class="bg-violet-500 h-12"></div>
<div class="bg-violet-500 h-12"></div>
<div class="bg-violet-500 h-12"></div>
<div class="bg-violet-500 h-12"></div>
<div class="bg-violet-500 h-12"></div>
</div>
</main>

<main class="p-5">
<h1 class="text-center text-lg text-green-400">Hello World</h1>
<div class="my-4 h-10 w-full rounded-md border-2 border-violet-600 bg-
violet-200 p-2">
<p class="text-center font-mono font-extrabold">A Div</p>
</div>
<div class="fixed top-0 h-10 w-10 bg-red-500"></div>
<div class="justify-between">
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
<div class="h-16 w-16 rounded-full bg-blue-500"></div>
</div>
<div class="mt-3 grid grid-cols-5 gap-2">
<div class="h-12 bg-violet-500"></div>
<div class="h-12 bg-violet-500"></div>
<div class="h-12 bg-violet-500"></div>
<div class="h-12 bg-violet-500"></div>
<div class="h-12 bg-violet-500"></div>
</div>
<div class="hidden md:block">
<p>I will appear for device resolution > 768 PX;</p>
</div>
<div class="hidden max-md:block">
<p>I will appear for device resolution < 768 PX;</p>
</div>
<button class="focus:ring-blue-300 my-2 rounded-lg bg-blue-500 px-4 py-2
text-white hover:bg-blue-700 focus:outline-none active:bg-blue-800">Click
Me</button>
</main>

You might also like