CSS NOTES (pageno.
175-183)
CSS Margins
Definition:
The margin property in CSS is used to create space around elements, outside of any defined
borders. It determines how far an element should be kept away from the elements
surrounding it. Margins are transparent and do not have a color or background.
Syntax:
margin: top right bottom left; Different sides example:
margin-top: 10px;
Example: margin-right: 15px;
<p style="margin: 20px;">This paragraph margin-bottom: 20px;
has equal margin on all sides.</p> margin-left: 25px;
CSS Height and Width
Definition:
The height and width properties are used to define the dimensions of an element’s content
area. They determine how tall and wide an element should appear on the webpage.
Syntax: Example:
width: value; <p style="width: 200px; height: 100px;
height: value; background-color: lightblue;">
This box has width 200px and height
100px.
</p>
CSS Outline
Definition:
The outline property draws a line outside the border edge of an element. It is mainly used
for highlighting or indicating focus.
Syntax: Example:
outline: width style color; <p style="outline: 3px dashed red;">This
paragraph has a dashed red outline.</p>
CSS Font-Family
Definition:
The font-family property sets the typeface for text. It can contain one or more font names,
separated by commas.
Syntax: Example:
font-family: "Font Name"; <p style="font-family: 'Times New
Roman', serif;">This text uses Times New
Roman.</p>
CSS Font-Size
Definition:
The font-size property defines the size of the text.
Syntax: Example:
font-size: value; <p style="font-size: 24px;">This text is 24
pixels tall.</p>
CSS Font-Style
Definition:
The font-style property defines the appearance of text — whether it is normal, italic, or
oblique.
Syntax: Example:
font-style: value; <p style="font-style: italic;">This text is
italic.</p>
CSS Font-Weight
Definition:
The font-weight property controls how bold or light the text appears.
Syntax: Example:
font-weight: value; <p style="font-weight: bold;">This text is
bold.</p>
CSS Text-Align
Definition:
The text-align property specifies how text is horizontally aligned within its container.
Syntax: Example:
text-align: value; <p style="text-align: center;">This text is
centered.</p>
CSS Float
Definition:
The float property positions an element to the left or right within its container, allowing text
or inline elements to wrap around it.
Syntax: Example:
float: value; <img src="[Link]" style="float: right;
width: 100px;">
<p>The image will float to the right side
of the text.</p>