Scribd
Upload
29 views21 pages

Ip Chapter Four

Uploaded by

beshahashenafi32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
29 views21 pages

Ip Chapter Four

Uploaded by

beshahashenafi32
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 21

Chapter Four

CSS
Intro
If all pages on your site are linked to the same external
style sheet, then one simple change to the style sheet
will change all elements across the site.
If you then want to change those instructions (for
example, the size of a document heading), you need
not change every page manually. You need only change
a line in the style sheet file, then all your headings will
change their appearance to conform to the style sheet.
This technology can save a great deal of development
and maintenance time, as well as make a more
consistent, accessible interface.
Introduction
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
(describing the presentation of Web pages, including
colors, layout, fonts, etc….)
It is design to enable the separation of document
content from document presentation.
enable multiple HTML pages to share formatting by
specifying the relevant CSS in a separate .css file.
reduce complexity and repetition in the structural
content.
Cont.….
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 property name and a value,
separated by a colon.
Cont.…..
CSS Selectors
CSS selectors allow you to select and manipulate HTML
element(s).
CSS selectors are used to "find" (or select) HTML elements
based on their id, classes, types, attributes, values of
attributes and much more.
 The element Selector
 The element selector selects elements based on the element name.
 The id Selector
 The id selector uses the id attribute of an HTML tag to find the
specific element.
 The class Selector
 The class selector finds elements with the specific class.
Cont.….
 Grouping Selectors
 In style sheets there are often elements with the same style: To minimize the code, you can group
selectors.
 h1 {
text-align: center;
color: red;
}

h2 {
text-align: center;
color: red;
}

p{
text-align: center;
color: red;
}

 h1, h2, p {
text-align: center;
color: red;
}
Cont.….
Three Ways to Insert CSS
here are three ways of inserting a style sheet:
 External style sheet
 An external style sheet is ideal when the style is applied to many
pages.
 Each page must include a link to the style sheet with the <link> tag.
 <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
 Internal style sheet
 An internal style sheet should be used when a single document has a
unique style.
 Inline style
Cont.…..
CSS Background
CSS background properties are used to define the
background effects of an element.
CSS properties used for background effects:
 background-color
 background-color: #b0c4de;
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"
 background-image
 background-image: url("paper.gif");
Cont.…..
 background-repeat
 Repeat the background image both horizontally and vertically.
 body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
 background-attachment
 Sets whether a background image is fixed or scrolls with the rest of the
page.
 background-attachment: scroll/fixed/
 background-position
 body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Cont.…..
Background - Shorthand property
The shorthand property for background is simply
"background“
 body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
When using the shorthand property the order of the
property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
Cont.……
CSS Text
Text Color
 The color property is used to set the color of the text.
 With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red“
 Color: ff0000
Text Alignment
 The text-align property is used to set the horizontal alignment of a
text.
 Text can be centered, or aligned to the left or right, or justified.
o text-align: center
Cont.…..
 Text Decoration
 The text-decoration property is used to set or remove
decorations from text.
 text-decoration: none; overline; underline; throghline;

 Text Transformation
 The text-transform property is used to specify uppercase and
lowercase letters in a text.
 text-transform: uppercase; lowercase; capitalize;

 Text Indentation
 The text-indent property is used to specify the indentation of the
first line of a text.
 text-indent: 50px;

 Reading Assignment ( read other properties)


Cont.….
CSS Font
CSS font properties define the font family, boldness,
size, and the style of a text.
Font Family
 The font family of a text is set with the font-family property.
 The font-family property should hold several font names as a
"fallback" system.
 If the name of a font family is more than one word, it must be in
quotation marks.
 E.g. "Times New Roman“
p {
font-family: "Times New Roman", Times, serif;
}
Cont.…..
 Font Style
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)
Font Size
 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
Cont.….
 Relative size:
 Sets the size relative to surrounding elements
 Allows a user to change the text size in browsers
 E.g. h1 {
font-size: 40em;
}
 100% = 1em = 1rem = 16px = 12pt
The font-weight property sets how thick or thin
characters in text should be displayed.
 font-weight: normal|bold|bolder|lighter|number
Reading Assignment (Short form of font and List Style
Types)
Cont.…..
CSS Box Model
All HTML elements can be considered as boxes. In CSS,
the term "box model" is used when talking about design
and layout.
Cont.…
CSS Border
 The CSS border properties allow you to specify the style, size,
and color of an element's border.
 Border Style
 The border-style property specifies what kind of border to
display.
 Values:- none, dotted, solid, groove, ridge, inset, outset
 Border Width
 The border-width property is used to set the width of the
border.
 The width is set in pixels, or by using one of the three pre-
defined values: thin, medium, or thick.
o p.one { border-style: solid; border-width: 5px;}
Cont.…..
 Border Color
 The border-color property is used to set the color of the border.
 p.one { border-style: solid; border-color: red;}
 Border - Individual sides
 In CSS it is possible to specify different borders for different sides:
 p { border-top-style: dotted; border-right-style: solid; border-bottom-
style: dotted; border-left-style: solid;}
 div { width: 300px; padding: 25px; border: 25px solid navy; margin: 25px;}
 Margin
 The CSS margin properties define the space around elements.
 p{
margin: 100px 50px;
}
Cont.……
 Padding
 The CSS padding properties define the space between the element
border and the element content.
p
 {padding: 25px 50px 10px 18px;}
 {padding: 25px 10px 18px;}
 { padding: 25px 50px;}
{padding: 25px;}
 CSS Float
 With CSS float, an element can be pushed to the left or right, allowing
other elements to wrap around it.
 Float is very often used for images, but it is also useful when working
with layouts.
img { float: right;}
Cont.….
Styling Links
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.
Cont.….
 a:link {
color: #FF0000;
}

/* visited link */
a:visited {
color: #00FF00;
}

/* mouse over link */


a:hover {
color: #FF00FF;
}

/* selected link */
a:active {
color: #0000FF;
}

You might also like