Scribd
Upload
2 views

Css

Uploaded by

sumishaacharya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views

Css

Uploaded by

sumishaacharya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 55

WEB PROGRAMMING

BIM Third Semester


CSS
Introducing CSS
CSS
• Acronym for “Cascading Style Sheet”
• Used to control the style of a web document in a simple and
easy way
• A style sheet language used to describe the presentation of a
document written in HTML or XML
• CSS describes how elements should be rendered on screen,
on paper, in speech, or on other media
Example of CSS
<!DOCTYPE html>
<html> <head>
<title>This is document title</title>
<style>
h1 { color: #36CFFF; }
</style> Output:
</head> Hello World!
<body>
<h1>Hello World!</h1>
</body>
</html>
Inheritance
• CSS rule sets cascade down the CSS hierarchy from parent
selectors to their children selectors
• These CSS rule sets are inherited from their parent selectors
• The Child element will naturally inherit a CSS property with its
value from the parent element if the CSS property is not
specified
• In CSS, inheritance controls what happens when no value is
specified for a property on an element
Example of Inheritance
<style>
#div1 {
color: red;
}
</style>
</head>
<body>
<div id="div1">
Parent Div
<div id="div1Child">Child Div 1</div>
<div id="div2Child">Child Div 2</div>
</div>
Inheritance
• CSS properties can be categorized in two types:

• Inherited properties, which by default are set to the computed


value of the parent element

• Non-inherited properties, which by default are set to initial


value of the property

• The inherit keyword specifies that a property should inherit its


value from its parent element
• The inherit keyword can be used for any CSS property, and
on any HTML element
Inheritance
• CSS properties can be categorized in two types:

• Inherited properties, which by default are set to the computed


value of the parent element

• Non-inherited properties, which by default are set to initial


value of the property

• The inherit keyword specifies that a property should inherit its


value from its parent element
• The inherit keyword can be used for any CSS property, and
on any HTML element
CSS Rules
• Three ways to add CSS in the existing HTML Documents:
1. Internal CSS
2. External CSS
3. Inline CSS
External CSS
• With an external style sheet, you can change the look of an
entire website by changing just one file
• Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section
Mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
External CSS
<!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>
Internal CSS
• An internal style sheet may be used if one single HTML page
has a unique style.
• The internal style is defined inside the <style> element, inside
the head section
• Example:
• <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
Internal CSS
• h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
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:
<body>
• <h1 style="color:blue;text-align:center;">This is a
heading</h1>
• <p style="color:red;">This is a paragraph.</p>
• </body>
Advantages of CSS
• CSS saves times
• Pages loads faster
• Easy maintenance
• Superior styles to HTML
• Multiple Device Compatibility
• Global web standards
CSS
Controlling Text
Font Family
• The font-family CSS property specifies a prioritized list of one
or more font family names and/or generic family names for
the selected elements
• Values are separated by commas to indicate that they are
alternatives
• The browser will select the first font in the list that is installed
or that can be downloaded using the @font-face at-rule
• One should always include at least one generic family name
in the font-family list, since there’s no guarantee that any
given font is available
Font Family
• The font-family property specifies a list of fonts, from highest
priority to lowest
• Font selection does not stop at the first font in the list that is
on the user's system
• Rather, font selection is done one character at a time, so that
if an available font does not have a glyph for a needed
character, the latter fonts are tried
• When a font is only available in some styles, variants,
or sizes, those properties may also influence which font
family is chosen
Font Family
/* A generic family name only */
font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: ui-serif;
font-family: ui-sans-serif;
Font Family
Example:
font-family: "Gill Sans Extrabold", sans-serif;

Here, the first with a <family-name> and the second with a


<generic -name>
Font Family
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Font Family
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New
Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida
Console font.</p>
</body>
</html>
Font-Size Property
• The font-size property sets the size of the text
• The font-size value can be an absolute, or relative size
• Absolute size:
Sets the text to a specified size
Does not allow a user to change the text size in all
browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the
output is known
• Relative size:
Sets the size relative to surrounding elements
Allows a user to change the text size in browsers
Font-Size Property
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h1 {
font-size: 40px;
}
body {
font-size: 100%;
}
h1{
font-size:10vw;
}
Font-Size Property
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
Font-Size Property
p{
font-size: 10vw;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>An example of the font-size</p>
</body>
Font-weight Property
The font-weight property specifies the weight of a font
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
Font-weight Property
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
Font-style Property
• The font-style property is mostly used to specify italic text
• This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to
italic, but less supported)
Example:
<style>
p.normal {
font-style: normal;
}
Font-style Property
p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}
</style>
Font-style Property
</head>
<body>

<h1>The font-style property</h1>

<p class="normal">This is a paragraph in normal style.</p>


<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>

</body>
</html>
Font-variant Property
• The font-variant property specifies whether or not a text
should be displayed in a small-caps font
• In a small-caps font, all lowercase letters are converted to
uppercase letters
• However, the converted uppercase letters appears in a
smaller font size than the original uppercase letters in the text
Font-variant Property
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
Font-variant Property
<body>

<h1>The font-variant property</h1>

<p class="normal">My name is Xyz</p>


<p class="small">My name is Xyz.</p>

</body>
</html>
Font-stretch Property
• The font-stretch property allows you to make text narrower
(condensed) or wider (expanded)
Example:
<html>
<body>
<p style = "font-stretch:ultra-expanded;"> If this doesn't
appear to work, it is likely that your computer doesn't have a
<br>condensed or expanded version of the font being used.
</p>
</body>
</html>
Font-stretch Property
Value Description
ultra- Makes the text as narrow as it gets
condensed
extra- Makes the text narrower than condensed,
condensed but not as narrow as ultra-condensed
condensed Makes the text narrower than semi-
condensed, but not as narrow as extra-
condensed
semi- Makes the text narrower than normal, but
condensed not as narrow as condensed
normal Default value. No font stretching
Font-stretch Property
semi-expanded Makes the text wider than normal, but
not as wide as expanded
expanded Makes the text wider than semi-
expanded, but not as wide as extra-
expanded
extra-expanded Makes the text wider than expanded,
but not as wide as ultra-expanded
ultra-expanded Makes the text as wide as it gets
initial Sets this property to its default value
inherit Inherits this property from its parent
element
Font-size-adjust Property
• The font-size-adjust property gives one better control of the
font size when the first selected font is not available
• When a font is not available, the browser uses the second
specified font
• This could result in a big change for the font size so in order
to prevent this, one can use the font-size-adjust property
• All fonts have an "aspect value" which is the size-difference
between the lowercase letter "x" and the uppercase letter "X"
• When the browser knows the "aspect value" for the first
selected font, the browser can figure out what font-size to use
when displaying text with the second choice font

Note: Only Firefox supports the font-size-adjust property


Font-size-adjust Property
Value Description

number Defines the aspect value to use

none Default value. No font size adjustment

initial Sets this property to its default value

inherit Inherits this property from its parent element.


Font-size-adjust Property
Value Description

number Defines the aspect value to use

none Default value. No font size adjustment

initial Sets this property to its default value

inherit Inherits this property from its parent element.


Font-size-adjust Property
<!DOCTYPE html>
<html>
<head>
<style>
div.a {font-family: verdana;}
div.b {font-family: 'times new roman';}
#div1, #div2 {font-size-adjust: 0.58;}
</style>
</head>
<body>
Font-size-adjust Property
<h1>The font-size-adjust Property</h1>
<p><b>Note:</b> Only Firefox supports the font-size-adjust
property.</p>
<h2>Two divs with the same font-size-adjust property:</h2>
<div id="div1" class="a">
You control the font size better with the font-size-adjust
property.
</div>
<div id="div2" class="b">
You control the font size better with the font-size-adjust
property.
</div>
Font-size-adjust Property
<h2>Two divs without the font-size-adjust property:</h2>
<div class="a">
You control the font size better with the font-size-adjust
property.
</div>
<div class="b">
You control the font size better with the font-size-adjust
property.
</div>
</body>
</html>
CSS
Text Formatting
The Color Property
• The text-color property is used to set the color of the text
• Text-color can be set by using the name like “red”, hex value
like “#ff0000” or by its RGB value “rgb(255,0,0)
• Syntax:
body {
color: color name;
}
The default text color for a page is defined in the body selector
The text-align Property
• Text alignment property is used to set the horizontal
alignment of the text
• The text can be set to left, right, centered and justified
alignment
• In justified alignment, line is stretched such that left and right
margins are straight

Syntax: body
{
text-align: alignment type;
}
The vertical-align Property
• The vertical-align property sets the vertical alignment of an
element
• The text can be set to baseline, top, bottom and super or
sub alignment

Syntax: body
{
vertical-align: alignment type;
}
The text-indent Property
• This property can be used to decorate the text
• It can be defined by using underline, over line, line-through or
none property
• Syntax: body
{
text-decoration: decoration type;
}
To set the text decoration of the line:
text-decoration: underline red wavy 10px;

Tip of the day: If you want to not include the line in the link tag
then just make the text-decoration: none.
The text-indent Property
• Text indentation property is used to indent the first line of the
paragraph
• The size can be in px, cm, pt.
• Syntax: body
{
text-indent: size;
}
The text-shadow Property
• The text-shadow property adds shadow to text
• In its simplest use, one only specify the horizontal shadow
(2px) and the vertical shadow (2px)
• One can specify the horizontal size, vertical size and shadow
color for the text and blur effect too
• Syntax:
body
{
text-shadow: horizontal-size vertical-size blur-value
color- name;
}
The text-transform Property
• Text transformation property is used to change the case of
text, uppercase or lowercase
• Text transformation can be uppercase, lowercase or
capitalize
• Capitalize is used to change the first letter of each word to
uppercase
• Syntax:
body
{
text-transform: type;
}
The letter-spacing Property
• This property is used to specify the space between the
characters of the text
• The size can be given in px
• Syntax:
body
{
letter-spacing: size;;
}
The word-spacing Property
• Word spacing is used to specify the space between the
words of the line
• The size can be given in px
• Syntax:
body
{
word-spacing: size;
}
The white-space Property
• The white-space property specifies how white-space inside
an element is handled
• Syntax:
body
{
white-space: nowrap;
}
The direction Property
• Text direction property is used to set the direction of the text
• The direction can be set by using rtl : right to left
• Left to right is the default direction of the text
• Syntax:
body
{
direction: rtl;
}
The unicode-bidi property is used together with the direction
property to set or return whether the text should be overridden
to support multiple languages in the same document

You might also like