Scribd
Upload
7 views

Advanced CSS Part 2

Advanced CSS pdf

Uploaded by

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

Advanced CSS Part 2

Advanced CSS pdf

Uploaded by

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

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 moved down and sw-resize moved down and left
s-resize moved down (south)
w-resize moved left (west)

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:red;
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: blue;
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\(SmileyFace.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\(SmileyFace.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