Lecture 18 - CSS INCLUSION
Uploaded by
Tanveer Ahmed HakroLecture 18 - CSS INCLUSION
Uploaded by
Tanveer Ahmed HakroCSS INCLUSION
Dr. Fareed Ahmed Jokhio
CSS INCLUSION
• There are four ways to associate styles with
your HTML document.
• Most commonly used methods are inline CSS
and External CSS.
Embedded CSS -The <style> Element
• You can put your CSS rules into an HTML
document using the <style> element.
• This tag is placed inside the <head>...</head>
tags.
• Rules defined using this syntax will be applied
to all the elements available in the document.
• Here is the generic syntax:
Embedded CSS -The <style> Element
• <head>
• <style type="text/css" media="...">
• Style Rules
• ............
• </style>
• </head>
Embedded CSS -The <style> Element
• Attributes associated with <style> elements are:
• Attribute
– type
• Value
– text/css
• Description
– Specifies the style sheet language as a content-type
(MIME type).
– This is a required attribute.
Embedded CSS -The <style> Element
• Attribute – aural
– media – all
• Value • Description
– screen – Specifies the device, the
– tty document will be
displayed on.
– tv
– Default value is all.
– projection
– This is an optional
– handheld
attribute.
– print
– braille
Embedded CSS -The <style> Element
• Following is an example of embed CSS based on the
above syntax:
• <head>
• <style type="text/css" media="all">
• h1{
• color: #36C;
• }
• </style>
• </head>
Inline CSS –The style Attribute
• You can use style attribute of any HTML
element to define style rules.
• These rules will be applied to that element
only.
• Here is the generic syntax:
• <element style="...style rules....">
Inline CSS –The style Attribute
• Attribute
– style
• Value
– style rules
• Description
– The value of style attribute is a combination of
style declarations separated by semicolon (;).
Inline CSS –The style Attribute
• Following is the example of inline CSS based
on the above syntax:
• <h1 style ="color:#36C;"> This is inline CSS
</h1>
• It will produce the following result:
External CSS -The <link> Element
• The <link> element can be used to include an
external stylesheet file in your HTML
document.
• An external style sheet is a separate text file
with .css extension.
• You define all the Style rules within this text
file and then you can include this file in any
HTML document using <link> element.
External CSS -The <link> Element
• Here is the generic syntax of including external
CSS file:
• <head>
• <link type="text/css" href="..." media="..." />
• </head>
• Attributes associated with <style> elements
are:
External CSS -The <link> Element
• Attribute
– type
• Value
– text/css
• Description
– Specifies the style sheet language as a content-
type (MIME type).
– This attribute is required.
External CSS -The <link> Element
• Attribute
– href
• Value
– URL
• Description
– Specifies the style sheet file having Style rules.
– This attribute is a required.
External CSS -The <link> Element
• Attribute – aural
– media – all
• Value • Description
– screen – Specifies the device the
– tty document will be
displayed on.
– tv
– Default value is all.
– projection
– This is an optional
– handheld
attribute.
– print
– braille
External CSS -The <link> Element
• Consider a simple style sheet file with a name
mystyle.css having the following rules:
• h1, h2, h3 {
• color: #36C;
• font-weight: normal;
• letter-spacing: .4em;
• margin-bottom: 1em;
• text-transform: lowercase;
• }
External CSS -The <link> Element
• Now you can include this file mystyle.css in
any HTML document as follows:
• <head>
• <link type="text/css" href="mystyle.css"
media="all" />
• </head>
Imported CSS -@import Rule
• @import is used to import an external
stylesheet in a manner similar to the <link>
element.
• Here is the generic syntax of @import rule.
• <head>
• <@import "URL";
• </head>
Imported CSS -@import Rule
• Here URL is the URL of the style sheet file
having style rules.
• You can use another syntax as well:
• <head>
• <@import url("URL");
• </head>
Imported CSS -@import Rule
• Following is the example showing you how to
import a style sheet file into an HTML
document:
• <head>
• @import "mystyle.css";
• </head>
CSS Rules Overriding
• We have discussed four ways to include style
sheet rules in an HTML document.
• Here is the rule to override any Style Sheet
Rule.
– Any inline style sheet takes the highest priority.
– So, it will override any rule defined in
<style>...</style> tags or the rules defined in any
external style sheet file.
CSS Rules Overriding
– Any rule defined in <style>...</style> tags will
override the rules defined in any external style
sheet file.
– Any rule defined in the external style sheet file
takes the lowest priority, and the rules defined in
this file will be applied only when the above two
rules are not applicable.
Handling Old Browsers
• There are still many old browsers who do not
support CSS.
• So, we should take care while writing our
Embedded CSS in an HTML document.
• The following snippet shows how to use
comment tags to hide CSS from older
browsers:
Handling Old Browsers
• <style type="text/css">
• <!--
• body, td {
• color: blue;
• }
• -->
• </style>
CSS Comments
• Many times, you may need to put additional
comments in your style sheet blocks.
• So, it is very easy to comment any part in the
style sheet.
• You can simply put your comments inside
/*.....this is a comment in style sheet.....*/.
• You can use /* ....*/ to comment multi-line
blocks in similar way you do in C and C++
programming languages.
CSS Comments
• /* This is an external style sheet file */
• h1, h2, h3 {
• color: #36C;
• font-weight: normal;
• letter-spacing: .4em;
• margin-bottom: 1em;
• text-transform: lowercase;
• }
• /* end of style rules. */
MEASUREMENT UNITS
• Before we start the actual exercise, we would
like to give a brief idea about the CSS
Measurement Units.
• CSS supports a number of measurements
including absolute units such as inches,
centimeters, points, and so on, as well as
relative measures such as percentages and em
units.
MEASUREMENT UNITS
• You need these values while specifying various
measurements in your Style rules e.g.
border="1px solid red".
• We have listed out all the CSS Measurement
Units along with proper Examples:
MEASUREMENT UNITS
• Unit
–%
• Description
– Defines a measurement as a percentage relative
to another value, typically an enclosing element.
• Example
– p {font-size: 16pt; line-height: 125%;}
MEASUREMENT UNITS
• Unit
– cm
• Description
– Defines a measurement in centimeters.
• Example
– div {margin-bottom: 2cm;}
MEASUREMENT UNITS
• Unit
– em
• Description
– A relative measurement for the height of a font in em
spaces.
– Because an em unit is equivalent to the size of a given
font, if you assign a font to 12pt, each "em" unit would
be 12pt; thus, 2em would be 24pt.
• Example
– p {letter-spacing: 7em;}
MEASUREMENT UNITS
• Unit
– ex
• Description
– This value defines a measurement relative to a
font's x-height.
– The x-height is determined by the height of the
font's lowercase letter x.
• Example
– p {font-size: 24pt; line-height: 3ex;}
MEASUREMENT UNITS
• Unit
– in
• Description
– Defines a measurement in inches.
• Example
– p {word-spacing: .15in;}
MEASUREMENT UNITS
• Unit
– mm
• Description
– Defines a measurement in millimeters.
• Example
– p {word-spacing: 15mm;}
MEASUREMENT UNITS
• Unit
– pc
• Description
– Defines a measurement in picas.
– A pica is equivalent to 12 points; thus, there are 6
picas per inch.
• Example
– p {font-size: 20pc;}
MEASUREMENT UNITS
• Unit
– pt
• Description
– Defines a measurement in points.
– A point is defined as 1/72nd of an inch.
• Example
– body {font-size: 18pt;}
MEASUREMENT UNITS
• Unit
– px
• Description
– Defines a measurement in screen pixels.
• Example
– p {padding: 25px;}
COLORS
• CSS uses color values to specify a color.
• Typically, these are used to set a color either
for the foreground of an element (i.e., its text)
or for the background of the element.
• They can also be used to affect the color of
borders and other decorative effects.
COLORS
• You can specify your color values in various
formats.
• Following table lists all the possible formats:
COLORS
CSS Colors -Hex Codes
• A hexadecimal is a 6 digit representation of a
color.
• The first two digits (RR) represent a red value,
the next two are a green value (GG), and the
last are the blue value (BB).
CSS Colors -Hex Codes
• A hexadecimal value can be taken from any
graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint
Brush.
• Each hexadecimal code will be preceded by a
pound or hash sign ‘#’. Following are the
examples to use Hexadecimal notation.
CSS Colors -Short Hex Codes
• This is a shorter form of the six-digit notation.
• In this format, each digit is replicated to arrive
at an equivalent six-digit value.
• For example: #6A7 becomes #66AA77.
• A hexadecimal value can be taken from any
graphics software like Adobe Photoshop, Jasc
Paintshop Pro or even using Advanced Paint
Brush.
CSS Colors -Short Hex Codes
• Each hexadecimal code will be preceded by a
pound or hash sign #.
• Following are the examples to use the
Hexadecimal notation.
CSS Colors -Short Hex Codes
CSS Colors -RGB Values
• This color value is specified using the rgb( ) property.
• This property takes three values, one each for red,
green, and blue.
• The value can be an integer between 0 and 255 or a
percentage.
• NOTE: All the browsers does not support rgb()
property of color, so it is recommended not to use it.
• Following is the example to show few colors using
RGB values.
Browser Safe Colors
• Here is the list of 216 colors, which are
supposed to be most safe and computer
independent colors.
• These colors vary from hexa code 000000 to
FFFFFF.
• These colors are safe to use because they
ensure that all computers would display the
colors correctly when running a 256 color
palette:
Browser Safe Colors
BACKGROUND
• You can set the following background properties
of an element:
• The background-color property is used to set the
background color of an element.
• The background-image property is used to set
the background image of an element.
• The background-repeat property is used to
control the repetition of an image in the
background.
BACKGROUND
• The background-position property is used to
control the position of an image in the
background.
• The background-attachment property is used
to control the scrolling of an image in the
background.
• The background property is used as a
shorthand to specify a number of other
background properties.
Set the Background Color
• Following is the example, which demonstrates
how to set the background color for an
element.
• <p style="background-color:yellow;">
• This text has a yellow background color.
• </p>
• It will produce the following result:
Set the Background Image
• <table
style="background-image:url(/images/pattern
1.gif);">
• <tr><td>
• This table has background image set.
• </td></tr>
• </table>
Repeat the Background Image
• The following example demonstrates how to
repeat the background image if an image is
small.
• You can use no-repeat value for the
background-repeat property if you don't want
to repeat an image.
• In this case, the image will display only once.
Repeat the Background Image
• By default, the background-repeat property will have a
repeat value.
• <table
style="background-image:url(/images/pattern1.gif);
• background-repeat: repeat;">
• <tr><td>
• This table has background image which repeats multiple
times.
• </td></tr>
• </table>
Repeat the Background Image
• The following example which demonstrates how to
repeat the background image vertically.
• <table
style="background-image:url(/images/pattern1.gif);
• background-repeat: repeat-y;">
• <tr><td>
• This table has background image set which will repeat
vertically.
• </td></tr>
• </table>
Repeat the Background Image
• The following example demonstrates how to repeat the
background image horizontally.
• <table
style="background-image:url(/images/pattern1.gif);
• background-repeat: repeat-x;">
• <tr><td>
• This table has background image set which will repeat
horizontally.
• </td></tr>
• </table>
Set the Background Image Position
• The following example demonstrates how to set the
background image position 100 pixels away from the left
side.
• <table style="background-image:url(/images/pattern1.gif);
• background-position:100px;">
• <tr><td>
• Background image positioned 100 pixels away from the
left.
• </td></tr>
• </table>
Set the Background Image Position
• The following example demonstrates how to set the
background image position 100 pixels away from the left
side and 200 pixels down from the top.
• <table style="background-image:url(/images/pattern1.gif);
• background-position:100px 200px;">
• <tr><td>
• This table has background image positioned 100
• pixels away from the left and 200 pixels from the top.
• </td></tr>
• </table>
Set the Background Attachment
• Background attachment determines whether a
background image is fixed or scrolls with the
rest of the page.
• The following example demonstrates how to
set the fixed background image.
Set the Background Attachment
• <p
style="background-image:url(/images/pattern
1.gif);
• background-attachment:fixed;">
• This parapgraph has fixed background image.
• </p>
Set the Background Attachment
• The following example demonstrates how to
set the scrolling background image.
• <p
style="background-image:url(/images/pattern
1.gif);
• background-attachment:scroll;">
• This parapgraph has scrolling background
image.
• </p>
Shorthand Property
• You can use the background property to set all
the background properties at once.
• For example:
• <p style="background:url(/images/pattern1.gif)
repeat fixed;">
• This parapgraph has fixed repeated background
image.
• </p>
FONTS
• You can set the following font properties of an
element:
• The font-family property is used to change the
face of a font.
• The font-style property is used to make a font
italic or oblique.
• The font-variant property is used to create a
small-caps effect.
FONTS
• The font-weight property is used to increase
or decrease how bold or light a font appears.
• The font-size property is used to increase or
decrease the size of a font.
• The font property is used as shorthand to
specify a number of other font properties.
Set the Font Family
• Following is the example, which demonstrates how
to set the font family of an element.
• Possible value could be any font family name.
• <p style="font-family:georgia,garamond,serif;">
• This text is rendered in either georgia, garamond,
or the default
• serif font depending on which font you have at
your system.
• </p>
Set the Font Family
• It will produce the following result:
• This text is rendered in either georgia,
garamond, or the default serif font depending
on which font you have at your system.
Set the Font Style
• The following example demonstrates how to
set the font style of an element.
• Possible values are normal, italic and oblique.
• <p style="font-style:italic;">
• This text will be rendered in italic style
• </p>
Set the Font Style
• It will produce the following result:
• This text will be rendered in italic style
Set the Font Variant
• The following example demonstrates how to
set the font variant of an element.
• Possible values are normal and small-caps.
• <p style="font-variant:small-caps;">
• This text will be rendered as small caps
• </p>
Set the Font Variant
• It will produce the following result:
• THIS TEXT WILL BE RENEDERED AS SMALL
CAPS
Set the Font Weight
• The following example demonstrates how to
set the font weight of an element.
• The font-weight property provides the
functionality to specify how bold a font is.
• Possible values could be normal, bold, bolder,
lighter, 100, 200, 300, 400, 500, 600, 700, 800,
900.
Set the Font Weight
• <p style="font-weight:bold;">
• This font is bold.
• </p>
• <p style="font-weight:bolder;">
• This font is bolder.
• </p>
• <p style="font-weight:900;">
• This font is 900 weight.
• </p>
Set the Font Weight
• It will produce the following result:
• This font is bold.
• This font is bolder.
• This font is 900 weight.
Set the Font Size
• The following example demonstrates how to
set the font size of an element.
• The font-size property is used to control the
size of fonts.
• Possible values could be xx-small, x-small,
small, medium, large, x-large, xx-large,
smaller, larger, size in pixels or in %.
Set the Font Size
• <p style="font-size:20px;">
• This font size is 20 pixels
• </p>
• <p style="font-size:small;">
• This font size is small
• </p>
• <p style="font-size:large;">
• This font size is large
• </p>
Set the Font Size
• It will produce the following result:
Set the Font Size Adjust
• The following example demonstrates how to
set the font size adjust of an element.
• This property enables you to adjust the x-
height to make fonts more legible.
• Possible value could be any number.
Set the Font Size Adjust
• <p style="font-size-adjust:0.61;">
• This text is using a font-size-adjust value.
• </p>
• It will produce the following result:
Set the Font Stretch
• The following example demonstrates how to
set the font stretch of an element.
• This property relies on the user's computer to
have an expanded or condensed version of the
font being used.
Set the Font Stretch
• Possible values could be normal, wider,
narrower, ultra-condensed, extra-condensed,
condensed, semi-condensed, semi-expanded,
expanded, extra-expanded, ultra-expanded.
Set the Font Stretch
• <p style="font-stretch:ultra-expanded;">
• If this doesn't appear to work, it is likely that
• your computer doesn't have a condensed or
expanded
• version of the font being used.
• </p>
Set the Font Stretch
• It will produce the following result:
Shorthand Property
• You can use the font property to set all the
font properties at once. For example:
• <p style="font:italic small-caps bold 15px
georgia;">
• Applying all the properties on the text at once.
• </p>
• It will produce the following result:
