Scribd
Upload
3 views

CSS2

The document provides an overview of various CSS properties including measurement units, colors, backgrounds, fonts, margins, paddings, borders, outlines, tables, cursors, and scrollbars. It details how to use these properties with examples of HTML code for practical understanding. Each section outlines specific properties and their functionalities to style web elements effectively.

Uploaded by

Sri Guru Harkrishan Private I.T.I
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

CSS2

The document provides an overview of various CSS properties including measurement units, colors, backgrounds, fonts, margins, paddings, borders, outlines, tables, cursors, and scrollbars. It details how to use these properties with examples of HTML code for practical understanding. Each section outlines specific properties and their functionalities to style web elements effectively.

Uploaded by

Sri Guru Harkrishan Private I.T.I
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

CSS ─ MEASUREMENT UNITS

CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so
on, as well as relative measures such as percentages and em units.
CSS ─ COLORS
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element
(i.e., its text) or for the background of the element. They can also be used to affect the color of borders and other
decorative effects.

CSS - Backgrounds

the following background properties of an element −


 The background-color property is used to set the background color of an element.
 The background-image property is used to set the background image of an element.
 The background-repeat property is used to control the repetition of an image in the
background.
 The background-position property is used to control the position of an image in the
background.
 The background-attachment property is used to control the scrolling of an image in the
background.
 The background property is used as a shorthand to specify a number of other background
properties.
Background Color
<html>
<head>
</head>

<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>
Background Image

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>
<html>

CSS - Fonts

You can set following font properties of an element −


 The font-family property is used to change the face of a font.
 The font-style property is used to make a font italic or oblique.
 The font-variant property is used to create a small-caps effect.
 The font-weight property is used to increase or decrease how bold or light a font appears.
 The font-size property is used to increase or decrease the size of a font.
 The font property is used as shorthand to specify a number of other font properties.

Font Family

<html>
<head>
</head>

<body>
<p style = "font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default serif font depending on which font you have at your system.
</p>
</body>
</html>
Font Style

<html>
<head>
</head>

<body>
<p style = "font-style:italic;">
This text will be rendered in italic style
</p>
</body>
</html>

Font Weight
<html>
<head>
</head>

<body>
<p style = "font-weight:bold;">
This font is bold.
</p>

<p style = "font-weight:bolder;">


This font is bolder.
</p>

<p style = "font-weight:500;">


This font is 500 weight.
</p>
</body>
</html>

Font Size
<html>
<head>
</head>

<body>
<p style = "font-size:20px;">
This font size is 20 pixels
</p>

<p style = "font-size:small;">


This font size is small
</p>

<p style = "font-size:large;">


This font size is large
</p>
</body>
</html>

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

the following properties to set an element margin.


 The margin specifies a shorthand property for setting the margin properties in one
declaration.
 The margin-bottom specifies the bottom margin of an element.
 The margin-top specifies the top margin of an element.
 The margin-left specifies the left margin of an element.
 The margin-right specifies the right margin of an element.

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

The following CSS properties can be used to control lists. You can also set different values
for the padding on each side of the box using the following properties −
 The padding-bottom specifies the bottom padding of an element.
 The padding-top specifies the top padding of an element.
 The padding-left specifies the left padding of an element.
 The padding-right specifies the right padding of an element.
 The padding serves as shorthand for the preceding properties.

The padding-bottom Property

<html>
<head>
</head>

<body>
<p style = "padding-bottom: 15px; border:1px solid black;">
This is a paragraph with a specified bottom padding
</p>

<p style = "padding-bottom: 5%; border:1px solid black;">


This is another paragraph with a specified bottom padding in percent
</p>
</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 −
 The border-color specifies the color of a border.
 The border-style specifies whether a border should be solid, dashed line, double
line, or one of the other possible values.
 The border-width specifies the width of a border.

The border-color Property


The border-color property allows you to change the color of the border surrounding an
element.
 border-bottom-color changes the color of bottom border.
 border-top-color changes the color of top border.
 border-left-color changes the color of left border.
 border-right-color changes the color of right border.

<html>
<head>
<style type = "text/css">
p.example1 {
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2 {
border:1px solid;
border-color:#009900; /* Green */
}
</style>
</head>

<body>
<p class = "example1">
This example is showing all borders in different colors.
</p>

<p class = "example2">


This example is showing all borders in green color only.
</p>
</body>
</html>
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.

<body>
<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 dashed border.

The border-width Property


The border-width property allows you to set the width of an element borders. The value of
this property could be either a length in px, pt or cm or it should be set to thin, medium or
thick.
You can individually change the width of the bottom, top, left, and right borders of an element
using the following properties −
 border-bottom-width changes the width of bottom border.
 border-top-width changes the width of top border.
 border-left-width changes the width of left border.
 border-right-width changes the width of right border.

CSS - Outlines
Outlines are very similar to borders, but there are few major differences as well −
 An outline does not take up space.
 Outlines do not have to be rectangular.
 Outline is always the same on all sides; you cannot specify different values for
different sides of an element.

You can set the following outline properties using CSS.


 The outline-width property is used to set the width of the outline.
 The outline-style property is used to set the line style for the outline.
 The outline-color property is used to set the color of the outline.
 The outline property is used to set all the above three properties in a single
statement.

The outline-width Property

<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin outline.
</p>
<br />

The outline-style Property


The outline-style property specifies the style for the line (solid, dotted, or dashed) that goes
around an element. It can take one of the following values −
 none − No border. (Equivalent of outline-width:0;)
 solid − Outline is a single solid line.
 dotted − Outline is a series of dots.
 dashed − Outline is a series of short lines.
 double − Outline is two solid lines.
 groove − Outline looks as though it is carved into the page.
 ridge − Outline looks the opposite of groove.
 inset − Outline makes the box look like it is embedded in the page.
 outset − Outline makes the box look like it is coming out of the canvas.
 hidden − Same as none.

<body>
<p style = "outline-width:thin; outline-style:solid;">
This text is having thin solid outline.
</p>
<br />

The outline-color Property

<p style = "outline-width:thin; outline-style:solid;outline-color:red">


This text is having thin solid red outline.
</p>
<br />
CSS - Tables

You can set following properties of a table −


 The border-collapse specifies whether the browser should control the appearance
of the adjacent borders that touch each other or whether each cell should maintain its
style.
 The border-spacing specifies the width that should appear between table cells.
 The caption-side captions are presented in the <caption> element. By default, these
are rendered above the table in the document. You use the caption-side property to
control the placement of the table caption.
 The empty-cells specifies whether the border should be shown if a cell is empty.
 The table-layout allows browsers to speed up layout of a table by using the first width
properties it comes across for the rest of a column rather than having to load the
whole table before rendering it.

CSS - Cursors
The cursor property of CSS allows you to specify the type of cursor that should be displayed to the
user.

The following table shows the possible values for the cursor property −

Sr.No. Value & Description

1
auto
Shape of the cursor depends on the context area it is over. For example an I over text,
hand over a link, and so on...

2
crosshair
A crosshair or plus sign

3
default
An arrow

4
pointer
A pointing hand (in IE 4 this value is hand)

5
move
The I bar

6
e-resize
The cursor indicates that an edge of a box is to be moved right (east)
7
ne-resize
The cursor indicates that an edge of a box is to be moved up and right (north/east)

8
nw-resize
The cursor indicates that an edge of a box is to be moved up and left (north/west)

9
n-resize
The cursor indicates that an edge of a box is to be moved up (north)

10
se-resize
The cursor indicates that an edge of a box is to be moved down and right (south/east)

11
sw-resize
The cursor indicates that an edge of a box is to be moved down and left (south/west)

12
s-resize
The cursor indicates that an edge of a box is to be moved down (south)

13
w-resize
The cursor indicates that an edge of a box is to be moved left (west)

14
text
The I bar

15
wait
An hour glass

16
help
A question mark or balloon, ideal for use over help buttons

17
<url>
The source of a cursor image file

<html>
<head>
</head>
<body>
<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>
</body>
</html>

CSS - Scrollbars
This property can take one of the following values −

Sr.No. Value & Description

1
visible
Allows the content to overflow the borders of its containing element.

2
hidden
The content of the nested element is simply cut off at the border of the
containing element and no scrollbars is visible.

3
scroll
The size of the containing element does not change, but the scrollbars
are added to allow the user to scroll to see the content.

4
auto
The purpose is the same as scroll, but the scrollbar will be shown only
if the content does overflow.

You might also like