Introduction to CSS
Uploaded by
c nagarajuIntroduction to CSS
Uploaded by
c nagarajuCSS Basics
• CSS is a language that describes the style of an HTML document. CSS describes
how HTML elements should be displayed.
• CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
• CSS handles the look and feel part of a web page. Using CSS, you can control
the color of the text, the style of fonts, the spacing between paragraphs, how
columns are sized and laid out, what background images or colors are used,
layout designs, variations in display for different devices and screen sizes as
well as a variety of other effects.
• Advantages of CSS
• CSS saves time − You can write CSS once and then reuse same sheet in multiple
HTML pages. You can define a style for each HTML element and apply it to as many
Web pages as you want.
•Pages load faster − If you are using CSS, you do not need to write HTML tag
attributes every time. Just write one CSS rule of a tag and apply it to all the
occurrences of that tag. So less code means faster download times.
•Easy maintenance − To make a global change, simply change the style, and all
elements in all the web pages will be updated automatically.
•Superior styles to HTML − CSS has a much wider array of attributes than HTML, so
you can give a far better look to your HTML page in comparison to HTML attributes.
•
• Multiple Device Compatibility − Style sheets allow content to be optimized for
more than one type of device. By using the same HTML document, different
versions of a website can be presented for handheld devices such as PDAs and
cell phones or for printing.
•Global web standards − Now HTML attributes are being deprecated and it is
being recommended to use CSS. So its a good idea to start using CSS in all the
HTML pages to make them compatible to future browsers.
•Offline Browsing − CSS can store web applications locally with the help of an
offline catche. Using of this, we can view offline websites. The cache also ensures
faster loading and better overall performance of the website.
•Platform Independence − The Script offer consistent platform independence and
can support latest browsers as well.
CSS SYNTAX RULE
• A CSS rule-set consists of a selector and a declaration block:
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations
separated by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• A CSS declaration always ends with a semicolon, and declaration
blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a red
text color:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Example: element selectors
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center; color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p >Me too!</p>
<p>And me!</p>
</body>
</html>
Id selector
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
The id Selector
•The id selector uses the id attribute of an HTML element to select a specific
element.
•The id of an element should be unique within a page, so the id selector is
used to select one unique element!
•To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
• The style rule below will be applied to the HTML element with id="para1":
The CSS element Selector
<!DOCTYPE html>
<html>
<head>
<style>
P#para1{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Out put
Every paragraph will be affected by the style
Me too!
And me!
• Example:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• #para1 {
• text-align: center; color: red;
•}
• </style>
• </head>
• <body>
• <p id="para1">Hello World!</p>
• <p>This paragraph is not affected by the style.</p>
• </body>
• </html>
• The class Selector
• The class selector selects elements with a specific class attribute.
• To select elements with a specific class, write a period (.) character, followed
by the name of the class.
• In the example below, all HTML elements with class="center" will be red and
center- aligned:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center; color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
The CSS class Selector
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
<!DOCTYPE html>
<html>
<head>
Out put
• Red and center-aligned heading
• Red and center-aligned paragraph.
Selector 1
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• p.center {
• text-align: center;
• color: red;
• }
• </style>
• </head>
• <body>
• <h1 class="center">This heading will not be affected</h1>
• <p class="center">This paragraph will be red and center-aligned.</p>
• </body>
• </html>
Out put
• This heading will not be affected
• This paragraph will be red and center-aligned.
The CSS Universal Selector
The universal selector (*) selects all HTML element on the page.
The CSS rule below will affect every HTML element on the page:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• *{
• text-align: center;
• color: blue;
• }
• </style>
• </head>
• <body>
• <h1>Hello world!</h1>
• <p>Every element on the page will be affected by the style.</p>
• <p id="para1">Me too!</p>
• <p>And me!</p>
• </body>
• </html>
Out put
• Hello world!
• Every element on the page will be affected by the style.
• Me too!
• And me!
Grouping Selectors
If you have elements with the same style definitions, like this:
h1 {
text-align: center; color: red;
}
h2 {
text-align: center; color: red;
}
p{
text-align: center; color: red;
}
• It will be better to group the selectors, to minimize the code. To group
selectors, separate each selector with a comma.
• In the example below we have grouped the selectors from the code above:
h1, h2, p {
text-align: center; color: red;
}
Three Ways to Insert CSS (Types of CSS):
• There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
• Inline Styles
• An inline style may be used to apply a unique style for a single
element.
•To use inline styles, add the style attribute to the relevant element. The style
attribute can contain any CSS property.
• The example below shows how to change the color and the left margin of a
<h1> element:
• Example:
• <!DOCTYPE html>
• <html>
• <body>
• <h1 style="color: blue; margin-left: 30px ;"> This is a heading</h1>
• <p>This is a paragraph.</p>
• </body>
• </html>
• Internal Style Sheet
•An internal style sheet may be used if one single page has a unique style.
•Internal styles are defined within the <style> element, inside the <head> section of
an HTML page:
• Example:
<!DOCTYPE html>
<html>
<head>
<style> body {
background-color: linen;
}
h1 {
color: maroon; margin-left: 40px;
}
</ style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
• External Style Sheet
•With an external style sheet, you can change the look of an entire website by changing just one file!
•Each page must include a reference to the external style sheet file inside the
• <link> element. The <link> element goes inside the <head> section:
Example:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
• An external style sheet can be written in any text editor. The file should not contain any html tags. The style
sheet file must be saved with a .css extension.
• Here is how the "mystyle.css" looks:
• Cascading Order of evaluation
• What style will be used when there is more than one style specified for an
HTML element?
• Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number one has the highest
priority:
• 1. Inline style (inside an HTML element)
• 2. External and internal style sheets (in the head section)
• 3. Browser default
• So, an inline style (inside a specific HTML element) has the highest priority,
which means that it will override a style defined inside the <head> tag, or in
an external style sheet, or a browser default value.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUT PUT
This is a heading
This is a paragraph.
Internal CSS
Example
Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
----------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUT PUT
This is a heading
This is a paragraph.
INLINE CSS
An inline style may be used to apply a unique style for a single
element.
To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
Example
Inline styles are defined within the "style" attribute of the relevant
element:
PROGRAM
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
out put
This is a heading
This is a paragraph.
TIP:
An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly.
Multiple Style
Sheets
If some properties have been defined for the same selector (element) in
different style sheets, the value from the last read style sheet will be used.
h1 {
Assume that an external style sheet has the following style for the <h1>
element:
color: navy;
}
Then, assume that an internal style sheet also has the following style for
the <h1> element:
h1 {
color: orange;
}
Example
If the internal style is defined after the link to the external style sheet, the <h1>
elements will be "orange":
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an
external stylesheet, and internal style</p>
</body>
</html>
OUT PUT
This is a heading
• The style of this document is a combination of an external
stylesheet, and internal style
Example
However, if the internal style is defined before the link to the external style sheet,
the <h1> elements will be "navy":
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet,
and internal style</p>
</body>
</html>
OUT PUT
This is a heading
The style of this document is a combination of an external stylesheet
and internal style
Cascading Order
What style will be used when there is more than one style specified
for an HTML element?
All the styles in a page will "cascade" into a new "virtual" style sheet by the
following rules, where number one has the highest priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style has the highest
priority, and will override external
and internal styles and browser
defaults.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: linen;}
</style>
</head>
<body style="background-color: lavender">
<h1>Multiple Styles Will Cascade into One</h1>
<p>Here, the background color of the page is set with inline CSS, and
also with an internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading
stylesheets work (try removing the inline CSS first, then the internal,
then the external).</p>
</body>
</html>
Out put
Multiple Styles Will Cascade into One
Here, the background color of the page is set with inline CSS, and also with an
internal CSS, and also with an external CSS.
Try experimenting by removing styles to see how the cascading stylesheets
work (try removing the inline CSS first, then the internal, then the external).
CSS Box Model
• All HTMIn CSS, the term "box model" is used when talking about design and layout.
• The CSS box model is essentially a box that wraps around every HTML element. It
consists of: margins, borders, padding, and the actual content. The image below
illustrates the box model:
• Explanation of the different parts:
•Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
• The box model allows us to add a border around elements, and to define
space between elements.
Margin
Border
padding
Border
Content
Margin
• Css:margin property is used to define the space around elements.It is completely
transparent and doesn’t have any background color.
• Top,Bottom,Left and right margin can be changed independently using separate
properties.
• PROPERTIES:
• margin-bottom
• Margin-top
• Margin-left
• Margin-right
• MARGIN-BOTTOM:-the margin bottom property sets the width of the margin on the
bottom of an element.
• MARGIN-TOP:-margin-top css property sets the margin area an the top of an
element.
• Margin_left:-sets the left margin of an element.
• Margin-right:-sets the margin area on the right side of an element.
• Example:-
• Body{
• color:#000000;
• background-color:#ffffff;
P{
margin-top:40px;
margin-bottom:30px;
margin-left:20px;
margin-right:20px;
margin-style:solod;
Border-style:solod;
Border-color:#000000;
}
Padding:-padding property allows you to specify how much space appear between
the control of an element and its border:
Td{padding:5px;}
Padding-bottom
Padding-top
Padding-left
Padding-right
Padding-bottom:-
The padding-bottom property sets the bottom padding of an elements.
Padding-left:-Sets the width of the padding area to the left of an element.
Padding-right:-sets the width of the padding area to the right of an element.
Padding-top:-sets the height of the padding area on the top of an element.
Example:
H2{
padding-top:20px;
padding-right:30px;
padding-bottom:30px;
padding-left:20px;
}
• Dimensions:
• The following property that allows you to control the dimensions of a box.
• Hight:-sets the height of a box
• Width:-sets the height of aline of text
• P.one{
Line_height:16px;}
p-.two{
line_-height:28px;}
Max-height:-sets a maximum height for a box.
max-height:-sets the minimum height for a box.
Div{min-height:50px;
max-height:200px;
Padding:5px
Border:1px solid#000000;}
• Max width:
• sets the maximum width of a box
• Min width:
• sets the minimum width of a box
Div{
min-height:200px;
max-height:500px;
Padding:5px;
Border:1px solid#000000;
}
Positioning
• The position css property sets how an element is positioned in a document.
• The top ,Right, Bottom and left properties determine the final location of
positioned elements.
Bottom:
• When position is set to absolute or fixed,the bottom property specifies the
distance between elements bottom edge and bottom edge of its containing
block.
Dip:
• The dip css property defines a visible postion of an element.
Left:
• The left property affects horizontal position of a positioned element. this
property has no effect on non positioned elements.
Overflaw:
• Overflow property specifies what should happen if content overflows an
element’s box.
• overflow: visible|hidden|scroll|auto| initial|inherit;
Right:
• The right property specifies distance between elements edge and the right
edge of its containing block.
Top:
• The top css property participates in specifying the vertical position of a
positioned element.
Vertical align:
• To vertically align an inline elements box inside its containing line box. For
example: it could be used to vertically position an image in a line of text.
Z-Index:
• Z-index property is used to displace elements on the z-axis . i.e. in or out of
the screen.
Tab
le
• The table layout allows browsers to speed up layout of a table by using first
width properties it come across for the rest of a column rather than having to
load the whole table before rendering it .
• Properties that are commonly used with the table <table>,<td>,and <th>
elements include the following.
Padding
Border
Text and font
Vertical align
Width
Background –color
Background-image
Border-collapse:
• Indicates whether the browser should control the appearance of adjacent
borders that touch each other or whether each cell should maintain its style.
• Properties:
Collapse
Separate
Ex: #table1 {
border-collapse: separate;
}
#table2 {
border-collapse: collapse;
}
Border-spacing:
• Specifies the width that should appear between table cells.
#table {
border-collapse: separate;
border-spacing:15px;
}
Caption side:
• specifies which side of a table that caption should appear on
Possible values:
Top
Right
Bottom
Left
Syntax:
caption{ caption-side:bottom }
Empty cells:
• Specifies whether the border should be shown if a cell is empty.
Values:
Show
Hide
Inherit
Syntax:
table{
background-color:#efefef;
width:350px;
border-collapse: separate;
empty –cells: hide:
}
Program:
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model is essentially a box that wraps around every HTML element. It consists
of: borders, padding, margins, and the actual content.</p>
<div>This text is the content of the box. We have added a 50px padding, 20px margin and
a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
Output
Demonstrating the Box Model
The CSS box model is essentially a box that wraps around
every HTML element. It consists of: borders, padding,
margins, and the actual content.
This text is the content of the box. We have added a 50px
padding, 20px margin and a 15px green border. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
More
cascading
style sheets
CSS Links
• With CSS, links can be styled in many different ways.
• Text Link Text Link Styling Links
Link Button Link Button
• Styling Links
• Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).
Program:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• a{
• color: hotpink;
• }
• </style>
• </head>
• <body>
• <h2>CSS Links</h2>
• <p><b><a href="default.asp" target="_blank">This is a
link</a></b></p>
Output
CSS Links
This is a link
In addition, links can be styled differently depending on what state they are in.
The four links states are:
a:link - a normal, unvisited link
a:visited - a link the user has visited
a:hover - a link when the user mouses over it
a:active - a link the moment it is clicked
Program:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to
be effective.</p>
</body>
</html>
output
CSS Links
This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be
effective.
Note: a:active MUST come after a:hover in the CSS definition in order to be effective.
When setting the style for several link states, there are some order rules:
a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover
Text Decoration
The text-decoration property is mostly used to remove underlines from links:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition
in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to
be effective.</p>
</body>
</html>
Output
• CSS Links
• This is a link
Note: a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.
Note: a:active MUST come after a:hover in the CSS definition
in order to be effective.
Background color
• The background-color property can be used to specify a background
color for links:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
</style>
</head>
<body>
<h2>CSS Links</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in
order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to
be effective.</p>
</body>
</html>
Output
• CSS Links
This is a link
Note: a:active
Note: a:hover MUST
MUST come after
come after a:link and a:hover in the
a:visited in the CSS CSS definition in
definition in order to order to be
be effective. effective.
Link Buttons
This example demonstrates a more advanced example where we
combine several CSS properties to display links as boxes/buttons:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
</style>
</head>
<body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
Output
Link Button
A link styled as a button:
This is a link
Program:
• This example demonstrates how to add other styles to hyperlinks:
• <!DOCTYPE html>
• <html>
• <head>
• <style>
• a.one:link {color:#ff0000;}
• a.one:visited {color:#0000ff;}
• a.one:hover {color:#ffcc00;}
• a.two:link {color:#ff0000;}
• a.two:visited {color:#0000ff;}
• a.two:hover {font-size:150%;}
• a.three:link {color:#ff0000;}
• a.three:visited {color:#0000ff;}
• a.three:hover {background:#66ff66;}
• a.four:link {color:#ff0000;}
•a.four:visited {color:#0000ff;}
•a.four:hover {font-family:monospace;}
•a.five:link {color:#ff0000;text-decoration:none;}
•a.five:visited {color:#0000ff;text-decoration:none;}
•a.five:hover {text-decoration:underline;}
•</style>
•</head>
•<body>
•<p>Mouse over the links and watch them change layout:</p>
•<p><b><a class="one" href="default.asp" target="_blank">This link changes
color</a></b></p>
•<p><b><a class="two" href="default.asp" target="_blank">This link changes font-
size</a></b></p>
•<p><b><a class="three" href="default.asp" target="_blank">This link changes
background-color</a></b></p>
•<p><b><a class="four" href="default.asp" target="_blank">This link changes font-
family</a></b></p>
•<p><b><a class="five" href="default.asp" target="_blank">This link changes text-
decoration</a></b></p>
•</body>
•</html>
Output
• Mouse over the links and watch them change layout:
• This link changes color
• This link changes font-size
• This link changes background-color
• This link changes font-family
• This link changes text-decoration
Program:
Another example of how to create link boxes/buttons:
<!DOCTYPE html>
<html>
<head>
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style>
</head>
<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
Output
This is a link
Program:
This example demonstrates the different types of cursors (can be useful for links):
<!DOCTYPE html>
<html>
<body>
<p>Mouse over the words to change the cursor.</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br>
<span style="cursor:default">default</span><br>
<span style="cursor:e-resize">e-resize</span><br>
<span style="cursor:help">help</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:n-resize">n-resize</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nw-resize">nw-resize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style="cursor:sw-resize">sw-resize</span><br>
<span style="cursor:text">text</span><br>
<span style="cursor:w-resize">w-resize</span><br>
<span style="cursor:wait">wait</span><br>
</body>
</html>
Output
Mouse over the words to change the cursor.
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
pointer
progress
s-resize
se-resize
sw-resize
text
w-resize
wait
CSS Lists
Unordered Lists: Ordered Lists:
oCoffee 1.Coffee
oTea 2.Tea
oCoca cola 3.Coca cola
Coffee i. Coffee
Tea ii. Tea
Coca cola iii. Coca cola
HTML Lists and CSS List Properties
In HTML, there are two main types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers
or letters
The CSS list properties allow you to:
Set different list item markers for ordered lists
Set different list item markers for unordered lists
Set an image as the list item marker
Add background colors to lists and list items
Different List Item Markers
<!DOCTYPE html>
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
Program:
<html>
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
<body>
<h2>Lists</h2>
<p>Example of unordered lists:</p>
<ul class="a">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ul class="b">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>
Output
Example of unordered lists:
o Coffee
o Tea
o Coca Cola
Coffee
Tea
Coca Cola
Example of ordered lists:
I. Coffee
II. Tea
III. Coca Cola
a. Coffee
b. Tea
c. Coca Cola
Position The List Item
Markers
The list-style-position property specifies the position of the list-
item markers (bullet points).
"list-style-position: outside;" means that the bullet points will
beCoffee
outside the list item. The start of each line of a list item will be
- A brewed drink prepared from roasted coffee beans...
aligned vertically. This is default:
Tea
Coca-cola
"list-style-position: inside;" means
that the bullet points will be inside the list item. As it is part of
the list item, it will be part of the text and push the text at the
start:
Coffee - A brewed drink prepared from roasted coffee beans...
Tea
Coca-cola
Program:
<!DOCTYPE html>
<html>
<head>
<style>
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
</style>
</head>
<body>
<h1>The list-style-position Property</h1>
<h2>list-style-position: outside (default):</h2>
<ul class="a">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds
of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water
over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The
drink's name refers to two of its original ingredients, which were kola nuts (a source of
caffeine) and coca leaves</li>
</ul>
<h2>list-style-position: inside:</h2>
<ul class="b">
<li>Coffee - A brewed drink prepared from roasted coffee beans, which are the seeds
of berries from the Coffea plant</li>
<li>Tea - An aromatic beverage commonly prepared by pouring hot or boiling water
over cured leaves of the Camellia sinensis, an evergreen shrub (bush) native to Asia</li>
<li>Coca Cola - A carbonated soft drink produced by The Coca-Cola Company. The
drink's name refers to two of its original ingredients, which were kola nuts (a source of
caffeine) and coca leaves</li>
</ul>
</body>
</html>
Output
The list-style-position Property
list-style-position: outside (default):
Coffee - A brewed drink prepared from roasted coffee beans,
which are the seeds of berries from the Coffea plant
Tea - An aromatic beverage commonly prepared by pouring hot or
boiling water over cured leaves of the Camellia sinensis, an evergreen
shrub (bush) native to Asia
Coca Cola - A carbonated soft drink produced by The Coca-Cola
Company. The drink's name refers to two of its original ingredients,
which were kola nuts (a source of caffeine) and coca leaves
list-style-position: inside:
Coffee - A brewed drink prepared from roasted coffee beans, which
are the seeds of berries from the Coffea plant
evergreen shrub (bush) native to Asia
Coca Cola - A carbonated soft drink produced by The Coca-Cola
Company. The drink's name refers to two of its original ingredients,
which were kola nuts (a source of caffeine) and coca leaves
An Image as The List Item Marker
The list-style-image property specifies an image as the list
item marker:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
<body>
<h2>CSS Lists</h2>
<p>The list-style-image property specifies an image as the list item marker:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Output
CSS Lists
The l i s t - s t y l e - i m a g e property specifies an image as the list
item marker:
Coffee
Tea
Coca Cola
List - Shorthand property
The list-style property is a shorthand property. It is used to set
all the list properties in one declaration:
Program:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style: square inside url("sqpurple.gif");
}
</style>
</head>
<body>
<h2>CSS Lists</h2>
<p>The list-style property is a shorthand property, which is used to set all the
list properties in one declaration.</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body>
</html>
Output
CSS Lists
The list-style property is a shorthand property, which is used to set all the list
properties in one declaration.
Coffee
Tea
Coca Cola
Styling List With Colors
We can also style lists with colors, to make them look a little more interesting.
Anything added to the <ol> or <ul> tag, affects the entire list, while properties added to
the <li> tag will affect the individual list items:
Program:
ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}
Result:
Coffee
Tea
Coca Cola
Coffee
Tea
Coca Cola
Css
tables
The look of an HTML table can be greatly improved with CSS:
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial
Francisco Chang Mexico
Moctezuma
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus
Yoshi Tannamuri Canada
Winecellars
Magazzini Alimentari
Giovanni Rovelli Italy
Riuniti
Program: #ddd;}
<!DOCTYPE html>
<html> #customers th {
<head> padding-top: 12px;
<style> padding-bottom: 12px;
#customers { text-align: left;
font-family: Arial, Helvetica, sans-serif; background-color: #04AA6D;
border-collapse: collapse; color: white;
width: 100%; }
} </style>
</head>
#customers td, #customers th { <body>
border: 1px solid #ddd; <table id="customers">
padding: 8px; <tr>
} <th>Company</th>
#customers tr:nth-child(even){background- <th>Contact</th>
color: #f2f2f2;}
<th>Country</th>
</tr>
#customers tr:hover {background-color:
<td>Alfreds Futterkiste</td> <td>Philip Cramer</td>
<td>Maria Anders</td> <td>Germany</td>
<td>Germany</td> </tr>
</tr> <tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td> <td>Yoshi Tannamuri</td>
<td>Sweden</td> <td>Canada</td>
</tr> </tr>
<tr> <tr>
<td>Centro comercial Moctezuma</td> <td>Magazzini Alimentari Riuniti</td>
<td>Francisco Chang</td> <td>Giovanni Rovelli</td>
<td>Mexico</td> <td>Italy</td>
</tr>
</tr>
<tr>
<td>Ernst Handel</td> <tr>
<td>Roland Mendel</td> <td>North/South</td>
<td>Austria</td> <td>Simon Crowther</td>
</tr> <td>UK</td>
<tr> </tr>
<td>Island Trading</td> <tr>
<td>Helen Bennett</td> <td>Paris spécialités</td>
<td>UK</td>
<td>Marie Bertrand</td> </body>
</tr>
<tr> </html>
<td>Königlich Essen</td> <td>France</td>
</tr>
</table>
Output:
Compan Conta Count
y ct ry
Alfreds Futterkiste Maria Anders Germany
Berglunds Christina
Sweden
snabbköp Berglund
Centro comercial Francisco
Mexico
Moctezuma Chang
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Yoshi
Canada
Winecellars Tannamuri
Magazzini Giovanni
Italy
Table borders
• To specify table borders in Css use the Border
property
• The example below specifies a black border for <table>, <th>,
and <td> elements:
Output
Add a border to a table:
Firstna Lastna
me me
Peter Griffin
Lois Griffin
Program:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th> First name </th>
<th>Last name </th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Output
Add a border to a table:
Firstna Lastna
me me
Peter Griffin
Lois Griffin
Full- width table
•The table above might
seem small in some cases.
If you need a table that
should span the entire
screen (full-width),
add width: 100% to the
<table> element:
Pr0gram:
<!DOCTYPE html> <th>First name</th>
<html> <th>Last name</th>
<head> </tr>
<style> <tr>
table, th, td { <td>Peter</td>
border: 1px solid black; <td>Griffin</td>
} </tr>
<tr>
table { <td>Lois</td>
width: 100%; <td>Griffin</td>
} </tr>
</style> </table>
</head>
</body>
<body>
</html>
<h2>Full-width Table</h2>
<table>
First name
output Last name
Peter Griffin
Lois Griffin
Double
Borders
Notice that the
table in the
examples above
have double
borders. This is
because both the
table and the
<th> and <td>
elements have
To remove double borders, take a
look at the example below.
Collapse Table
Borders
• The border-collapse property sets whether the table borders
should be collapsed into a single border:
Firstname Lastname
Peter Griffin
Lois Griffin
Program:
<!DOCTYPE html>
<html> <tr>
<th>Firstname</th>
<head>
<th>Lastname</th>
<style> </tr>
table, td, th { <tr>
border: 1px solid black; <td>Peter</td>
<td>Griffin</td>
}
</tr>
<tr>
table { <td>Lois</td>
width: 100%; <td>Griffin</td>
</tr>
border-collapse: collapse;
</table>
}
</style> </body>
</head> </html>
<body>
<h2>Let the borders collapse</h2>
Output:
•Let the borders collapse
Firstname Lastname
peter Graffin
Lois Graffin
If you only want a border around the table, only
specify the border property for <table>:
Firstname Lastname
Peter Graffin
Lios Graffin
Program:
<!DOCTYPE html>
<td>Griffin</td>
<html>
</tr>
<head>
<tr>
<style>
<td>Lois</td>
table {
<td>Griffin</td>
width: 100%;
</tr>
border-collapse: collapse;
</table>
border: 1px solid black;
}
</body>
</style>
</html>
</head>
<body>
<h2>Single Border Around The Table</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
Output
Single Border Around The
Table
Firstname Lastname
Peter Graffin
Lios Graffin
CSS Table Size
Table Width and Height
The width and height of a table are
defined by
the width and height properties.
The example below sets the width
of the table to 100%, and the
height of the <th> elements to
<!DOCTYPE html> <p>Set the width of the table,
<html> and the height of the table
<head> header row:</p>
<style>
table, td, th {
border: 1px solid black; <table>
} <tr>
<th>Firstname</th>
table { <th>Lastname</th>
border-collapse: collapse; <th>Savings</th>
width: 100%; </tr>
} <tr>
<td>Peter</td>
th {
height: 70px; <td>Griffin</td>
} <td>$100</td>
</style> </tr>
</head> <tr>
<body> <td>Lois</td>
<h2>The width and height Properties</h2>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
The width and height Properties
Set the width of the table, and the height of the table header row:
To create a table that should only span half the
page, use width: 50%:
Firstna Lastna Saving
me me s
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Program:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<!DOCTYPE html>
<html>
<th>Savings</th>
<head> </tr>
<style> <tr>
table, td, th { <td>Peter</td>
border: 1px solid black; <td>Griffin</td>
} <td>$100</td>
</tr>
table {
<tr>
border-collapse: collapse;
width: 50%;
<td>Lois</td>
} <td>Griffin</td>
<td>$150</td>
th { </tr>
height: 70px; <tr>
} <td>Joe</td>
</style> <td>Swanson</td>
</head>
<td>$300</td>
<body>
</tr>
<h2>The width and height Properties</h2> <tr>
<p>Set the width of the table, and the height of the table header <td>Cleveland</td>
row:</p> <td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
CSS Table Alignment
Horizontal Alignment
• The text-align property sets the
horizontal alignment (like left, right, or
center) of the content in <th> or <td>.
• By default, the content of <th>
elements are center-aligned and the
content of <td> elements are left-
aligned.
• To center-align the content of <td>
elements as well, use text-align: center:
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Program:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<!DOCTYPE html> <th>Savings</th>
<html> </tr>
<head>
<tr>
<style>
table, td, th { <td>Peter</td>
border: 1px solid black; <td>Griffin</td>
} <td>$100</td>
</tr>
table { <tr>
border-collapse: collapse; <td>Lois</td>
width: 100%; <td>Griffin</td>
}
<td>$150</td>
td { </tr>
text-align: center; <tr>
} <td>Joe</td>
</style> <td>Swanson</td>
</head> <td>$300</td>
<body> </tr>
<tr>
<h2>The text-align Property</h2>
<p>This property sets the horizontal alignment (like left, right, or center)
of the content in th or td.</p>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
The text-align Property
This property sets the horizontal alignment (like left, right, or center) of the
content in th or td.
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Firstname Lastname Savings
To left-align the content, force the alignment of <th> elements to be left-
aligned, with the text-align: left property:
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Program: <tr>
<th>Firstname</th>
<!DOCTYPE html>
<th>Lastname</th>
<html> <th>Savings</th>
<head> </tr>
<style> <tr>
table, td, th { <td>Peter</td>
border: 1px solid black; <td>Griffin</td>
} <td>$100</td>
</tr>
table {
border-collapse: collapse;
<tr>
width: 100%; <td>Lois</td>
} <td>Griffin</td>
<td>$150</td>
th { </tr>
text-align: left; <tr>
} <td>Joe</td>
</style>
<td>Swanson</td>
</head>
<body>
<td>$300</td>
</tr>
<h2>The text-align Property</h2> <tr>
<p>This property sets the horizontal alignment (like left, right, or center) of the
content in th or td.</p>
<table>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
The text-align Property
This property sets the horizontal alignment (like left, right, or center) of the content in th
or td.
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
Vertical Alignment
The vertical-align property sets the vertical
alignment (like top, bottom, or middle) of
the content in <th> or <td>.
By default, the vertical alignment of the
content in a table is middle (for both <th>
and <td> elements).
The following example sets the vertical text
Firstname Lastname
alignment to bottom Savings
for <td> elements:
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
<!DOCTYPE html> <tr>
<html> <th>Firstname</th>
<head> <th>Lastname</th>
<style> <th>Savings</th>
table, td, th { </tr>
border: 1px solid black; <tr>
} <td>Peter</td>
<td>Griffin</td>
table { <td>$100</td>
border-collapse: collapse; </tr>
width: 100%; <tr>
} <td>Lois</td>
<td>Griffin</td>
td { <td>$150</td>
height: 50px; </tr>
vertical-align: bottom; <tr>
} <td>Joe</td>
</style> <td>Swanson</td>
</head> <td>$300</td>
<body> </tr>
<h2>The vertical-align Property</h2>
<p>This property sets the vertical alignment (like top, bottom, or
middle) of the content in th or td.</p>
<table>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
The vertical-align Property
This property sets the vertical alignment
(like top, bottom, or middle) of the content in th
or td.
By default, the vertical alignment of the content in a table is middle (for both <th> and
<td> elements).
The following example sets the vertical text alignment to bottom for <td> elements:
Firstnam Lastnam
Savings
e e
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Program: <p>This property sets the vertical
alignment (like top, bottom, or middle) of the
content in th or td.</p>
<!DOCTYPE html> <table>
<html> <tr>
<head> <th>Firstname</th>
<style> <th>Lastname</th>
table, td, th { <th>Savings</th>
border: 1px solid black; </tr>
} <tr>
<td>Peter</td>
table { <td>Griffin</td>
border-collapse: collapse; <td>$100</td>
width: 100%; </tr>
} <tr>
<td>Lois</td>
td { <td>Griffin</td>
height: 50px; <td>$150</td>
vertical-align: bottom; </tr>
} <tr>
</style> <td>Joe</td>
</head> <td>Swanson</td>
<body> <td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
The vertical-align Property
This property sets the vertical alignment (like top,
bottom, or middle) of the content in th or td.
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
CSS Table Style
Table Padding
To control the space between the border and the content in a table,
use the padding property on <td> and <th> elements:
Firstn Lastn Savin
ame ame gs
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
padding: 15px;
}
</style>
Program: </head>
<body>
<h2>The padding Property</h2>
<!DOCTYPE html>
<p>This property adds space between the border
<html> and the content in a table.</p>
<head>
<style> <table>
<tr>
table, td, th {
<th>Firstname</th>
border: 1px solid #ddd; <th>Lastname</th>
text-align: left; <th>Savings</th>
} </tr>
<tr>
<td>Peter</td>
table { <td>Griffin</td>
border-collapse: collapse; <td>$100</td>
width: 100%; </tr>
<tr>
}
<td>Lois</td>
<td>Griffin</td>
th, td { <td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
The padding Property
This property adds space between the
border and the content in a table.
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
Horizontal Dividers
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
border-
Joe Swanson $300
Add the
bottom property to <th>
and <td> for horizontal dividers:
Program:
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<!DOCTYPE html> <th>Savings</th>
<html> </tr>
<head> <tr>
<style> <td>Peter</td>
table { <td>Griffin</td>
border-collapse: collapse; <td>$100</td>
width: 100%; </tr>
} <tr>
<td>Lois</td>
th, td { <td>Griffin</td>
padding: 8px; <td>$150</td>
text-align: left; </tr>
border-bottom: 1px solid #ddd; <tr>
} <td>Joe</td>
</style> <td>Swanson</td>
</head> <td>$300</td>
<body> </tr>
<tr>
<h2>Bordered Table Dividers</h2>
<p>Add the border-bottom property to th and td for horizontal dividers:</p>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Bordered Table Dividers
Output
Add the border-bottom property to th
and td for horizontal dividers:
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
Hoverable Table
Use the :hover selector on <tr> to highlight table
rows on mouse over:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Program:
<!DOCTYPE html> <h2>Hoverable Table</h2>
<html> <p>Move the mouse over the table rows to
<head> see the effect.</p>
<style>
table { <table>
border-collapse: collapse; <tr>
width: 100%; <th>First Name</th>
} <th>Last Name</th>
<th>Points</th>
th, td { </tr>
padding: 8px; <tr>
text-align: left; <td>Peter</td>
border-bottom: 1px solid #ddd; <td>Griffin</td>
} <td>$100</td>
</tr>
tr:hover {background-color:#f5f5f5;} <tr>
</style> <td>Lois</td>
</head> <td>Griffin</td>
<body> <td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
Hoverable Table
Move the mouse over the table rows to see the
effect.
First Name Last Name Points
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
Striped Tables
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
For zebra-striped tables, use the nth-
child() selector and add a background-
color to all even (or odd) table rows:
<p>For zebra-striped tables, use the
Program: nth-child() selector and add a
background-color to all even (or odd)
table rows:</p>
<!DOCTYPE html>
<html> <table>
<head> <tr>
<style> <th>First Name</th>
table { <th>Last Name</th>
border-collapse: collapse; <th>Points</th>
width: 100%; </tr>
} <tr>
<td>Peter</td>
th, td { <td>Griffin</td>
text-align: left; <td>$100</td>
padding: 8px; </tr>
} <tr>
<td>Lois</td>
tr:nth-child(even) {background-color: #f2f2f2;} <td>Griffin</td>
</style> <td>$150</td>
</head> </tr>
<body> <tr>
<td>Joe</td>
<h2>Striped Table</h2> <td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Output
Striped Table
For zebra-striped tables, use the nth-
child() selector and add a background-color
to all even (or odd) table rows:
First Last
Points
Name Name
Peter Griffin $100
Lois Griffin $150
Swans
Joe $300
on
Clevela
Table Color
The example below specifies the background color and text color of
<th> elements:
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
<!DOCTYPE html> <table>
<html> <tr>
<head> <th>Firstname</th>
<style> <th>Lastname</th>
table { <th>Savings</th>
border-collapse: collapse; </tr>
width: 100%; <tr>
} <td>Peter</td>
<td>Griffin</td>
th, td { <td>$100</td>
text-align: left; </tr>
padding: 8px; <tr>
} <td>Lois</td>
<td>Griffin</td>
tr:nth-child(even){background-color: #f2f2f2} <td>$150</td>
</tr>
th { <tr>
background-color: #04AA6D; <td>Joe</td>
color: white; <td>Swanson</td>
} <td>$300</td>
</style> </tr>
</head> <tr>
<body> <td>Cleveland</td>
<td>Brown</td>
<h2>Colored Table Header</h2> <td>$250</td>
</tr>
</table>
</body>
</html>
Colored Table
Output
Header
Firstname Lastname Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250
CSS Outline
An outline is a line drawn outside
the element's border.
Program: <h2>CSS Outline</h2>
<!DOCTYPE html>
<html> <p>This element has a 2px black border
<head> and a green outline with a width of
<style> 10px.</p>
p{
border: 2px solid black; </body>
outline: #4CAF50 solid 10px; </html>
margin: auto;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
CSS Outline
This element has a 2px black border and a green outline with a width of
10px.
CSS Outline Style
The outline-style property specifies the style of the
outline, and can have one of the following values:
dotted - Defines a dotted outline
dashed - Defines a dashed outline
solid - Defines a solid outline
double - Defines a double outline
groove - Defines a 3D grooved outline
ridge - Defines a 3D ridged outline
inset - Defines a 3D inset outline
outset - Defines a 3D outset outline
none - Defines no outline
hidden - Defines a hidden outline
The following example shows the different outline-
style values:
Program:
Demonstration of the different outline
<p class="dotted">A dotted outline</p>
styles:<!DOCTYPE html>
<p class="dashed">A dashed outline</p>
<html> <p class="solid">A solid outline</p>
<head> <p class="double">A double outline</p>
<style> <p class="groove">A groove outline. The effect
p {outline-color:red;} depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect
p.dotted {outline-style: dotted;} depends on the outline-color value.</p>
p.dashed {outline-style: dashed;} <p class="inset">An inset outline. The effect
p.solid {outline-style: solid;} depends on the outline-color value.</p>
p.double {outline-style: double;} <p class="outset">An outset outline. The effect
p.groove {outline-style: groove;} depends on the outline-color value.</p>
p.ridge {outline-style: ridge;}
p.inset {outline-style: inset;} </body>
p.outset {outline-style: outset;} </html>
</style>
</head>
<body>
<h2>The outline-style Property</h2>
Output
The outline-style Property
CSS Outline Color
The outline-color property is used to set the color of the
outline.
The color can be set by:
name - specify a color name, like "red"
HEX - specify a hex value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
invert - performs a color inversion (which ensures that
the outline is visible, regardless of color background)
The following example shows some different outlines
with different colors. Also notice that these elements
also have a thin black border inside the outline:
Program:
<!DOCTYPE html> </style>
<html> </head>
<head> <body>
<style>
p.ex1 { <h2>The outline-color Property</h2>
border: 2px solid black; <p>The outline-color property is used to
outline-style: solid; set the color of the outline.</p>
outline-color: red;
} <p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
p.ex2 { <p class="ex3">An outset grey
border: 2px solid black; outline.</p>
outline-style: dotted;
outline-color: blue; </body>
} </html>
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
Output:
CSS Outline Shorthand
The outline property is a shorthand property for setting the
following individual outline properties:
outline-width
outline-style (required)
outline-color
The outline property is specified as one, two, or three values
from the list above. The order of the values does not matter.
The following example shows some outlines specified with the
shorthand outline property:
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {outline: dashed;}
p.ex2 {outline: dotted red;}
p.ex3 {outline: 5px solid yellow;}
p.ex4 {outline: thick ridge pink;}
</style>
</head>
<body>
<h2>The outline Property</h2>
<p class="ex1">A dashed outline.</p>
<p class="ex2">A dotted red outline.</p>
<p class="ex3">A 5px solid yellow outline.</p>
<p class="ex4">A thick ridge pink outline.</p>
</body>
</html>
Output
The outline Property
The look of an HTML table can be greatly improved with CSS:
Company Contact Country
Alfreds Futterkiste Maria Anders Germany
Berglunds snabbköp Christina Berglund Sweden
Centro comercial Moctezuma Francisco Chang Mexico
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Winecellars Yoshi Tannamuri Canada
Magazzini Alimentari Riuniti Giovanni Rovelli Italy
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Königlich Essen</td>
<td>Philip Cramer</td>
<td>Germany</td>
Program:
<!DOCTYPE html>
<html>
<head>
<style>
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
padding: 8px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #04AA6D;
color: white;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
<tr>
<td>North/South</td>
<td>Simon Crowther</td>
<td>UK</td>
</tr>
<tr>
<td>Paris spécialités</td>
<td>Marie Bertrand</td>
<td>France</td>
</tr>
</table>
</body>
</html>
Output:
Compan Conta Count
y ct ry
Alfreds Futterkiste Maria Anders Germany
Christina
Berglunds snabbköp Sweden
Berglund
Centro comercial Francisco
Mexico
Moctezuma Chang
Ernst Handel Roland Mendel Austria
Island Trading Helen Bennett UK
Königlich Essen Philip Cramer Germany
Laughing Bacchus Yoshi
Canada
Winecellars Tannamuri
Magazzini Giovanni
Italy
Table borders
• To specify table borders in Css use the Border
property
• The example below specifies a black border for <table>, <th>,
and <td> elements:
First name Last name
Peter Griffin
Lois Griffin
Program:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
Full- width table
•The table above might
seem small in some cases.
If you need a table that
should span the entire
screen (full-width),
add width: 100% to the
<table> element:
Pr0gram:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
table {
width: 100%;
}
</style>
</head>
<body>
<h2>Full-width Table</h2>
<table>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
output
First name Last name
Peter Griffin
Lois Griffin
Program:
When an <input type="text"> gets focus, gradually change the
width from 100px to 250px:
Search: <input type="text"
<!DOCTYPE html>
name="search">
<html>
<head>
</body>
<style>
</html>
input[type=text] {
width: 100px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
</style>
</head>
<body>
<h1>The width Property</h1>
<p>Set the width of the input field to 100 pixels. However, when the input
Output
The width
Property
Set the width of the input field to 100 pixels. However, when the
input field gets focus, make it 250 pixels wide:
Search:
Focus
Program:
<!DOCTYPE html>
<html> Last name: <input type="text"
name="lastname">
<head> </form>
<style>
input:focus { </body>
background-color: yellow; </html>
}
</style>
</head>
<body>
<p>Click inside the text fields to see a yellow background:</p>
<form>
First name: <input type="text" name="firstname"><br>
Definition and Usage
The :focus selector is used to select the element that has focus.
Tip: The :focus
selector is allowed on
elements that accept
keyboard events or other
user inputs.
Browser Support
The numbers in the table specifies
the first browser version that fully
Selector
supports the selector.
:focus 4.0 8.0 2.0 3.1 9.6
Selector
:focus 4.0 8.0 2.0 3.1 9.6
Syntax:
•:focus {
css declarations;
}
Program:
When an <input type="text"> gets focus, gradually change the
width from 100px to 250px:
Search: <input type="text"
<!DOCTYPE html>
name="search">
<html>
<head>
</body>
<style>
</html>
input[type=text] {
width: 100px;
-webkit-transition: width .35s ease-in-out;
transition: width .35s ease-in-out;
}
input[type=text]:focus {
width: 250px;
}
</style>
</head>
<body>
<h1>The width Property</h1>
<p>Set the width of the input field to 100 pixels. However, when the input
Output
The width
Property
Set the width of the input field to 100 pixels. However, when the
input field gets focus, make it 250 pixels wide:
Search:
Active
Program:
<!DOCTYPE html>
<html> <p><b>Note:</b> The :active selector styles
the active link.</p>
<head>
<style> </body>
a:active { </html>
background-color: yellow;
}
</style>
</head>
<body>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
Output
w3schools.comwikipedia.org
Note: The :active selector styles the active link.
Definition:
The :active selector is used to select and style the active link.
A link becomes active when you click on it.
Tip: The :active Tip: Use
selector can be the :link selector to
used on all style links to unvisited
elements, not pages,
only links. the :visited selector
to style links to visited
pages, and
the :hover selector to
Note: :active MUST style links when you
come after :hover (if mouse over them.
present) in the CSS
definition in order to
be effective!
Syntax:
:active {
css declarations;
}
Selector
:focus 4.0 7.0 2.0 3.1 9.6
Program:
• Select and style unvisited, visited, hover, and active links:
<!DOCTYPE html> color: red;
<html> }
<head>
<style> /* selected link */
/* unvisited link */ a:active {
a:link { color: yellow;
}
color: green;
</style>
} </head>
<body>
/* visited link */
a:visited { <p>Mouse over and click the link: <a
color: green; href="https://www.w3schools.com">w3scho
} ols.com</a></p>
/* mouse over link */ </body>
</html>
a:hover {
Output:
Mouse over and click the link: w3schools.com
THE CONTENT PROPERTY
THE CONTENT PROPERTY
Miscellaneous properties
You should be aware of a few other
properties ,which will be addressed in the
following sections:
The cursor property
The display property
The visibility property
The cursor property
<!DOCTYPE html>
<html>
<head>
<style>
.alias {cursor: alias;}
.all-scroll {cursor: all-scroll;}
.auto {cursor: auto;}
.cell {cursor: cell;}
.context-menu {cursor: context-menu;}
.col-resize {cursor: col-resize;}
.copy {cursor: copy;}
.crosshair {cursor: crosshair;}
.default {cursor: default;}
.e-resize {cursor: e-resize;}
.ew-resize {cursor: ew-resize;}
.grab {cursor: -webkit-grab; cursor: grab;}
.grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
.help {cursor: help;}
.move {cursor: move;}
.n-resize {cursor: n-resize;}
.ne-resize {cursor: ne-resize;}
.nesw-resize {cursor: nesw-resize;}
.ns-resize {cursor: ns-resize;}
.nw-resize {cursor: nw-resize;}
.nwse-resize {cursor: nwse-resize;}
.no-drop {cursor: no-drop;}
.none {cursor: none;}
.not-allowed {cursor: not-allowed;}
.pointer {cursor: pointer;}
.progress {cursor: progress;}
.row-resize {cursor: row-resize;}
.s-resize {cursor: s-resize;}
.se-resize {cursor: se-resize;}
.sw-resize {cursor: sw-resize;}
.text {cursor: text;}
.url {cursor: url(myBall.cur),auto;}
.w-resize {cursor: w-resize;}
.wait {cursor: wait;}
.zoom-in {cursor: zoom-in;}
.zoom-out {cursor: zoom-out;}
</style>
</head>
<body>
<h1>The cursor Property</h1>
<p>Mouse over the words to change the mouse cursor.</p>
<p class="none">none</p>
<p class="alias">alias</p>
<p class="not-allowed">not-allowed</p>
<p class="all-scroll">all-scroll</p>
<p class="pointer">pointer</p>
<p class="auto">auto</p>
<p class="progress">progress</p>
<p class="cell">cell</p>
<p class="context-menu">context-menu</p> <p class="row-resize">row-resize</p>
<p class="s-resize">s-resize</p>
<p class="col-resize">col-resize</p>
<p class="se-resize">se-resize</p>
<p class="copy">copy</p>
<p class="sw-resize">sw-resize</p>
<p class="crosshair">crosshair</p>
<p class="text">text</p>
<p class="default">default</p>
<p class="url">url</p>
<p class="e-resize">e-resize</p>
<p class="w-resize">w-resize</p>
<p class="ew-resize">ew-resize</p>
<p class="wait">wait</p>
<p class="grab">grab</p>
<p class="zoom-in">zoom-in</p>
<p class="grabbing">grabbing</p>
<p class="zoom-out">zoom-out</p>
<p class="help">help</p>
<p class="move">move</p>
</body>
<p class="n-resize">n-resize</p>
</html>
<p class="ne-resize">ne-resize</p>
<p class="nesw-resize">nesw-resize</p>
<p class="ns-resize">ns-resize</p>
<p class="nw-resize">nw-resize</p>
<p class="nwse-resize">nwse-resize</p>
<p class="no-drop">no-drop</p>
Output
The cursor Property
Mouse over the words to change the mouse cursor.
alias
all-scroll ns-resize
auto nw-resize
cell nwse-resize
context-menu no-drop
col-resize none
copy not-allowed
crosshair pointer
default progress
e-resize row-resize
ew-resize s-resize
grab se-resize
grabbing sw-resize
help text
move url
n-resize w-resize
ne-resize wait
nesw-resize zoom-in
zoom-out
Value Description Play it
alias The cursor indicates an alias of Play it »
something is to be created
all-scroll The cursor indicates that something can Play it »
be scrolled in any direction
auto Default. The browser sets a cursor Play it »
cell The cursor indicates that a cell (or set of
cells) may be selected
context-menu The cursor indicates that a context-menu Play it »
is available
col-resize The cursor indicates that the column can Play it »
be resized horizontally
copy The cursor indicates something is to be Play it »
copied
crosshair The cursor render as a crosshair Play it »
default The default cursor Play it »
e-resize The cursor indicates that an edge of a box
is to be moved right (east)
ew-resize Indicates a bidirectional resize cursor Play it »
grab The cursor indicates that something can Play it »
be grabbed
grabbing The cursor indicates that something can Play it »
be grabbed
help The cursor indicates that help is available Play it »
move The cursor indicates something is to be Play it »
moved
n-resize The cursor indicates that an edge of a box
is to be moved up (north)
ne-resize The cursor indicates that an edge of a Play it »
box is to be moved up and right
(north/east)
nesw-resize Indicates a bidirectional resize cursor Play it »
ns-resize Indicates a bidirectional resize cursor Play it »
nw-resize The cursor indicates that an edge of a box Play it »
is to be moved up and left (north/west)
nwse-resize Indicates a bidirectional resize cursor Play it »
no-drop The cursor indicates that the dragged
item cannot be dropped here
none No cursor is rendered for the element Play it »
not-allowed The cursor indicates that the requested Play it »
action will not be executed
pointer The cursor is a pointer and indicates a Play it »
link
progress The cursor indicates that the program is Play it »
busy (in progress)
row-resize The cursor indicates that the row can be Play it »
resized vertically
s-resize The cursor indicates that an edge of a box
is to be moved down (south)
se-resize The cursor indicates that an edge of a Play it »
box is to be moved down and right
(south/east)
sw-resize The cursor indicates that an edge of a box Play it »
is to be moved down and left
(south/west)
text The cursor indicates text that may be Play it »
selected
URL A comma separated list of URLs to
custom cursors. Note: Always specify a
generic cursor at the end of the list, in
case none of the URL-defined cursors can
be used
The display
<!DOCTYPE html>
<html>
property
<head>
<style>
p {color: red;}
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}
</style>
</head>
<body>
<h1>The display Property</h1>
<h2>display: none:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. <p class="ex1">HELLO WORLD!</p> Vestibulum volutpat tellus diam,
consequat gravida libero rhoncus ut.
</div>
<h2>display: inline:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. <p class="ex2">HELLO WORLD!</p> Vestibulum volutpat tellus diam,
consequat gravida libero rhoncus ut.
</div>
<h2>display: block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. <p class="ex3">HELLO WORLD!</p> Vestibulum volutpat tellus diam,
consequat gravida libero rhoncus ut.
</div>
<h2>display: inline-block:</h2>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at
pulvinar felis blandit. <p class="ex4">HELLO WORLD!</p> Vestibulum volutpat tellus diam,
consequat gravida libero rhoncus ut.
</div>
</body>
</html>
Output
The display Property
display: none:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit. Vestibulum volutpat tellus diam, consequat
gravida libero rhoncus ut.
display: inline:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit. HELLO WORLD!
Vestibulum volutpat tellus diam, consequat gravida libero
rhoncus ut.
display: block:
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Etiam semper diam at erat pulvinar, at pulvinar felis
blandit. HELLO WORLD!
The visibility property
<!DOCTYPE html>
<html> <p>Notice that the hidden heading still
<head> takes up space on the page.</p>
<style>
h2.a { </body>
visibility: visible; </html>
}
h2.b {
visibility: hidden;
}
</style>
</head>
<body>
<h1>The visibility Property</h1>
<h2 class="a">This heading is visible</h2>
<h2 class="b">This heading is hidden</h2>
output
The visibility Property
This heading is
visible
Notice that the hidden heading still takes up space on the
page.
Value Description Play it
visible Default value. The element is visible Play it »
hidden The element is hidden (but still takes up Play it »
space)
collapse Only for table rows (<tr>), row groups Play it »
(<tbody>), columns (<col>), column
groups (<colgroup>). This value removes
a row or column, but it does not affect
the table layout. The space taken up by
the row or column will be available for
other content.If collapse is used on other
elements, it renders as "hidden"
initial Sets this property to its default value. Play it »
Read about initial
inherit Inherits this property from its parent
element. Read about inherit
CSS Layout - The position Property
The position property specifies the type of positioning
method used for an element (static, relative, fixed, absolute or
sticky).
The position Property
The position property specifies the type of positioning method used for an
element.
There are five different position values:
•static
•relative
•fixed
•absolute
•sticky
Elements are then positioned using the top,
bottom, left, and right properties. However,
these properties will not work unless
the position property is set first. They also
work differently depending on the position
value.
position: static;
HTML elements are positioned static by default.
Static positioned elements are not affected by the top,
bottom, left, and right properties.
An element with position: static; is not positioned in
any special way; it is always positioned according to the
normal flow of the page:
This <div> element has position: static;
Here is the CSS that is used:
Program:
<!DOCTYPE html>
<html> </body>
<head> </html>
<style>
div.static {
position: static;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: static;</h2>
<p>An element with position: static; is not positioned in any special way; it is
always positioned according to the normal flow of the page:</p>
<div class="static">
This div element has position: static;
</div>
Output:
position: static;
An element with position:
static; is not positioned in any
special way; it is always
positioned according to the
normal flow of the
This div element has position: static;
page:
position: relative;
An element with position: relative; is
positioned relative to its normal position.
Setting the top, right, bottom, and left properties of a relatively-positioned
element will cause it to be adjusted away from its normal position. Other
This <div>
content will not be adjusted to fitelement
into anyhas
gapposition: relative;
left by the element.
<h2>position: relative;</h2>
Program:
<!DOCTYPE html>
<p>An element with position: relative; is
<html>
positioned relative to its normal position:</p>
<head>
<style>
<div class="relative">
div.relative {
This div element has position: relative;
position: relative;
</div>
left: 30px;
border: 3px solid #73AD21;
</body>
}
</html>
</style>
</head>
<body>
This <div> element has position: fixed;
position: fixed; An element with is
positioned relative to
the viewport, which
means it always stays in
the same place even if
the page is scrolled. The
top, right, bottom, and left
properties are used to
position the element.
A fixed element
Notice the fixed
does not leave a
element in the
gap in the page
lower-right
where it would
corner of the
normally have
page.
been located.
This <div> element has position: fixed;
Program:
<!DOCTYPE html>
<html> <p>An element with position: fixed; is
<head> positioned relative to the viewport, which
means it always stays in the same place even if
<style>
the page is scrolled:</p>
div.fixed {
position: fixed; <div class="fixed">
bottom: 0; This div element has position: fixed;
</div>
right: 0;
width: 300px; </body>
border: 3px solid #73AD21; </html>
}
</style>
</head>
<body>
<h2>position: fixed;</h2>
Output
• position: fixed;
• An element with position: fixed; is positioned relative to the
viewport, which means it always stays in the same place even if the
page is scrolled:
• This div element has position: fixed;
This div element has position: fixed;
position: absolute;
An element with position: absolute; is positioned relative to the nearest
positioned ancestor (instead of positioned relative to the viewport, like fixed).
However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and
moves along with page scrolling.
Note: Absolute
positioned
elements are
removed from the
normal flow, and
can overlap
elements.
}
</style>
</head>
Program: <body>
<h2>position: absolute;</h2>
<!DOCTYPE html>
<html> <p>An element with position: absolute; is positioned
<head> relative to the nearest positioned ancestor (instead of
<style> positioned relative to the viewport, like fixed):</p>
div.relative {
position: relative; <div class="relative">This div element has position:
width: 400px; relative;
height: 200px; <div class="absolute">This div element has position:
border: 3px solid #73AD21;
absolute;</div>
}
</div>
div.absolute {
position: absolute; </body>
top: 80px; </html>
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
Output
• position: absolute;
• An element with position: absolute; is positioned
relative to the nearest positioned ancestor (instead of
positioned relative to the viewport, like fixed):
This div element has position: relative;
This div
element
has
position:
relative;
position: sticky;
• An element with position: sticky; is positioned based on the
user's scroll position.
• A sticky element toggles between relative and fixed,
depending on the scroll position. It is positioned relative until a
given offset position is met in the viewport - then it "sticks" in
place (like position:fixed).
Note: Internet Explorer does not support sticky positioning. Safari
requires a -webkit- prefix (see example below). You must also specify
at least one of top, right, bottom or left for sticky positioning to work.
<div class="sticky">I am sticky!</div>
Program:
<div style="padding-bottom:2000px">
<p>In this example, the sticky element sticks
<!DOCTYPE html>
to the top of the page (top: 0), when you reach
<html> its scroll position.</p>
<head> <p>Scroll back up to remove the
<style> stickyness.</p>
<p>Some text to enable scrolling.. Lorem
div.sticky {
ipsum dolor sit amet, illum definitiones no quo,
position: -webkit-sticky; maluisset concludaturque et eum, altera
position: sticky; fabulas ut quo. Atqui causae gloriatur ius te, id
top: 0; agam omnis evertitur eum. Affert laboramus
repudiandae nec et. Inciderint efficiantur his
padding: 5px;
ad. Eum no molestiae voluptatibus.</p>
background-color: #cae8ca;
border: 2px solid #4CAF50;
}
</style>
</head>
<body>
<p>Try to <b>scroll</b> inside this frame to understand how sticky positioning works.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo,
maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam
omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.</p>
</div>
</body>
</html>
Output
Try to scroll inside this frame to understand how sticky positioning works.
I am sticky!
In this example, the sticky element sticks to the top of the page (top: 0), when you reach its
scroll position.
Scroll back up to remove the stickyness.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset
concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis
evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no
molestiae voluptatibus.
• When elements are positioned, they can overlap other elements.
Overlapping Elements
• The z-index property specifies the stack order of an element (which element
should be placed in front of, or behind, the others).
• An element can have a positive or negative stack order:
Program:
<!DOCTYPE html>
<img src="w3css.gif" width="100"
<html>
height="140">
<head> <p>Because the image has a z-index of -
<style> 1, it will be placed behind the text.</p>
img {
</body>
position: absolute; </html>
left: 0px;
top: 0px;
z-index: -1;
}
</style>
</head>
<body>
An element with greater stack
order is always in front of an
element with a lower stack order.
Note: If two positioned elements overlap without a z-
index specified, the element positioned last in the HTML code will be
shown on top.
Navagation:
• Basic Navigation
• The w3-bar class is a container for displaying HTML elements
horizontally.
• The w3-bar-item class defines the container elements.
• It is a perfect tool for creating navigation bars:
• HomeLink 1Link 2Link 3
Program:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Navigation Bars</h2>
<p>The <strong>w3-bar</strong> class is a container for displaying
HTML elements horizontally.</p>
<p>The <strong>w3-bar-item</strong> class defines the container
elements.</p>
<p>It it a perfect tool for creating navigation bars:</p>
</div>
<div class="w3-bar w3-black">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</body>
</html>
Output
Navigation Bars
The w3-bar class is a container for displaying HTML elements horizontally.
The w3-bar-item class defines the container elements.
It it a perfect tool for creating navigation bars:
Home Link 1 Link 2 Link3
Colored Navigation Bars
Use a w3-color class to add a color
to the navigation bar:
Home Link 1 Link 2 Link 3
Home Link 1 Link 2 Link 3
Home Link 1 Link 2 Link 3
Home Link 1 Link 2 Link 3
Home Link 1 Link 2 Link 3
Program:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Colored Navigation Bars</h2>
<p>Use the w3-color class to add a background color to the navigation bar:</p>
<div class="w3-bar w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<br>
<div class="w3-bar w3-green">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<br>
<div class="w3-bar w3-blue">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<br>
<div class="w3-bar w3-red">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<br>
<div class="w3-bar w3-blue-grey"> </div>
<a href="#" class="w3-bar-item w3-button">Home</a> </body>
<a href="#" class="w3-bar-item w3-button">Link 1</a> </html>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
Bordered Navigation Bars
Use a w3-border or w3-card class to add
borders around the navigation bar, or to
display it as a card:
• Use the w3-border class to add borders around the navigation bar:
• Use the w3-round classes to add rounded borders:
Home Link 1 Link 2 Link 3
• Use the w3-card classes to display the navigation bar as a card:
Home Link 1 Link 2 Link 3
• You can also add a border to each link:
Home Link 1 Link 2 Link 3
Home Link 1 Link 2 Link 3
Program:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Bordered Navigation Bars</h2>
<p>Use the w3-border class to add borders around the navigation bar:</p>
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<p>Use the w3-round classes to add rounded borders:</p>
<div class="w3-bar w3-border w3-round w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<p>Use the w3-card classes to display the navigation bar as a card:</p>
<div class="w3-bar w3-border w3-card-4 w3-light-grey">
<a href="#" class="w3-bar-item w3-button">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<p>You can also add a border to each link:</p>
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-border-right">Home</a>
<a href="#" class="w3-bar-item w3-button w3-border-right">Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-border-right">Link 2</a>
<a href="#" class="w3-bar-item w3-button w3-border-right">Link 3</a>
</div>
</div>
</body>
</html>
Active current link
• Add a w3-color class, or the w3-text-color class to the current link to
let the user know which page he/she is on:
Home Link1 Link2 Link3
Home Link1 Link2 Link3
:Program:
<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container">
<h2>Active/Current Link</h2>
<p>Add a w3-color class, or the w3-text-color class to the current link to let the user know
which page he/she is on:</p>
<div class="w3-bar w3-border w3-light-grey">
<a href="#" class="w3-bar-item w3-button w3-green">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
<br>
<div class="w3-bar w3-border w3-light-grey“>
<a href="#" class="w3-bar-item w3-button w3-text-teal">Home</a>
<a href="#" class="w3-bar-item w3-button">Link 1</a>
<a href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#" class="w3-bar-item w3-button">Link 3</a>
</div>
</div>
</body>
</html>
CSS FORMS
<!DOCTYPE html> cursor: pointer;
<html> }
<style>
input[type=text], select { input[type=submit]:hover {
width: 100%; background-color: #45a049;
padding: 12px 20px; }
margin: 8px 0;
display: inline-block; div {
border: 1px solid #ccc; border-radius: 5px;
border-radius: 4px; background-color: #f2f2f2;
box-sizing: border-box; padding: 20px;
} }
</style>
input[type=submit] { <body>
width: 100%;
background-color: #4CAF50; <h3>Using CSS to style an HTML Form</h3>
color: white;
padding: 14px 20px; <div>
margin: 8px 0; <form action="/action_page.php">
border: none; <label for="fname">First Name</label>
border-radius: 4px;
<input type="text" id="fname" name="firstname" placeholder="Your name..">
<label for="lname">Last Name</label>
<input type="text" id="lname" name="lastname" placeholder="Your last name..">
<label for="country">Country</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
OUTPUT
• Using CSS to style an HTML Form
• FIRST NAME
YOUR NAME
• LAST NAME
• COUNTRY
YOUR LAST NAME
INDIA
SUBMIT
Font
TEXT
