Scribd
Upload
245 views

Chapt 3 PDF

This document provides an overview of Cascading Style Sheets (CSS). CSS allows you to control the look and feel of HTML documents in an organized way by separating structure from presentation. There are three ways to define CSS - internally within HTML tags, externally in separate files linked via HTML, or inline within specific tags. External CSS files allow styles to be reused across documents. CSS uses selectors to target specific HTML elements and declarations to set properties like colors, fonts, positioning. Media types can be specified to target different devices.

Uploaded by

Abdela Aman Mtech
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
245 views

Chapt 3 PDF

This document provides an overview of Cascading Style Sheets (CSS). CSS allows you to control the look and feel of HTML documents in an organized way by separating structure from presentation. There are three ways to define CSS - internally within HTML tags, externally in separate files linked via HTML, or inline within specific tags. External CSS files allow styles to be reused across documents. CSS uses selectors to target specific HTML elements and declarations to set properties like colors, fonts, positioning. Media types can be specified to target different devices.

Uploaded by

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

CHAPTER THREE

Cascading Style Sheet (CSS)

1 BY Ins Abdela A.
Overview on CSS
 are a way to control the look and feel of your HTML documents
in an organized and efficient manner.
 The principle of Cascading Style Sheets (CSS) has roots in
Standardized Generalized Markup Language (SGML) from the
1980s.
 Its goals are to create a consistent look across many web-pages
and to separate structure from presentation so you can provide
different style sheets for printing, browsing, or other scenarios
 With CSS you will be able to:
 Add new looks to your old HTML
 Completely restyle a web site with only a few changes to your CSS code
 Use the "style" you create on any webpage you wish!

2 BY Ins Abdela A.
Overview…
 Cascading style sheets provide a means to apply a
presentation to an HTML structure by defining how HTML
elements are displayed.
 By using CSS, you can set background and fore-ground colors,
margins, borders, fonts, positions, and much more. You have
creative control of the HTML elements, so you can decide
what the elements look like and where they display on the
screen.
 A style is a rule that describes how to format a specific part of
an HTML document.
 A style sheet is a set of style rules.

3 BY Ins Abdela A.
Overview…
 You can create
 a style and apply it to many elements based on a selector.
 A style and use a selector to locate and select elements based on
tag name, class name, ID, and more.
 a style that works with images, and you can create a style that
works only with hyperlinks.
 a named style that you can apply to any element.
 “ the reusability is powerful”

4 BY Ins Abdela A.
Defining CSS
 CSS code is not written the same way as HTML code is.This makes
sense because CSS is not HTML, but rather a way of manipulating
existing HTML.
 A style rule, or style, is composed of two parts:
 the selector, which locates the elements in the HTML document that will
be styled, and
 the declaration block, which contains the formatting instructions
(declarations).
 A declaration comprises
 a CSS property,
 followed by a colon,
 followed by a value.
 Multiple declarations are always separated with a semicolon.
5 BY Ins Abdela A.
Defining CSS…
 General CSS Format:
“Selector" { declaration;}
" selector" { "CSS Property" : "Value" ; }

body { background-color: white; color: gray; }


 HTML element we wanted to manipulate:
body{ : ; }
 Then we chose the CSS attribute color.
body {background-color ; }
 Next we choose the font color to be white. –
body {background-color : white; }
6 BY Ins Abdela A.
Defining CSS…
CSS selectors
 are the heart and soul of CSS.
 They define which HTML elements you are going to be
manipulating with CSS code and
 The selector name creates a direct relationship with the
HTML tag you want to edit.
Example:
 If you wanted to change the way a paragraph tag behaved, the
CSS code would look like:
p { PROPERTY:VALUE }
 The above example is a template that you can use whenever you
are manipulating the paragraph HTML element

7 BY Ins Abdela A.
Creating CSS
 Cascading Style Sheets come in three flavors:
 internal,
 external, and
 inline.
Creating an inline style
 All elements have a global attribute called style that can be used to
provide an inline style.
 An inline style is defined on the element to which you wish to add
styling,
 don’t need a selector; just need to specify the declaration block.
 The following is an example of an inline style on the <body> element that
sets the background color to white and the font color to gray.
 <body
<bodystyle='background-color:
style='background-color:white; color:color:
white; gray;'>gray;'>
 </body>
….
</body>
8 BY Ins Abdela A.
Inline CSS…
 In the example, you don’t need an external style sheet because you
defined the style on the actual <body> element.
 You should try to avoid this technique; it violates the primary goal
of separation between structure and presentation
 doesn’t create any reusability because you will need to copy this
style to each HTML document you add to your application.
 An advantage of using an inline style is
 it always overrides styles that are defined else-where because the
inline styles are specific to the element on which the inline style
is defined.
 This specificity can solve isolated problems when a style is
applied globally in an external style sheet, but one element needs
to be styled differently.

9 BY Ins Abdela A.
Creating an embedded style
 Instead of creating inline styles by using the global style
attribute, you can uses the <style> element to create an
embedded (internal) style sheet within your HTML document.
 use CSS selectors to assign the style definitions to elements
on the page.
 embedded style is located within the <head> element
 Place the CSS Code between <style> and </style>

10 BY Ins Abdela A.
<html>
<head>
<style>
body { background-color: blue; }
p { color: white; }
</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This page uses internal CSS. Using the style tag we are able to modify
the appearance of HTML elements.</p>
</body>
</html>

 it does not provide file separation.


 It provides reuse within the files, but it does not promote reuse
across HTML documents.
 use this approach when you want to have a single, stand-alone
HTML document that contains everything needed to render.
11 BY Ins Abdela A.
Creating an external style sheet
 Instead of creating the same embedded styles in every HTML
document, the best approach is to create an external style
sheet file that can be linked to all your pages.
 External CSS is a file that contains only CSS code and is saved
with a ".css" file extension.
 This CSS file is then referenced in your HTML using the
<link> element instead of <style>.
 Consider the example bellow
 Test.css
 Test.html

12 BY Ins Abdela A.
External CSS…
Test.css In example test.html,
body{ background-color: gray;}
p { color: blue; }  the <link> element contains
h3{ color: white; } the rel attribute, which
specifies the rela-tionship
Test.html between the current HTML
<html> document and the external
<head> file as a style sheet.
<link rel="stylesheet" type="text/css"
 The type attribute specifies
href="test.css" />
</head>
the MIME type of the
<body> external file as a text-based
<h3> A White Header </h3> cascading style sheet.
<p> This paragraph has a blue font.  The href attribute specifies
The background color of this page is the relative location of the
gray because we changed it with CSS! </p> external CSS file, which is
</body> the test.css file
</html>

13 BY Ins Abdela A.
External CSS…
Why use external CSS?
 Using an external style sheet is considered the best way to
implement your styles.
 It keeps your website design and content separate.
 It's much easier to reuse CSS code if you have it in a separate file.
 Instead of typing the same CSS code on every web page, simply
have many pages refer to a single CSS file with the "link" tag.
 drastic changes can be achieved to web pages with just a few
changes in a single CSS file.
 its possible to link many external style sheets to an HTML
document.

14 BY Ins Abdela A.
Using media to specify the target device
 The <link> element also has a media attribute that can specify
the target device.
 By using the media attribute, you can create a CSS file for
each device type and link all the CSS files into your HTML
documents.
 When the HTML document is rendered, the browser
determines the media type and uses the appropriate CSS file.
 The browser can select only one media type for the rendering
of an HTML document

15 BY Ins Abdela A.
CSS and Media…
 The following is a list of the media types that are avail-able for use.
 all Renders to all devices
 braille Renders to braille tactile feedback devices
 embossed Renders to paged braille printers
 handheld Renders to handheld devices that typically have small, low-
resolution screens and limited bandwidth
 print Renders paged material and documents viewed on screen in print
preview mode
screen Renders to color computer screens
speech Renders to speech synthesizers
 tty Renders to media, using a fixed-pitch character grid such as teletypes,
terminals, and portable devices with limited display capabilities
tv Renders to television-type devices that typically have low-resolution
color screens with limited ability to scroll and have sound
16 BY Ins Abdela A.
Media…
 The following is an example of an HTML document that
contains <link> elements for screen styles and print styles.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel='stylesheet' type='text/css' href='Content/screen.css' media='screen' />
<link rel='stylesheet' type='text/css' href='Content/printer.css' media='print' />
</head>
<body>
</body>
</html>

17 BY Ins Abdela A.
Specifying the character encoding of the
style sheet
 @charset rule use to specify the character encoding of the
style sheet text
 To be compatible with all browsers, be sure to place this on
the first line of your CSS file.
@charset 'UTF-8';
body { background-color: white; color: gray; }
 if your HTML document has a <meta> element that describes
the character set of the HTML document, that setting
overrides the @charset setting in the CSS file.
<head>
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8' >
<link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>
18 BY Ins Abdela A.
Imported style sheets from other style sheets
 when a style sheet grows, its possible to break it into smaller,
more manageable files.
 The @import rule enables you to import a CSS file to the
current style sheet.
 No limit on the number of @import rules
 the @import rules must be at the top of the style sheet,
 before any other content except the @charset rule.
 Note:
 If comment are above the @import rules, they will not work
properly.

19 BY Ins Abdela A.
@import url('/Content/header.css');
@import url('/Content/menu.css');
@import url('/Content/sidebar.css');
@import url('/Content/mainContent.css');
@import url('/Content/footer.css');
body {
background-color: white;
color: gray;
}

 contents in the CSS file must follow the @import rules

20 BY Ins Abdela A.
Defining selectors
 Three Ways to define a selector
 element selectors,
 id selectors, and
 class selectors
Creating an element type selector
 An element type selector is based on the name of the tag
button { • In the previous examples, the tag name (body) is
the selector, but there is only one <body> element
background-color: white;
in an HTML document.
color: gray;
• But what if the selector is Button?
} • In this example, if there are 50 buttons, all the
buttons will be set to have the defined style.
• What if we want to set the style in single
button or only set of buttons?
21 BY Ins Abdela A.
Creating an id selector
 An id selector is based on the id of the element.
 To set the style on a single button, you can assign an id to the
button and then specify the id as the selector, prefixed with
the hash (#) symbol.
 The following example sets the style on an element whose id
is btnSave. • In this example, it doesn’t matter which
#btnSave { type of element is being accessed; all
background-color: white; that matters is that the id is btnSave.
color: gray; • across webpages, this sets the style of
} any element whose id is btnSave.
• Because the id must be unique across
the HTML document, using this
approach to set a style limits the
22 reusabilityBYon a page
Ins Abdela A.
Creating a class selector
 A class selector is a style with a class name of your choice,
prefixed with the period (.) symbol.
 This is also called a named style.
 The class name can be assigned to any element through the
class attribute.
 In the following example, a style is created with a class name
of myStyle.
.myStyle { This style won’t apply to any elements until
background-color: white; you specify the class name by using the
color: gray; class attribute
}

23 BY Ins Abdela A.
class selector …
<!DOCTYPE html>
<html>
<head> <title></title>
<link rel='stylesheet' type='text/css' href='Content/default.css' />
</head>
<body>
<input id='txtName' name='txtName' type='text' class='myStyle' />
<button id='btnOk' class='myStyle'>Ok</button>
<button id='btnSave'>Save</button>
<button id='btnCancel' class='myStyle'>Cancel</button>
</body>
</html>

 In this example, the class attribute specifies the myStyle style


on the text box and two of the buttons.
 Named styles promote reuse because they can be used on
any element as needed.
24 BY Ins Abdela A.
Class selector…
p{ color: red; font-size: 20px; } <html>
p.test1{ color: blue; } <head><style>……..</ style ></head>
p.test2{ font-size: 12px; } <body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that uses the p.test1
CSS code!</p>
<p class="test2">This is a paragraph that uses the p.test2
Output CSS code!</p>
……

 CSS code in classes will override the general CSS code for
that element.
 In the above example p.test1 overrides the style defined for
the p p{ color: red; font-size: 20px; }
25 BY Ins Abdela A.
Using the universal selector
 If you want to apply a style to every element, you can use the
asterisk (*) symbol.
 The following example applies the style to every element in
the HTML document.
*{
background-color: white;
color: gray;
}

 You should avoid using the universal selector because of the


performance cost.

26 BY Ins Abdela A.
Grouping selectors
 You can group selectors when you will be applying the same
style by separating each selector with a comma.
Button, p {
background-color: white;
color: gray;
}

27 BY Ins Abdela A.
Using pseudo-class and pseudo-element selectors
 Styles are generally attached to an element based on locating
the element in the document object model (DOM) tree.
 Although this usually works fine, sometimes you want to apply
a style to something more granular than an element.
 How do you assign a style to the first line of a paragraph?
 How do you assign a style to a hyperlink that has been visited?
 To access information that is either outside the DOM tree or
difficult to access in the DOM tree, you can use pseudo
classes and pseudo elements.

28 BY Ins Abdela A.
Pseudo classes…
 Pseudo classes classify elements based on something other
than name, attributes, or content and, usually, something that
cannot be deduced from the DOM tree
 You can use the pseudo classes anywhere in your selector
chain to help you locate elements when the identified state is
true.
 You can also use pseudo classes at the end of the selector
chain to set the style of the element when the iden-tified state
is true
 Consider the following example, about a link and its four
states

29 BY Ins Abdela A.
Pseudo class…
 The states must be defined in the correct order
1. link - this is a link that has not been used, nor is a mouse pointer
hovering over it
2. visited - this is a link that has been used before, but has no mouse
on it
3. hover - this is a link currently has a mouse pointer hovering over
it/on it
4. active - this is a link that is in the process of being clicked
 Using CSS you can make a different look for each one of these
states using pseudo class
 Code format: a:(STATE'S NAME) { attribute: value; }

30 BY Ins Abdela A.
Pseudo …
a:link {
color: white;
background-color: black; Considering the bellow html the
text-decoration: none; effect is illustrated in the figure
border: 2px solid white;
} bellow
a:visited { <a href="">This is a special CSS
color: white; Link</a>
background-color:
black; text-decoration: none;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
text-decoration: none;
border: 2px solid black;
}
31 BY Ins Abdela A.
Using subsequent adjacent sibling
selectors
 An adjacent selector can be used to select an element if it is
preceded by a specific element.
 The plus (+) sign denotes an adjacent selector.
 In the following example, div + h1 set the heading to a background
color of yellow if the heading is preceded by a <div> element as the
previous sibling.
div + h1 {
background-color: yellow;
}
 Considering the HTML in the next slide, the first <div> element has
child <h1> elements, but they are children, not adjacent elements.
The adjacent element that follows the first <div> element is the
<span> element, which means that the first <div> element does not
play a role in changing an <h1> element’s

32 BY Ins Abdela A.
Example html…
<!DOCTYPE html> some text after the div
<html <h1>This is the second h1 child</h1>
xmlns="http://www.w3.org/1999/xhtml"> <h1>This is the third h1 child</h1>
<head> </div>
<title></title> some following content
<link href="default.css" rel="stylesheet" /> <span>here is a span</span>
</head> <h1>This the first h1 that follows the
<body> paragraph</h1>
<h1>The h1 child before the first <h1>This the second h1 that follows the
div</h1> paragraph</h1>
<div> <h1>This the third h1 that follows the
some child content paragraph</h1>
<h1>This is the first h1 child</h1> </body>
<div>another div here</div> </html>

33 BY Ins Abdela A.
Using the subsequent sibling selector
 The subsequent sibling selector is similar to the adjacent sibling
selector, but its search for the sibling match doesn’t stop at
the first match.
 The tilde (~) character denotes the sibling selector.
 For example, div ~ h1 selects all <h1> elements that follow a
<div> element.
 In the following example, div ~ h1 sets the heading to a
background color of yellow if the heading is preceded by a
<div> element as a previous sibling.
div ~ h1 { background-color: yellow; }

34 BY Ins Abdela A.
subsequent adjacent sibling selectors subsequent sibling selectors

35 BY Ins Abdela A.
:first-letter selector
 :first-letter selector is used to add a style to the first
letter of the specified selector.
 :first-letter
 Example
 Select and style the first letter of every <p> element:
p:first-letter
{
font-size:200%;
color:#8A2BE2;
}

36 BY Ins Abdela A.
:first-letter selector
 Note: The following properties can be used with :first-letter:
 font properties
 color properties
 background properties
 margin properties
 padding properties
 border properties
 text-decoration
 vertical-align (only if float is 'none')
 text-transform
 line-height
 float
 clear

37 BY Ins Abdela A.
:first-letter selector…
 :first-line Selector
 :first-line selector is used to add a style to the first line of the specified selector.
 Note: The following properties can be used with :first-line:
 font properties
 color properties
 background properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear

38 BY Ins Abdela A.
:first-letter selector…
 Example
 Select and style the first line of every <p> element:
 p:first-line
{
background-color:yellow;
 color:#ff0000;
 font-variant:small-caps
}

39 BY Ins Abdela A.
:first-letter selector…
 Note: The "first-line" pseudo-element can only be used with block-level
elements.
 Note: The following properties apply to the "first-line" pseudo-element:
 font properties
 color properties
 background properties
 word-spacing
 letter-spacing
 text-decoration
 vertical-align
 text-transform
 line-height
 clear
40 BY Ins Abdela A.
:before Pseudo-element
 CSS - The :before Pseudo-element
 The ":before" pseudo-element can be used to insert some
content before the content of an element.
 The following example inserts an image before each <h1>
element:
 Example
h1:before
{
content:url(smiley.gif);
}

41 BY Ins Abdela A.
Example
<!DOCTYPE html>
<html>
<head>
<style>
h1:before {content:url(smiley.gif);}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>The :before pseudo-element inserts content before an
element.</p>
<h1>This is a heading</h1>
<p><b>Note:</b> IE8 supports the content property
only if a !DOCTYPE is specified.</p>
</body>
42 BY Ins Abdela A.
</html>
:after Pseudo-element
 CSS - The :after Pseudo-element
 The ":after" pseudo-element can be used to insert some
content after the content of an element.
 The following example inserts an image after each <h1>
element:
 Example
h1:after
{
content:url(smiley.gif);
}

43 BY Ins Abdela A.
display property
 The display property defines how a certain HTML element
should be displayed.
none The element will not be displayed at all
box (or flex-box) The element is displayed as a block-level flex container box
The element is displayed as a block-level element (like paragraphs
block
and headers)
flex The element is displayed as a block-level flex container box
This is default. The element is displayed as an inline-level element
inline
(like span)
The element is displayed as a list-item, which means that it has a
list-item
bullet in front of it
table The element is displayed as a table
44 BY Ins Abdela A.
Example
<!DOCTYPE html>
<html>
<head>
<style>
p {display:inline}
</style>
</head>
<body>
<p>These two paragraphs generates inline boxes, and it results in</p>
<p>no distance between the two elements.</p>
</body>
</html>

45 BY Ins Abdela A.
CSS properties

46 BY Ins Abdela A.
Background Properties
 CSS background properties are used to define the
background effects of an element
 CSS properties used for background effects:
 background-color: color
 background-image: url(url)
 Sets the background image for an element
 background-repeat: repeat_type {repeat, repeat-
x, repeat-y, no-repeat}
 background-attachment: attachment_type
{scroll, fixed}
 Sets whether a background image is fixed or scrolls with the rest of
the page (default: scroll)
47 BY Ins Abdela A.
Background…
Background Color
 The background-color property specifies the background
color of an element.
 The background color of a page is defined in the body
selector:
 body {background-color:#b0c4de;}
 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"
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
48 BY Ins Abdela A.
Background…
Background Image
 The background-image property specifies an image to use as
the background of an element.
 By default, the image is repeated so it covers the entire
element.
 The background image for a page can be set like this:
body {background-image:url(‘astu.jpg');}

49 BY Ins Abdela A.
Background…
 Background Image - Repeat Horizontally or
Vertically
 By default, the background-image property repeats an
image both horizontally and vertically.
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

50 BY Ins Abdela A.
Background…
 Background Image – Set position and no-repeat
 The position of the image is specified by the background-
position property:
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

51 BY Ins Abdela A.
Background…
 Background - Shorthand property
 To shorten the code, it is also possible to specify all the
properties in one single property. This is called a
shorthand property.
 The shorthand property for background is simply
"background":

body {
background:url('img_tree.png') no-repeat right top;
}

52 BY Ins Abdela A.
Background…
 When using the shorthand property the order of
the property values is:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 It does not matter if one of the property values is
missing, as long as the ones that are present are in
this order.
53 BY Ins Abdela A.
Background…
 The background-position property sets the starting position
of a background image.
 Values of background-position
 left top
 left center
 left bottom
 right top
right center
 right bottom
 center top
 center center
 center bottom
54 BY Ins Abdela A.
Text property
 The color property is used to set the color of the text.
color: color
 The color can be specified by:
 name - a color name, like "red"
 RGB - an RGB value, like "rgb(255,0,0)"
 Hex - a hex value, like "#ff0000"

 The default color for a page is defined in the body selector.


body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}

55 BY Ins Abdela A.
Text…
 text-decoration: specifies the decoration added to text.
 Note: The color of the decoration should be set by the "color"
property.
 Set the text decoration for h1, h2, h3, and h4 elements:

h1 {text-decoration:overline}
h2 {text-decoration:line-through}
h3 {text-decoration:underline}
h4 {text-decoration:blink}

56 BY Ins Abdela A.
Text…
 direction: direction {ltr, rtl} borwser issue??
 letter-spacing: value
 text-align: alignment {left, right, center, justify}
 text-decoration: decoration {none, underline, overline,
line-through, blink}
 white-space: Sets how white space inside an element is
handled
normal
pre
nowrap

57 BY Ins Abdela A.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
</style>
</head>
<body>
<h1>CSS text-align Example</h1>
<p class="date">May, 2009</p>
<p class="main">In my younger and more vulnerable years my father gave me some
advice that I've been turning over in my mind ever since. 'Whenever you feel like
criticizing anyone,' he told me, 'just remember that all the people in this world haven't
had the advantages that you've had.'</p>
<p><b>Note:</b> Resize the browser window to see how the value "justify"
orks.</p>
58 </body> BY Ins Abdela A.
CSS (cont’d)
 text-indent :- property specifies the indentation of
the first line in a text-block.
text-indent: value
 Note: Negative values are allowed.
 The first line will be indented to the left if the value is
negative.
 Value: Defines a fixed indentation in px, pt, cm, em,
etc.
 (16px=1em).
59 BY Ins Abdela A.
Text…
 text-transform property controls the capitalization of
text.
 text-transform: transform {none, capitalize, uppercase,
lowercase}
 Capitalize:Transforms the first character of each word to
uppercase
 Uppercase:Transforms all characters to uppercase
 lowercase:Transforms all characters to lowercase
 Example:
h1 {text-transform:uppercase;}
h2 {text-transform:capitalize;}
p {text-transform:lowercase;}
60 BY Ins Abdela A.
Text…
 word-spacing property increases or decreases the
white space between words.
word-spacing: value

 Note: Negative values are allowed.


 Example
 Specify that the space between words in paragraphs
should be 30 pixels:
p
{
word-spacing:30px;
}
61 BY Ins Abdela A.
CSS Font Properties
 The CSS font properties control all aspects of your text
graphical representation.
 From the thickness of your font (font-weight) to font type
(font-family) of your choice.
 Here are all the font properties at your disposal:
 font
 font-family
 font-size
 font-style
 font-weight
 font-variant

62 BY Ins Abdela A.
Font…
Font Family
 The font family of a text is set with the font-family
property.
 Note: If the name of a font family is more than one word,
it must be in quotation marks, like font-family: "Times
New Roman".
 More than one font family is specified in a comma-
separated list:

63 BY Ins Abdela A.
Font…
 Times New Roman
Georgia
 Arial
Verdana
 Courier New
Lucida Console
 Monospace
 Sans-serif
 Eg:
p{
font-family:"Times New Roman", Times, serif;
}
64 BY Ins Abdela A.
Font…
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)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
65 BY Ins Abdela A.
Font
Font Size
 The font-size property sets the size of the text.
 Setting the text size with pixels, gives you full control over the
text size:
h1 {font-size:40px;}
Eg: (16px=1em)
h2 {font-size:30px;}
p {font-size:14px;}

 font-style: style {normal, italic, oblique}


 font-weight: weight {normal, bold, bolder, lighter, 100, 200, …}
 font-size: size
 font-family: font_list (in order of precedence, separated by comma)

66 BY Ins Abdela A.
Borders
 Box model
 describes the rectangular boxes that are generated for
elements

67 BY Ins Abdela A.
box model…
 Margin - Clears an area around the border.
 The margin does not have a background color, it is
completely transparent
 Border - A border that goes around the padding and
content.
 The border is affected by the background color of the
box
 Padding - Clears an area around the content.
 The padding is affected by the background color of the
box
 Content - The content of the box, where text and
images appear
68 BY Ins Abdela A.
Box model…
Width and Height of an Element
 Important: When you set the width and height properties
of an element with CSS, you just set the width and height of
the content area.
 To calculate the full size of an element, you must also add
the padding, borders and margins.
 The total width of the element in the example below is
300px
width:250px;
padding:10px;
border:5px solid gray;
margin:1
69 BY Ins Abdela A.
Width and Height…
 The total width of an element should be calculated like
this:
Total element width
width + left padding + right padding + left
border + right border + left margin + right
margin
 The total height of an element should be calculated like
this:
Total element height
height + top padding + bottom padding + top
border + bottom border + top margin +
bottom margin
70 BY Ins Abdela A.
Margin
Margin properties: set the top, right, bottom, and left
margin of a box.
 margin-top
 margin-right
 margin-bottom
 margin-left
 margin
 Eg: H1 { margin-top: 2em }

71 BY Ins Abdela A.
Margin …
 The margin property is a shorthand property for
setting margin-top, margin-right, margin-
bottom and margin-left at the same place in
the style sheet.
 (top->right->bottom->left)
 If there is only one value, it applies to all sides.
 If there are two values, the top and bottom
margins are set to the first value and the right and
left margins are set to the second.
72 BY Ins Abdela A.
Margin…
 If there are three values, the top is set to the first
value, the left and right are set to the second, and
the bottom is set to the third.
 If there are four values, they apply to the top, right,
bottom, and left respectively.
 Eg:
 1) BODY { margin: 2em } /* all margins set to 2em */
 2) BODY { margin: 1em 2em } /* top & bottom = 1em,
right & left = 2em */
 3) BODY { margin: 1em 2em 3em } /* top=1em,
right=2em, bottom=3em, left=2em */
73 BY Ins Abdela A.
Margin…
 The last rule of the example above is equivalent to the
example below:
 BODY {
 margin-top: 1em;
 margin-right: 2em;
 margin-bottom: 3em;
 margin-left: 2em; /* copied from opposite side
(right) */
 }

74 BY Ins Abdela A.
Border properties
 These properties set the width of the top, right,
bottom, and left border of a box

 Border properties
 border-top-width ={thin,thick,medium,length}
 border-right-width
 border-bottom-width
 border-left-width
 border-width
 Border width
75 BY Ins Abdela A.
Border…
 The border's thickness has an explicit value. Explicit
border widths cannot be negative
Eg:
H1{ border-width: thin } /* thin thin thin thin */
H1 { border-width: thin thick } /* thin thick thin thick */
H1 { border-width: thin thick medium }
 Border color
 border-top-color
 border-right-color
 border-bottom-color
 border-left-color
 border-color
76 BY Ins Abdela A.
Border…
 border-style
 The border-style property specifies what kind of border to
display
 None of the border properties will have ANY effect unless the
border-style property is set!
 border-style values:
 none: Defines no border
 dotted: Defines a dotted border
 dashed: Defines a dashed border
 solid: Defines a solid border
 double: Defines two borders. The width of the two borders are
the same as the border-width value
77 BY Ins Abdela A.
Border style values…
 groove: Defines a 3D grooved border. The effect depends on the
border-color value
 ridge: Defines a 3D ridged border. The effect depends on the
border-color value
 inset: Defines a 3D inset border. The effect depends on the
border-color value
 outset: Defines a 3D outset border. The effect depends on the
border-color value

78 BY Ins Abdela A.
Border style…
 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;
}
 The example above can also be set with a single property:
 Example
border-style:dotted solid;

79 BY Ins Abdela A.
Border-style property
 The border-style property can have from one to four values.
 border-style:dotted solid double dashed;
 top border is dotted
 right border is solid
 bottom border is double
 left border is dashed
 border-style:dotted solid double;
 top border is dotted
 right and left borders are solid
 bottom border is double
 border-style:dotted solid;
 top and bottom borders are dotted
 right and left borders are solid The border-style property is used in the
 border-style:dotted; example above. However, it also works with
border-width and border-color.
 all four borders are dotted
80 BY Ins Abdela A.
Border - Shorthand property
 To shorten the code, it is also possible to specify all the individual
border properties in one property.
 This is called a shorthand property.
 The border property is a shorthand for the following individual
border properties:
 border:<border-width>|<border-style>|<color>
 The 'border' property is a shorthand property for setting the
same width, color, and style for all four borders of a box.
 border-width
 border-style (required)
 border-color
Example border:5px solid red;

81 BY Ins Abdela A.
</style>
Example
</head>
<!DOCTYPE html> <body>
<html> <p class="none">No border.</p>
<head> <p class="dotted">A dotted border.</p>
<style> <p class="dashed">A dashed border.</p>
p.none {border-style:none;} <p class="solid">A solid border.</p>
<p class="double">A double border.</p>
p.dotted {border-style:dotted;}
<p class="groove">A groove border.</p>
p.dashed {border-style:dashed;}
<p class="ridge">A ridge border.</p>
p.solid {border-style:solid;} <p class="inset">An inset border.</p>
p.double {border-style:double;} <p class="outset">An outset border.</p>
p.groove {border-style:groove;} <p class="hidden">A hidden border.</p>
p.ridge {border-style:ridge;} </body>
</html>
p.inset {border-style:inset;}
p.outset {border-style:outset;}
p.hidden
82 {border-style:hidden;} BY Ins Abdela A.
Border…
 Unlike the shorthand 'margin' and 'padding' properties, the
'border' property cannot set different values on the four
borders. To do so, one or more of the other border
properties must be used.
 For example, the first rule below is equivalent to the set of
four rules shown after it:
P { border: solid red }
P{
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
83 } BY Ins Abdela A.
Positioning
 The CSS positioning properties allow you to position an element
 There are four different positioning methods.
 Static
 Relative
 Absolute
 Fixed
position:static #div { position:static; }
 default positioning for all elements
 the element is not positioned and occurs where it normally would
in the document.
 Normally you wouldn't specify this unless you needed to override
a positioning that had been previously set.
84 BY Ins Abdela A.
Position…
position:relative
 Allow to use top or bottom, and left or right to move the
element relative to where it would normally occur in the
document.
 Let's move div down 20 pixels, and to the left 40 pixels:
#div { position:relative; top:20px; left:-40px; }
position:absolute
 the element is removed from the document and placed
exactly where you tell it to go.
 Let's move div a to the top right of the page:
#div { position:absolute; top:0; right:0; width:200px; }
85 BY Ins Abdela A.
Position…
Fixed Positioning
 An element with fixed position is positioned relative to the
browser window.
 It will not move even if the window is scrolled:
 Example
 p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
86 BY Ins Abdela A.
Position…
Overlapping Elements
 When elements are positioned outside the normal flow, they can overlap
other 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:
 Example
 img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

87 BY Ins Abdela A.
Example
<!DOCTYPE html>
<html>
<head><style>
img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
</style></head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140" />
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
88 BY Ins Abdela A.
CSS Lists
 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
List
 In HTML, there are two types of lists:
 unordered lists - the list items are marked with bullets
 ordered lists - the list items are marked with numbers or
letters
 With CSS, lists can be styled further, and images can be used as
the list item marker.
89 BY Ins Abdela A.
CSS List…
 Different List Item Markers
 The type of list item marker is specified with the list-
style-type property:
 Example
 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;}

90 BY Ins Abdela A.
Example <ul class="b">
<li>Coffee</li>
<!DOCTYPE html>
<li>Tea</li>
<html>
<li>Coca Cola</li>
<head> </ul>
<style>
ul.a {list-style-type:circle;} <p>Example of ordered lists:</p>
ul.b {list-style-type:square;} <ol class="c">
ol.c {list-style-type:upper-roman;} <li>Coffee</li>
ol.d {list-style-type:lower-alpha;} <li>Tea</li>
</style> <li>Coca Cola</li>
</head> </ol>
<body>
<ol class="d">
<p>Example of unordered lists:</p>
<li>Coffee</li>
<ul class="a">
<li>Tea</li>
<li>Coffee</li> <li>Coca Cola</li>
<li>Tea</li> </ol>
<li>Coca Cola</li> </body>
</ul > </html>
91 BY Ins Abdela A.
List…
 An Image as The List Item Marker
 To specify an image as the list item marker, use
the list-style-image property:
 Example
 ul
{
list-style-image: url(‘bullet1.jpg');
}

92 BY Ins Abdela A.
List…
 CSS list-style-position Property
 The list-style-position property specifies if the list-item markers
should appear inside or outside the content flow.
 The list-style-position property specifies if the list-item markers
should appear inside or outside the content flow.
Inside Indents the marker and the text. The bullets
appear inside the content flow

Outside Keeps the marker to the left of the text. The bullets
appears outside the content flow. This is default

93 BY Ins Abdela A.

You might also like