Scribd
Upload
105 views26 pages

Chapter 3

The document summarizes key aspects of cascading style sheets (CSS). It begins with an outline of topics to be covered, including CSS overview, using CSS, and style properties. It then discusses CSS comments and the three ways to insert CSS - inline, internal, and external style sheets. It also covers CSS selectors like ID and class, the cascading order of multiple styles, and important CSS properties like background, text, font, and others to control styling of HTML elements.

Uploaded by

Kidus Seleshi
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
105 views26 pages

Chapter 3

The document summarizes key aspects of cascading style sheets (CSS). It begins with an outline of topics to be covered, including CSS overview, using CSS, and style properties. It then discusses CSS comments and the three ways to insert CSS - inline, internal, and external style sheets. It also covers CSS selectors like ID and class, the cascading order of multiple styles, and important CSS properties like background, text, font, and others to control styling of HTML elements.

Uploaded by

Kidus Seleshi
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/ 26

Chapter 3: cascading style sheet

By Azmeraw D.

8/8/23
Outline
 CSS overview
 Using CSS
 Style properties

08/08/2023 Azmeraw D 2
Outline
 CSS stands for Cascading Style Sheets
 Style defines how HTML elements will be displayed
 A CSS rule has two main parts: a selector, and one or more
declarations & each declaration consists of a property and a
value.

CSS Comments
 A CSS comment begins with "/*", and ends with "*/“
3
Using CSS
 There are three ways of inserting a style sheet:
 Inline Style Sheet
 Internal/document level style sheet
 External style sheet
Inline Style Sheet
 Is defined inside a tag and applies only to the contents of that tag.
 For example
<H1 style="color:blue;font-style=italic">The first heading</H1>
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
 Using in-line styles is not very efficient, as the styles are spread
throughout the document and are thus difficult to maintain. 4
Internal/Document level style sheet

 Can be placed inside the HEAD of a HTML document and is better than in-
line styles because it puts all the styles in one place.
 Are enclosed within the <STYLE> and </STYLE> tags. The open tag should
contain type=“text/CSS” attribute to tell the browser what type of style
being used.
 The styles defined inside the style tags will affect the whole document. So, to
make all text inside H1 tags appear blue and in italics, the following can be
used:
<HEAD>
<STYLE type="text/css">
<!--
H1 { color:blue; font-style=italic}
-->
</STYLE> 5
External Style Sheet
 It is a text file that is saved with a .css extension. It should not contain html tag.
 It is useful to change the look of the entire website by changing single CSS file. For
example Heading.css
H1 { color:blue; font-style:italic}
H2 { color:blue; font-style:italic}
 To link a style sheet to the web page, use the link tag, which must be inside the header. The
attributes of the link tag are:
 rel – describes the relationship of the link – must be 'stylesheet'
 type – the type of the style sheet – we are using 'text/css'
 href – the URL of the style sheet eg. Heading.css
 title – this is a name for the style sheet, can be any text.
<HEAD>
<LINK rel=stylesheet type="text/css" href=“Heading.css" title=“Head">
</HEAD> 6
Multiple Styles Will Cascade into One

Cascading order
Generally speaking we can say that all the styles will "cascade" into a new
"virtual" style sheet by the following rules, where number four has the highest
priority:
 Browser default
 External style sheet
 Internal style sheet (in the head section)
 Inline style (inside an HTML element)
 So, an inline style has the highest priority, which means that it will override a
style defined inside the <head> tag, or in an external style sheet, or in a
browser (a default value).
 Note: If the link to the external style sheet is placed after the internal style
7
CSS Id
 CSS allows you to specify your own selectors called "id" and "class".
 The id selector is used to specify a style for a single, unique element.
 The id selector uses the id attribute of the HTML element, and is defined with a "#".
Example
#para1
{
text-align:center;
color:red;
}
 To apply these styles in the body of the page:
<p id=“para1”>This is CSS id</p>
 Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.
8
CSS Classes

Tag-Specific Classes
 Creates different sets of styles that can be applied to different occurrences of a
single tag. For example, if you wish to have a two different paragraph styles
to use in your web pages – one that is centred and italic and another that is
left-aligned but indented by a certain amount.
 Style classes for a particular tag are defined by putting a class name after the
tag name, separating them by a full stop.
P.centred { font-style:italic; text-align: center; }
P.normal { text-align=left; margin-left=0.5cm;}
 To apply these styles in the body of the page:
<P class="centred">This is a centred paragraph in italics</P>
<P class="normal">This is a left-aligned paragraph, indented by 0.5 cm</P>
9
Generic Classes
 A style class can also be generic – which means it can be applied to
any tag.
 To define a generic class, the tag name is omitted.
For example: .normal
{
Font-family:verdana,arial;
font-size:12pt;
color:black;
}
 To apply these styles in the body of the page:
<p class="normal">This is normal text</p>
 The benefit of defining generic classes is that they can then be used in different
tags. For example, the normal class above could be used on a P tag or in a10
Pseudo-Classes
 Are used to define the styles for the appearance of links (A tags). A link has three
states – unvisited (before it has been clicked), active (when the mouse is
hovered over the link) and visited (after it has been clicked on).
 The default appearance for links is blue underlined text for unvisited links and
purple underlined text for visited links. To change these defaults, you can
define the following style pseudo-classes
A:link {color:red;} /*style for unvisited links - red */
A:hover {color:red; font-weight:bold;} /* style for active links – bold and red */
A:visited {color:green} /* style for visited links - green */
 Pseudo-classes and other classes can be mixed For example: A.plain:visited
{text-style: normal}
<a href='http://wku-server/IT.html" class="plain">Plain link</a>
11
Style Properties

12
CSS Background

 CSS background properties are used to define the background effects of an element.
 CSS properties used for background effects:
 background-color(can be name like “red”, RGB value such as(250,0,0) or hexa value like
“#ff0000”
 background-image
 background-repeat
Example:
 background-attachment h1 {background-color:#6495ed;}
 background-position body {background-color:#b0c4de;}
OR
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
background-position:right top;
} 13
CSS Text
Text-Color
 used to set the color of the text.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
Text-Align
 used to set the horizontal alignment of a text. Can be center, left, right and justified
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
Text-Decoration
 used to set or remove decorations from text. Mostly used to remove underlines from links for
design purposes.
h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;} 14
Text-Transform
 used to specify uppercase and lowercase letters in a text.
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
Text -Indent
 used to specify the indentation of the first line of a text.
p {text-indent:50px;}

15
CSS Font

 CSS font properties define the font family, boldness, size, and the style of a text.
Font-Family
 In CSS, there are two types of font family names:
 generic family - a group of font families with a similar look (like "Serif" or "Monospace")
 font family - a specific font family (like "Times New Roman" or "Arial")
 The font-family property should hold several font names as a "fallback" system.
 Start with the font you want, and end with a generic family, to let the browser pick a similar
font in the generic family, if no other fonts are available.
 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:
Example
p{font-family:"Times New Roman", Times, serif;}
16
Font-Style
 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
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Font-Size
 sets the size of the text.
 If you do not specify a font size, the default size for normal text, like paragraphs, is
16px(16px=1em).
h1 {font-size:40px;}/*size in pixel*/
h2 {font-size:1.875em;} /* 30px/16=1.875em */ 17
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
 The type of list item marker is specified with the list-style-type property:
Example
ul.a {list-style-type: circle;}/*Unordered list*/
ul li {list-style-type: square;} /*Unordered list*/
An Image as The List Item Marker
 To specify an image as the list item marker, use the list-style-image
property:ul
{list-style-image: url('sqpurple.gif');} /*Image Unordered list*/
ol.b {list-style-type: upper-roman;} /*Ordered list*/ 18
Values for Ordered Lists
Value Description

Armenian The marker is traditional Armenian numbering

Decimal The marker is a number

decimal-leading-zero The marker is a number padded by initial zeros (01, 02, 03, etc.)

Georgian The marker is traditional Georgian numbering (an, ban, gan, etc.)

lower-alpha The marker is lower-alpha (a, b, c, d, e, etc.)

lower-greek The marker is lower-greek (alpha, beta, gamma, etc.)

lower-latin The marker is lower-latin (a, b, c, d, e, etc.)

lower-roman The marker is lower-roman (i, ii, iii, iv, v, etc.)

upper-alpha The marker is upper-alpha (A, B, C, D, E, etc.) 

upper-latin The marker is upper-latin (A, B, C, D, E, etc.)

upper-roman The marker is upper-roman (I, II, III, IV, V, etc.) 19


Nested lists
 An OL nested inside two OLs should use lower-alpha

OL OL LI {list-style-type: upper-roman}
OL OL OL LI {list-style-type: lower-alpha}
OL OL OL OL LI {list-style-type: decimal}

UL LI{list-style-type:square;}
UL UL LI{list-style-type:circle;}
UL UL UL LI{list-style-image:url(“image.jpg”);}

20
CSS Tables

 To specify table borders in CSS, use the border property.


table, th, td
{ border: 1px solid black;}
 Notice that the table in the example above has double borders. This is
because both the table, th, and td elements have separate borders.
Collapse Borders
 The border-collapse property sets whether the table borders are collapsed into
a single border or separated:
Example
table
{ border-collapse:collapse; }
table,th, td 21
Table Width and Height
 Width and height of a table is defined by the width and height properties.
table
{ width:100%; }
th
{ height:50px; }
Table Text Alignment
 The text in a table is aligned with the text-align and vertical-align properties.
Example: Horizontal alignment
td
{ text-align:right; }
Example: Vertical alignment
td
{ height:50px; vertical-align:top; }
22
Table Padding
 To control the space between the border and content in a table, use the padding property on td
and th elements:
Example
td
{ padding:15px; }
Table Color
 The example below specifies the color of the borders, and the text and background color of th
elements:
Example
table, td, th
{ border:1px solid green; }
th
{ background-color:green;
color:white;
}
23
CSS Links
 Links can be style with any CSS property (e.g. color, font-family, background-color).
 Special for links are that they 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 mouse over it
 a:active - a link the moment it is clicked
Example
a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
 When setting the style for several link states, there are some order rules:
 a:hover MUST come after a:link and a:visited
 a:active MUST come after a:hover
24
Common Link Styles
Text Decoration
 The text-decoration property is mostly used to remove underlines from links:
Example
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
Background Color
 The background-color property specifies the background color for links:
Example
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}
25
Thank You!

08/08/2023
? Azmeraw D 26

You might also like