[go: up one dir, main page]
Scribd
Upload
26 views7 pages

CSS More Propertues

The document explains the CSS box model which describes the layout of elements. It includes margins, borders, padding, and content. It also covers various CSS properties related to borders, outlines, margins, paddings, and pseudo elements.

Uploaded by

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

CSS More Propertues

The document explains the CSS box model which describes the layout of elements. It includes margins, borders, padding, and content. It also covers various CSS properties related to borders, outlines, margins, paddings, and pseudo elements.

Uploaded by

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

CSS Box Model

The CSS box model is essentially a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content.

The box model allows us to place a border around elements and space elements in
relation to other elements.

Explanation of the four different parts:


Margin - Clears an area around the border. The margin does not have a background
color, it is completely transparent

Border - A border that goes around the padding and content. The border is affected
by the background color

Padding - Clears an area around the content. The padding is affected by the
background color of the box

Content - The content of the box, where text and images appear

Example:
<html>
<head>
<style>
div
{
width:220px;
padding:10px;
border:5px solid gray;
margin:0px;
}
</style>
</head>
<body>
<img src="water.gif" width="250" height="250" />
<div>It is Good Background Pic.</div>
</body>
</html>

CSS - Borders
The border properties allow you to specify how the border of the box representing
an element should look. There are three properties of a border you can change

1. The border-color Specifies the color of a border.


2. The border-style Specifies whether a border should be solid, dashed line, double
line, or one of the other possible values.
3. The border-width Specifies the width of a border.

The border-style Property:


The border-style property allows you to select one of the following styles of
border:
none: No border. (Equivalent of border-width:0;)
solid: Border is a single solid line.
dotted: Border is a series of dots.
dashed: Border is a series of short lines.
double: Border is two solid lines.
groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas.
hidden: Same as none, except in terms of border-conflict resolution for table
elements.

Examples:
<p style="border-width:4px; border-style:none;">
This is a border with none width.
</p>
<p style="border-width:4px; border-style:solid;">
This is a solid border.
</p>
<p style="border-width:4px; border-style:dashed;">
This is a dahsed border.
</p>
<p style="border-width:4px; border-style:double;">
This is a double border.
</p>
<p style="border-width:4px; border-style:groove;">
This is a groove border.
</p>
<p style="border-width:4px; border-style:ridge">
This is aridge border.
</p>
<p style="border-width:4px; border-style:inset;">
This is a inset border.
</p>
<p style="border-width:4px; border-style:outset;">
This is a outset border.
</p>
<p style="border-width:4px; border-style:hidden;">
This is a hidden border.
</p>

CSS Outlines
An outline is a line that is drawn around elements (outside the borders) to make
the element "stand out". The outline properties specify the style, color, and width
of an outline.
However, the outline property is different from the border property.

outline Property
Example:
<html>
<head>
<style>
p
{
border:1px solid red;
outline:green dotted thick;
}
</style>
</head>
<body>
<p>Supports the outline properties only</p>
</body>
</html>

outline-color Property
The outline-color property specifies the color of an outline.

Example:
p
{
outline-style:dotted;
outline-color:#00ff00;
}

outline-style Property
The outline-style property specifies the style of an outline.

Example:
p
{
outline-style:dotted;
}

outline-width Property
The outline-width specifies the width of an outline.

Example:
p
{
outline-style:dotted;
outline-width:5px;
}

CSS - Margins:
The margin property defines the space around an HTML element. It is possible to use
negative values to overlap content.

CSS Margin Properties


Property Description
margin A short hand property for setting the margin.
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element

Example:
<html>
<head>
<style type='text/css'>
h5
{
margin:2cm 4cm 3cm 4cm
}
</style>
</head>
<body>
<p>A paragraph with no specified margins.</p>
<h5>A paragraph with specified margins.</h5>
<p>A paragraph with no specified margins.</p>
</body>
</html>

margin-bottom Sets the bottom margin of an element

Example:
<html>
<head>
<style type='text/css'>
h5
{
margin-bottom:2cm;
}
</style>
</head>
<body>
<p>A paragraph with no specified margins.</p>
<h5>A paragraph with specified margins.</h5>
<p>A paragraph with no specified margins.</p>
</body>
</html>

CSS - Paddings
The padding property allows you to specify how much space should appear between the
content of an element and its border:

All CSS Padding Properties


Property Description
padding A shorthand property for setting all the padding
properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element

Example:
<html>
<head>
<style>
h4
{
padding:2cm;
}
h5
{
padding:0.5cm 3cm;
}
</style>
</head>
<body>
<h4>This text has equal padding on each side.</h4>
<h5>This text has a top and bottom padding of 0.5cm</h5>
</body>
</html>

CSS - Cursors:
The cursor property of CSS allows you to specify the type of cursor that should be
displayed to the user.
auto Shape of the cursor depends on the context area it is over.
crosshair A crosshair or plus sign
default An arrow
pointer A pointing hand
move The I bar
e-resize The cursor indicates that an edge of a box is to be moved
ne-resize The cursor indicates that an edge of a box is to be moved up
nw-resize The cursor indicates that an edge of a box is to be moved up
n-resize se-resize moved down and sw-resize moved down and left
s-resize moved down (south)
w-resize moved left (west)
text The I bar
wait An hour glass
help A question mark or balloon

Examples:
<p>Move the mouse over the words to see the cursor change:</p>
<div style="cursor:auto">Auto</div>
<div style="cursor:crosshair">Crosshair</div>
<div style="cursor:default">Default</div>
<div style="cursor:pointer">Pointer</div>
<div style="cursor:move">Move</div>
<div style="cursor:e-resize">e-resize</div>
<div style="cursor:ne-resize">ne-resize</div>
<div style="cursor:nw-resize">nw-resize</div>
<div style="cursor:n-resize">n-resize</div>
<div style="cursor:se-resize">se-resize</div>
<div style="cursor:sw-resize">sw-resize</div>
<div style="cursor:s-resize">s-resize</div>
<div style="cursor:w-resize">w-resize</div>
<div style="cursor:text">text</div>
<div style="cursor:wait">wait</div>
<div style="cursor:help">help</div>

What are Pseudo-Elements?


A CSS pseudo-element is used to style specified parts of an element. Style the
first letter, or line, of an element, Insert content before, or after, the content
of an element.

Syntax
selector::pseudo-element
{
property:value;
}

The ::first-line Pseudo-element


It is used to add a special style to the first line of a text.

Example:
<head>
<style>
p::first-line
{
color: #ff00ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first
line of a text. Some more text. And even more, and more, and more, and more, and
more, and more, and more, and more, and more, and more, and more, and more.</p>
</body>

The ::first-letter Pseudo-element


The ::first-letter pseudo-element is used to add a special style to the first
letter of a text.
Example:
<head>
<style>
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the
first character of a text!</p>
</body>

CSS - The ::before Pseudo-element


The ::before pseudo-element can be used to insert some content before the content
of an element.

Example:
<head>
<style>
h1::before {
content: url(smiley.png);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content before the content of an
element.</p>
</body>

CSS - The ::after Pseudo-element


The ::after pseudo-element can be used to insert some content after the content of
an element.

Example:
<head>
<style>
h1::after {
content: url(smiley.png);
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The ::after pseudo-element inserts content after the content of an element.</p>
</body>

CSS - The ::selection Pseudo-element


The ::selection pseudo-element matches the portion of an element that is selected
by a user.

Example:
<head>
<style>
::-moz-selection { /* Code for Firefox */
color: red;
background: yellow;
}

::selection {
color: red;
background: yellow;
}
</style>
</head>
<body>
<h1>Select some text on this page:</h1>
<p>This is a paragraph.</p>
<div>This is some text in a div element.</div>
</body>

You might also like