BKPanda WT note - padding, border,margin properties

1. Padding properties
padding-top:
padding-right:
padding-bottom:
padding-left:
padding :shorthand
1 value: applies that to all the paddings: ex: padding: 20px;
2 values: applies the first to bottom & top, and the second to left &
right. Ex: padding: 20px 10px;
3 values: applies the first to top, the second to left & right, the third to
bottom.ex: padding: 20px 10px 30px;
4 values: applies the first to top, the second to right, the third to
bottom, the fourth to left.ex: padding: 20px 10px 5px 0px;
So, the order is top-right-bottom-left.
2. Margin properties
margin-top:
margin-right:
margin-bottom:
margin-left:
margin: i.e margin shorthand
1 value: applies that to all Ex margin: 20px;
2 values: applies the first to bottom & top, and the second to left & right ex
margin: 20px 10px;
3 values: applies the first to top, the second to left & right, the third to bottom
ex margin: 20px 10px 30px;
4 values: Aapplies the first to top, the second to right, the third to bottom, the
fourth to left. margin: 20px 10px 5px 0px; So, the order is top-right-bottom-
left.
Accepted Values : Any kind of length unit likee px, em, rem, percentage etc and the
special value auto
 Using auto to center elements: auto tell the browser to select automatically a margin, and
it's most commonly used to center an element in this way: margin: 0 auto; As said above,
using 2 values applies the first to bottom & top, and the second to left & right.
 Using a negative margin: margin is the only property related to sizing that can have a
negative value. Setting a negative top margin makes an element move over elements before
it,and given enough negative value it will move out of the page. i.e negative margins are used
to pull an element closer to its neighboring elements (or even overlap them).
o A negative bottom margin moves up the elements after it.
o A negative right margin makes the content of the element expand beyond its
allowed content size.
o A negative left margin moves the element left over the elements that precede it,
and given enough negative value it will move out of the page.
o Ex
.box1 {
width: 200px;
height: 100px;
background-color: lightblue;
margin-bottom: 30px;
}
.box2 {
width: 200px;
height: 100px;
background-color: lightgreen;
margin-top: -20px; /* Negative margin */
}
3. Border properties
 border-style: lets you choose the style of the border. The options you can use are: dotted,
dashed, solid, double, groove,ridge, inset,outset,none,hidden
 You can set a different style for each edge using the properties
o border-top-style:
o border-right-style:
o border-bottom-style
o border-left-style:
You can use border-style with multiple values to define them, using the usual Top-Right-
Bottom-Left order:
 border-color: used to set boreder color. You can set the color of each edge (Top-Right-
Bottom-Left) separately by using 4 values: border-color: black red yellow blue; or border-
color:red for all borders
 border-width: You can use one of the pre-defined values:thin or medium (the default value)
or thick or or express a value in pixels, em or rem or any other valid length value. Ex: border-
width: 2px; You can set the width of each edge (Top-Right-Bottom-Left) separately by using
4 values: border-width: 2px 1px 2px 1px; or you can use the specific edge properties border-
top-width , border-right-width , borderbottom-width , border-left-width .etc
 shorthand property border: border-width , border-style and border-color can be set
using the shorthand property border .
Example: border: 2px black
 You can also use the edge-specific properties border-top , border-right , border-bottom
,border-left .
Example:
p{
border-left: 2px black solid;
border-right: 3px red dashed;
}
 border-radius is used to create rounded corners. Ex border-radius: 3px;
You can also use the edge-specific properties border-top-left-radius , border-top-right-radius
, border-bottom-left-radius , border-bottom-right-radius . 50%value make rounded box .
 You also have the ability to use images as borders, an ability given to you by border-image
and its specific separate properties:
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
 BKPanda WT note -CSS Colors
In CSS, colors are used to set the foreground (like text, borders) and background (like
backgrounds, gradients, shadows) of elements. CSS provides multiple color formats, and each
has its own use cases.
Color formats
1. Color Keywords (Named Colors)
 CSS defines 147 named colors (like red, blue, green, black, white, etc.).
These are easy to use but limited.
Example:
h1 {
color: red; /* text will be red */
}
div {
background-color: lightblue;
}
Easy to remember but Limited flexibility
2. HEX Colors
 Defined using a hexadecimal code: #RRGGBB
 Each pair represents Red, Green, Blue (00 to FF → 0 to 255 in decimal).
 Formats:
#RRGGBB → 6-digit hex
#RGB → shorthand (e.g., #f00 = #ff0000)
#RRGGBBAA → with alpha (transparency)
#RGBA → shorthand with alpha
Example:
p {
color: #ff5733; /* orange shade */
}
div {
background-color: #0f0; /* shorthand for #00ff00 */
}
3. RGB Colors
rgb(red, green, blue) → each value ranges from 0–255.
rgba(red, green, blue, alpha) → includes transparency.
Example:
h2 {
color: rgb(255, 0, 0); /* red */
}
button {
background-color: rgba(0, 128, 255, 0.6); /* semi-transparent blue
*/
}
Best for fine-grained control Not very intuitive for humans to visualize
4. HSL Colors
 HSL = Hue, Saturation, Lightness
 Hue: angle on color wheel (0–360°, 0 = red, 120 = green, 240 = blue)
 Saturation: intensity (0% = gray, 100% = full color)
 Lightness: brightness (0% = black, 50% = normal, 100% = white)
 With Alpha: hsla(hue, saturation, lightness, alpha)
Example:
h3 {
color: hsl(120, 100%, 50%); /* pure green */
}
div {
background-color: hsla(240, 100%, 50%, 0.4); /* semi-transparent
blue */
}
Easier to adjust shades/lightness than RGB
5. CurrentColor Keyword
Uses the inherited text color for other properties (like border).
Example:
p {
color: purple;
border: 2px solid currentColor; /* border also purple */
}
6. Transparent & Opacity
transparent keyword = fully transparent (same as rgba(0,0,0,0))
Use opacity property (0 to 1) to control element transparency.
Example:
div {
background-color: red;
opacity: 0.5; /* makes entire div semi-transparent */
}
7. System Colors (CSS Level 4, rare)
Colors like CanvasText, ButtonFace, etc., that adapt to the user’s system theme.
Useful for accessibility but not widely used.
8. Gradients (Color Transitions)
 CSS allows creating smooth transitions between colors using gradients.
(Not exactly a color value, but widely used in background-color).
 Gradients aren’t a single color, but a blend of multiple colors that transition smoothly. They
are most commonly used for backgrounds, buttons, overlays, and text effects.
o Linear Gradient Colors transition in a straight line (horizontal, vertical, diagonal, or
custom angle).
Syntax: background: linear-gradient(direction, color1, color2, ...);
Directions: to right → le> → right
to bottom → top → bo?om
Angles (e.g., 45deg
div {
width: 300px;
height: 150px;
background: linear-gradient(to right, red, yellow);
}
This makes a gradient from red (left) to yellow (right).
div {
background: linear-gradient(to right, red, orange, yellow);
}The gradient will: Start with red on the left edge Transition smoothly to orange in the
middle End with yellow on the right edge
div {
background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
} Creates a rainbow effect at 45°.

o Radial Gradient: Colors spread out from a center point (like ripples or circles).
Syntax: background: radial-gradient(shape size at position, color1, color2, ...);
 Shapes: circle (default), ellipse
 Sizes: closest-side, farthest-side, closest-corner, farthest-corner
 Position: at top, at center, at bottom right, etc.
div {
width: 300px;
height: 150px;
background: radial-gradient(circle, red, yellow, green);
} Creates a circle gradient from red (center) → yellow → green (edges).
div {
background: radial-gradient(ellipse at top left, blue, white);
} An ellipse gradient starting at the top-left corner.
 o Conic Gradient: Colors rotate around a central point, like a color wheel or pie chart.
Syntax: background: conic-gradient(from angle at position, color1, color2, ...);
div {
width: 300px;
height: 300px;
background: conic-gradient(red, yellow, green, blue);
border-radius: 50%;
} Creates a circular pie-like gradient (red → yellow → green → blue).

div {
background: conic-gradient(
red 0deg 90deg,
yellow 90deg 180deg,
green 180deg 270deg,
blue 270deg 360deg
);
border-radius: 50%;
} Divided into 4 equal colored slices.

Comparison Table of CSS Color Formats

Format Syntax Example Range/Values Use Case
Named
red, blue, gold 147 predefined keywords Quick styling
Colors
00–FF for R,G,B (+ Web design,
HEX #ff0000, #f00
optional alpha) compact
RGB / rgb(255,0,0)
0–255 for each channel +
Precise control
RGBA alpha
Hue(0–360), Sat/Light(0–
HSL / HSLA hsl(0,100%,50%) Easy tweaking
100%)
border: 2px solid
currentColor currentColor; Uses element’s text color Consistency
transparent background: transparent; Fully transparent Layering effects

Example
<!DOCTYPE html>
<html>
<head>
<style>
.hex { color: #ff6347; } /* tomato */
.rgb { color: rgb(30, 144, 255); } /* dodgerblue */
.rgba { color: rgba(255, 0, 0, 0.6); } /* semi-red */
.hsl { color: hsl(120, 100%, 25%); } /* dark green */
.hsla { color: hsla(60, 100%, 50%, 0.5); } /* semi yellow */
</style>
</head>
<body>
<p class="hex">HEX Color Example</p>
<p class="rgb">RGB Color Example</p>
<p class="rgba">RGBA Color Example</p>
<p class="hsl">HSL Color Example</p>
<p class="hsla">HSLA Color Example</p>
</body>
</html>
 BKPanda WT note -Text Formatting and Fonts
h1 {
color: green;//text color
text-align: center;or right or justify
text-align-last:By default the last line of a paragraph is aligned following the text-align value.
Use this property to change that behavior:text-align-last: right;
text-decoration-line: underline;or overline or line-through;
text-decoration-color: red;
text-decoration-style: solid; or double or dotted etc
text-decoration-thickness: auto; or 5px or 7px or 25% etc
/* or use text-decoration shorthand instead. remember
text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)
ex: text-decoration: underline red double 5px;
*/
text-transform: uppercase; or lowercase; or capitalize;
text-indent: 50px;
letter-spacing: 5px;
line-height: 1.8;// space between lines
word-spacing: 10px;// specify the space between the words in a text
white-space: nowrap;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
// text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit; ,
add a comma , to add more than one shadow shadows
direction: rtl;
}
//T he vertical-align property sets the vertical alignment of an element
Ex: Set the vertical alignment of an image in a text:
img.a {
vertical-align: baseline; or text-top;or text-bottom or super; or sub;
}
The best way to visualize the box model is to open the browser DevTools and check how it is
displayed:
Fonts:
The following are very important properties related to fonts and text in css
1) font-family : select desired font like times, verdana etc.
2) font-size : specify font-size in or em units, which is also known as dynamic font-size.
E.g
font-size: 20px;
font-size: 2.0em; 2.0em means double of parent tag font-size
3) font-weight : something like bold font,light font etc The different allowed values are:
bold,bolder,lighter,normal values ranges from 100 to 900 where 100 means light and 900 means too
much bold.