CSS OUTLINES

Dr. Fareed Ahmed Jokhio

 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.
• NOTE: The outline properties are not supported
by IE 6 or Netscape 7.
 OUTLINES
• 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
• The outline-width property specifies the width
of the outline to be added to the box. Its value
should be a length or one of the values thin,
medium, or thick, just like the border-width
attribute.
• A width of zero pixels means no outline.
• Here is an example:
 The outline-width Property
• <p style="outline-width:thin; outline-style:solid;">
• This text is having thin outline.
• </p>
• <br />
• <p style="outline-width:thick; outline-style:solid;">
• This text is having thick outline.
• </p>
 The outline-width Property
• <br />
• <p style="outline-width:5px; outline-
style:solid;">
• This text is having 5x outline.
• </p>
 The outline-width Property
• It will produce the following result:
 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.
 The outline-style Property
• 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.
 The outline-style Property
• <p style="outline-width:thin; outline-style:solid;">
• This text is having thin solid outline.
• </p>
• <br />
• <p style="outline-width:thick; outline-
style:dashed;">
• This text is having thick dashed outline.
• </p>
 The outline-style Property
• <br />
• <p style="outline-width:5px;outline-
style:dotted;">
• This text is having 5x dotted outline.
• </p>
 The outline-style Property
• It will produce the following result:
 The outline-color Property
• The outline-color property allows you to
specify the color of the outline.
• Its value should either be a color name, a hex
color, or an RGB value, as with the color and
border-color properties.
• Here is an example:
 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 />
• <p style="outline-width:thick; outline-style:dashed;
• outline-color:#009900">
• This text is having thick dashed green outline.
• </p>
 The outline-color Property
• <br />
• <p style="outline-width:5px;outline-
style:dotted;
• outline-color:rgb(13,33,232)">
• This text is having 5x dotted blue outline.
• </p>
 The outline-color Property
• It will produce the following result:
 The Outline Property
• The outline property is a shorthand property
that allows you to specify values for any of the
three properties discussed previously in any
order but in a single statement.
• Here is an example:
 The Outline Property
• <p style="outline:thin solid red;">
• This text is having thin solid red outline.
• </p>
• <br />
• <p style="outline:thick dashed #009900;">
• This text is having thick dashed green outline.
• </p>
 The Outline Property
• <br />
• <p style="outline:5px dotted rgb(13,33,232);">
• This text is having 5x dotted blue outline.
• </p>
 The Outline Property
• It will produce the following result:
 DIMENSION
• You have seen the border that surrounds
every box i.e. element, the padding that can
appear inside each box, and the margin that
can go around them.
• Now, we will learn how to change the
dimensions of boxes.
 DIMENSION
• We have the following properties that allow you to
control the dimensions of a box.
• The height property is used to set the height of a
box.
• The width property is used to set the width of a box.
• The line-height property is used to set the height of
a line of text.
• The max-height property is used to set a maximum
height that a box can be.
 DIMENSION
• The min-height property is used to set the
minimum height that a box can be.
• The max-width property is used to set the
maximum width that a box can be.
• The min-width property is used to set the
minimum width that a box can be.
 The Height and Width Properties
• The height and width properties allow you to
set the height and width for boxes.
• They can take values of a length, a percentage,
or the keyword auto.
• Here is an example:
 The Height and Width Properties
• <p style="width:400px;
height:100px;border:1px solid red;
• padding:5px; margin:10px;">
• This paragraph is 400pixels wide and 100
pixels high
• </p>
 The Height and Width Properties
• It will produce the following result:
 The line-height Property
• The line-height property allows you to
increase the space between lines of text.
• The value of the line-height property can be a
number, a length, or a percentage.
• Here is an example:
 The line-height Property
• <p style="width:400px; height:100px;border:1px
solid red;
• padding:5px; margin:10px;line-height:30px;">
• This paragraph is 400pixels wide and 100 pixels high
• and here line height is 30pixels.This paragraph is
400 pixels
• wide and 100 pixels high and here line height is
30pixels.
• </p>
 The line-height Property
• It will produce the following result:
 The max-height Property
• The max-height property allows you to specify
the maximum height of a box.
• The value of the max-height property can be a
number, a length, or a percentage.
• NOTE: This property does not work in either
Netscape 7 or IE 6.
• Here is an example:
 The max-height Property
• <p style="width:400px; max-height:10px;border:1px solid
red;
• padding:5px; margin:10px;">
• This paragraph is 400px wide and max height is 10px
• This paragraph is 400px wide and max height is 10px
• This paragraph is 400px wide and max height is 10px
• This paragraph is 400px wide and max height is 10px
• </p>
• <img alt="logo" src="/images/css.gif" width="95"
height="84" />
 The max-height Property
• It will produce the following result:
 The min-height Property
• The min-height property allows you to specify
the minimum height of a box.
• The value of the min-height property can be a
number, a length, or a percentage.
• NOTE: This property does not work in either
Netscape 7 or IE 6.
• Here is an example:
 The min-height Property
• <p style="width:400px; min-height:200px;border:1px solid
red;
• padding:5px; margin:10px;">
• This paragraph is 400px wide and min height is 200px
• This paragraph is 400px wide and min height is 200px
• This paragraph is 400px wide and min height is 200px
• This paragraph is 400px wide and min height is 200px
• </p>
• <img alt="logo" src="/images/css.gif" width="95"
height="84" />
The min-height Property
 The max-width Property
• The max-width property allows you to specify
the maximum width of a box.
• The value of the max-width property can be a
number, a length, or a percentage.
• NOTE: This property does not work in either
Netscape 7 or IE 6.
• Here is an example:
 The max-width Property
• <p style="max-width:100px; height:200px;border:1px solid red;
• padding:5px; margin:10px;">
• This paragraph is 200px high and max width is 100px
• This paragraph is 200px high and max width is 100px
• This paragraph is 200px high and max width is 100px
• This paragraph is 200px high and max width is 100px
• This paragraph is 200px high and max width is 100px
• </p>
• <img alt="logo" src="/images/css.gif" width="95"
height="84" />
The max-width Property
 The min-width Property
• The min-width property allows you to specify
the minimum width of a box.
• The value of the min-width property can be a
number, a length, or a percentage.
• NOTE: This property does not work in either
Netscape 7 or IE 6.
• Here is an example:
 The min-width Property
• <p style="min-width:400px; height:100px;border:1px solid red;
• padding:5px; margin:10px;">
• This paragraph is 100px high and min width is 400px
• This paragraph is 100px high and min width is 400px
• This paragraph is 100px high and min width is 400px
• This paragraph is 100px high and min width is 400px
• This paragraph is 100px high and min width is 400px
• </p>
• <img alt="logo" src="/images/css.gif" width="95"
height="84" />
 The min-width Property
• It will produce the following result:
 SCROLLBARS
• There may be a case when an element's
content might be larger than the amount of
space allocated to it.
• For example, the given width and height
properties do not allow enough room to
accommodate the content of the element.
 SCROLLBARS
• CSS provides a property called overflow, which
tells the browser what to do if the box's
contents is larger than the box itself.
• This property can take one of the following
values:
 SCROLLBARS
• visible
– Allows the content to overflow the borders of its
containing element.
• hidden
– The content of the nested element is simply cut
off at the border of the containing element and no
scrollbars is visible.
 SCROLLBARS
• 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.
• auto
– The purpose is the same as scroll, but the scrollbar
will be shown only if the content does overflow.
 SCROLLBARS
• <style type="text/css">
• .scroll{
• display:block;
• border: 1px solid red;
• padding:5px;
• margin-top:5px;
• width:300px;
• height:50px;
• overflow:scroll;
• }
 SCROLLBARS
• .auto{
• display:block;
• border: 1px solid red;
• padding:5px;
• margin-top:5px;
• width:300px;
• height:50px;
• overflow:auto;
• }
• </style>
 SCROLLBARS
• <p>Example of scroll value:</p>
• <div class="scroll">
• I am going to keep lot of content here just to show
• you how scrollbars works if there is an overflow in
• an element box. This provides your horizontal as
well
• as vertical scrollbars.
• </div>
• <br />
 SCROLLBARS
• <p>Example of auto value:</p>
• <div class="auto">
• I am going to keep lot of content here just to show
• you how scrollbars works if there is an overflow in
• an element box. This provides your horizontal as
well
• as vertical scrollbars.
• </div>
 SCROLLBARS
• It will produce the following result:
 VISIBILITY
• A property called visibility allows you to hide
an element from view.
• You can use this property along with
JavaScript to create very complex menu and
very complex webpage layouts.
 VISIBILITY
• You may choose to use the visibility property
to hide error messages that are only displayed
if the user needs to see them, or to hide
answers to a quiz until the user selects an
option.
 VISIBILITY
• NOTE: Remember that the source code will
still contain whatever is in the invisible
paragraph, so you should not use this to hide
sensitive information such as credit card
details or passwords.
• The visibility property can take the values
listed in the table that follows:
 VISIBILITY
• visible
– The box and its contents are shown to the user.
• hidden
– The box and its content are made invisible,
although they still affect the layout of the pag
• collapse
– This is for use only with dynamic table columns
and row effects.
 VISIBILITY
• <p>
• This paragraph should be visible in normal
way.
• </p>
• <p style="visibility:hidden;">
• This paragraph should not be visible.
• </p>
 VISIBILITY
• It will produce the following result:
 POSITIONING
• CSS helps you to position your HTML element.
• You can put any HTML element at whatever
location you like.
• You can specify whether you want the element
positioned relative to its natural position in the
page or absolute based on its parent element.
• Now, we will see all the CSS positioning related
properties with examples.
 Relative Positioning
• Relative positioning changes the position of
the HTML element relative to where it
normally appears. So "left:20" adds 20 pixels
to the element's LEFT position.
 Relative Positioning
• You can use two values top and left along with
the position property to move an HTML
element anywhere in an HTML document.
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.
 Relative Positioning
• NOTE: You can use the bottom or right values
as well in the same way as top and left.
• Here is an example:
• <div style="position:relative;left:80px;top:2px;
• background-color:yellow;">
• This div has relative positioning.
• </div>
 Relative Positioning
• It will produce the following result:
 Absolute Positioning
• An element with position: absolute is
positioned at the specified coordinates
relative to your screen top-left corner.
• You can use two values top and left along with
the position property to move an HTML
element anywhere in HTML document.
 Absolute Positioning
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.
• NOTE: You can use bottom or right values as
well in the same way as top and left.
• Here is an example:
 Absolute Positioning
• <div
style="position:absolute;left:80px;top:20px;
• background-color:yellow;">
• This div has absolute positioning.
• </div>
 Fixed Positioning
• Fixed positioning allows you to fix the position
of an element to a particular spot on the page,
regardless of scrolling.
• Specified coordinates will be relative to the
browser window.
• You can use two values top and left along with
the position property to move an HTML
element anywhere in the HTML document.
 Fixed Positioning
• Move Left - Use a negative value for left.
• Move Right - Use a positive value for left.
• Move Up - Use a negative value for top.
• Move Down - Use a positive value for top.
• NOTE: You can use bottom or right values as
well in the same way as top and left.
• Here is an example:
 Fixed Positioning
• <div style="position:fixed;left:80px;top:20px;
• background-color:yellow;">
• This div has fixed positioning.
• </div>
 LAYERS
• CSS gives you an opportunity to create layers
of various divisions.
• The CSS layers refer to applying the z-index
property to elements that overlap with each
other.
• The z-index property is used along with the
position property to create an effect of layers.
 LAYERS
• You can specify which element should come
on top and which element should come at
bottom.
• A z-index property can help you to create
more complex webpage layouts.
• The following example shows how to create
layers in CSS.
 LAYERS
• <div style="background-color:red;
• width:300px;
• height:100px;
• position:relative;
• top:10px;
• left:80px;
• z-index:2">
• </div>
 LAYERS
• <div style="background-color:yellow;
• width:300px;
• height:100px;
• position:relative;
• top:-60px;
• left:35px;
• z-index:1;">
• </div>
 LAYERS
• <div style="background-color:green;
• width:300px;
• height:100px;
• position:relative;
• top:-220px;
• left:120px;
• z-index:3;">
• </div>
 LAYERS
• It will produce the following result: