Scribd
Upload
27 views

Chapter-3 CSS

The document provides an overview of CSS (Cascading Style Sheets) including what CSS is, the structure of CSS, and how to use CSS to style web pages. It explains that CSS is used to define styles for web elements like text color, font, and margins. The document also demonstrates how to write CSS selectors and declarations to style HTML elements with different properties and values.

Uploaded by

eliasferhan2333
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
27 views

Chapter-3 CSS

The document provides an overview of CSS (Cascading Style Sheets) including what CSS is, the structure of CSS, and how to use CSS to style web pages. It explains that CSS is used to define styles for web elements like text color, font, and margins. The document also demonstrates how to write CSS selectors and declarations to style HTML elements with different properties and values.

Uploaded by

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

Chapter-3 CSS

Web Workshop:
Part 2:CSS

Objectives:
- “What is CSS?”
- Structure of CSS
- How to use CSS in your webpage
What
Whatis isCSS?
CSS?(1)
CSS stands for “Cascading Style Sheets”

Cascading: refers to the procedure that


determines which style will apply to a
certain section, if you have more than one
style rule.
What
Whatis isCSS?
CSS?(2)
• CSS stands for “Cascading Style Sheets”

• Style: how you want a certain part of your page to


look.
• You can set things like color, margins, font, etc for
things like tables, paragraphs, and headings.
What
Whatis isCSS?
CSS?(3)

 CSS stands for “Cascading Style Sheets”

 Sheets: the “sheets” are like templates, or a set of


rules, for determining how the webpage will look.
Selector
CSS Rule
Declaration Block

body { font-family: Tahoma, Arial,


sans-serif;
color: black;
background: white;
margin: 8px;
}

Value
Attribute Name
CSS Color Specifier
• Predefined names:
white black red …
• 8-bit hexadecimal intensities for red, green, blue:
#ff0000
R G B
• 0-255 decimal intensities:
rgb(255,255,0)

R intensities:
• Percentage G B
rgb(80%,80%,100%)
How to write style rules
• Style has two parts: (1) selector and

(2) declaration.
• Selector: the HTML element you want to add style to.

<p> <h1> <table> etc


• Declaration: the statement of style for that element.
Made up of property and value.
Selector
Type Selector
 redefines the look of a specific tag
 A type selector matches every instance of the element
type in the document tree
E.g. body {background-color: #000000;}
1.Class Selector
– can apply to any tag
E.g.
.indent{margin-right:5%;margin-left: 5%;}
In HTML, <p class=“indent”>
Demonstration of class selector
<html>
<head>
<style>
.greet {
color: red;
text-align: left;
}
</style>
</head>
<body>
<H1 class= "greet"> WELCOME!!!</h1>
</body>
2. ID Selector
E.g. #myId {color: #38608A;}
• In HTML, <h1 id="myId">some text.
<html>
<head>
<style>
#greet {
color:purple;
font-family : arial;
}
</style>
</head>
<body>
<div id= "greet"> WELCOME!!!</div>
<p> Welcome Students!</p>
<div id="greet"> <p> We will learn CSS</p></div>
</body>
2. Group selector
– When several selectors share the same declarations,
they may be grouped into a comma-separated list.
–

– e.g. h1, h2, h3 {


font-family: Georgia;

}
• Example: Illustration of grouping id-selector
• <html>
<head>
<style>
#greet {
color: purple;
font-family : arial;
}
</style>
</head>
<body>
<div id= "greet"> WELCOME!!!</div>
<p> Welcome Students!</p>
<div id="greet"> <p> We will learn CSS</p></div>
</body>
Example
– <html>
<head>
<style>
h1, p {color : red;}
</style>
</head>
<body>
<h1> Welcome </h1>
<p> welcome Students </p>
</body>
3. Universal selector
– The universal selector, written "*", matches the
name of any element type.
– e.g.
* {border: 2px;}
4. Descendant Selector
– Sometimes, you want selectors to match an element that is the
descendant of another element in the document tree.
– (e.g., "Match those EM elements that are contained by an H1
element").
– Descendant selectors express such a relationship in a pattern.

– A descendant selector is made up of two or more selectors


separated by whitespace.

e.g. h1 em {color: blue;}


4. comments
• Comments are denoted within a style sheet like in
C++ programming.
• They do not work in the HTML code.
• <html>
<head>
<style>
b i {color : red;} // This will work for line 1 not for line 2
</style>
</head>
<body>
<b><i> Welcome </i></b> //line 1
<b> welcome Students </b> // line 2
</body>
</html>
When to use those selectors?
– Use “type selector” when you want to apply
certain style for all occurrences of a certain tag

– Use “ID selector” if you want to apply the style


for only one occurrence of a certain tag

– Use “class selector” if you want to apply the


style for many (but not all) occurrences of a
certain tag; OR if you want to apply the style
for more than one type of tags
When to use those selectors?
– Use “Grouping” When several selectors share
the same declarations

– Use “Universal selector” if you want all the


tags in your web documents have some
common style (for example, all tags don’t have
any margin)

– Use “Descendant selectors” if you want


selectors to match an element that is the
descendant of another element
How
Howtotowrite
writestyle
stylerules
rules(2)
Selector {declaration;}
Declaration = {property: value;}

Property: what aspect you want to change


ex: color, font, margins, etc.

Value: the exact setting for that aspect.


ex: red, italic, 40px, etc.
How
Howtotowrite
writestyle
stylerules
rules(2)
selector {property: value;}

Essentially means:

The thing I want to change


{the aspect of that thing I want to change:
what I want it to be;}
How
Howtotowrite
writestyle
stylerules
rules(3)
Selector {property: value;}

h1 {color: red;}

Means: Speaking of my heading1, I want the


text color to be red.
How
Howtotowrite
writestyle
stylerules
rules(3)
Selector {property: value;}

I want the color of the text in my paragraph to be


yellow.

p {color: yellow;}
This is the text in this paragraph.
How
Howtotowrite
writestyle
stylerules
rules(4)
Selector {property: value;}

h1 {color: yellow;
background-color: white;}
Means:
Speaking of my heading1, I want the text
color to be yellow and the background color
to be red.
How to write style rules

• I want the text color is green


How
Howtotowrite
writestyle
stylerules
rules(4)
Selector {property: value;}

I want the text color of my link to be red and the


background color to be yellow.

a { color: red;
background color:yellow;
}
This is my link
WhereThree types
do I put myofstyle
stylerules?

There are three types of style-rule-places


that we will cover:
- Inlined
- Internal or embedded Style Sheet
- External Style Sheet
a) Inlined example-1
<html>
<head><title>My Wonderful Example</title>
</head>
<body>
<p>What was I thinking?</p>
</body>
</html> Original html
code
a) Inlined example-2
<body>
<p style=“text-align: center; font-
weight: bold; color: yellow;”>What
was I thinking?</p>
</body>

What was I thinking?


b) Internal-1
<head><title>My Wonderful Example</title>
<style type=“text/css”>
body {
text-align: left;
font-family: trebuchet, verdana;
background-image: khl;
background-color: #cccccc;
}
</style>
</head>
b) Internal-2
<head><title>My Wonderful Example</title>
<style type=“text/css”>
body
{
text-align: left;
font-family: Trebuchet,
verdana;
}
</style>
</head>
Internal: Statement of style

This is a style
sheet (style type)
written (text) in
CSS language

<style type=“text/css”>
…
</style>
Internal: Brackets & Declaration

<style type=“text/css”> I want the “align


body text” property to be
given the value of
{ “left”
text-align: left;
font-family: trebuchet, verdana;
}
</style>
Demonstration of embedded style sheet
<html>
<head>
<title> Embedded CSS</title>
<style type="text/CSS">
body {
background-color:#ccffff;
}
h1 { color: purple; font-family: arial; font-size: 30 px; text-
transform: uppercase; text-align: left;}
</style>
</head>
<body>
<h1> This is an example of embedded CSS</h1>
<h1> B E </h1>
</body>
</html>
Demonstration of embedded style sheet for table
<style type="text/CSS">
body {
background-color:#ccffff;
}
h1 { color: purple; font-family: arial; font-size: 30 px; text-transform:
uppercase; text-align: left;}
</style>
</head>
<body>
<h1>Computer programming languages</h1>
<table border="1">
<tr>
<th>Web-tech</th>
<th>Object-Oriented</th>
</tr>
<tr>
<td>CSS</td>
<td>java</td>
</tr>
</table>
<p>Embedded CSS is better than Inline CSS</p>
c) External style sheet
• In external style sheets, the CSS files are kept
separately from an HTML document.
• External CSS file contains only CSS code and it is
saved with a “.css” extension.
• The CSS file is used as an external style sheet file
in HTML document by using a <LINK> tag
instead of <STYLE> tag.
• The <LINK> tag is placed in the <HEAD> section
of the HTML document.
• Advantage of External style sheet is that external
CSS is a “true separation” of style and content.
• It is easier to reuse CSS code in any separate file.
Syntax
<html>
<head><title>My Way</title>
<link rel="stylesheet“ href="http://www.wldu.edu/~myway.css"
type="text/css“>
</head>
<body> </body>
</html>
Link to a
separate css page
Attributes of <LINK> tag

1. rel
•It is used to specify a relationship of CSS with HTML
document.
•Its default relationship value is “style sheet”.

•Possible relationship values are stylesheet/alternate


stylesheet.
Attributes of <LINK> tag

2. type
•Type attribute is not used in META tag.

•It specifies which type of style language is


used.
•The value of the type attribute is “text/CSS”.
Attributes of <LINK> tag

3. href
•It points to the external style sheet file's URL.

•It specifies the path of the style sheet file which


is linked with the HTML document.

4. title
•It is optional.

•It indicates the name of the style sheet.


Attributes of <LINK> tag

5. media
•It specifies the medium on which style sheet
should be applied.
•Its default value is screen.

•The values can be screen/print/projection.


Example: Demonstration of external style sheet
NOTE: Save following • NOTE: Save following program as
program as external.css external.html and link above CSS file in it.

body { background:#ccffff;} <html>


h2,p { <head><title>Extenal style sheet
</title>
color: green;
<link rel= "stylesheet" type= "text/CSS"
font-family:arial; href="external.css">
text-align:center; </head>
} <body>
p i{ <h2> It is an example of External style
color: orange; sheet</h2>
<p class="ex"> This is a "true
border-style: solid;
separation" of style and content</p>
font-weight: lighter;
<p><i> External CSS </i> </p>
} </body>
.ex{color:purple}
CSS supports following basic font properties
1. Font-family
•This property sets the font for the text.
•It uses the font type such as Times new roman, Arial etc.
which are supported by all the browsers.
2. font-style
•This property is mostly used to specify italic text.
•This property has three values:
•Normal: It shows normal text.
•Italic: It show italic text.
•Oblique: It is similar to italic but has less support.
Conti…
3. font-variant

This property has two values:

1. normal

2. small-caps
•In this all lower case letters are converted to upper case letters.

•The converted upper case letters are shown in a smaller font


size than the original uppercase letters in the text.
Conti…
4. font-weight

This property has following possible values.


•normal

•bold

•bolder

•lighter

•100-900
Conti…
5. font-size
•This property sets the size of the text.

•The possible values of font size are:


normal

length like 10px, 14 pt etc.

Absolute like xx-small, medium, large, x-large, xx-large.

Relative like smaller, larger

Percentage like 80%, etc.


Conti…
<body>
<h2>This is an example of font property</h2>
<p class="fp">This paragraph shown in the verdana font</p>
<p class="fp1">This paragraph in italic</p>
<p class="fp2">This paragraph shows normal value of font-variant
property.</p>
<p class="fp3">This is the result of small-caps value</p>
<p class="fp4">It is a font weight property</p>
<p class="fp5">Font-weight lighter</p>
<p class="fp6">Font-weight bold</p>
<p class="fp7">The font weight is 800<p>
<p class="fp8">It is a font size property</p>
<p class="fp9">font-size xx-small</p>
<p class="fp10">font-size 30px</p>
</body>

</html>
Example: Font properties
<html> .fp5 {
<head> <title>External style sheet</title> font-weight: lighter;
<style type="text/css"> }
.fp { .fp6 {
font-family: verdana; font-weight: bold;
} }
.fp1 { .fp7 {
font-style:italic; font-weight: 800;
} }
.fp2 { .fp8 {
font-variant: normal; font-size: normal;
} }
.fp3 { .fp9 {
font-variant: small-caps; font-size: xx-small;
} }
.fp4 { .fp10 {
font-weight: normal; font-size: 30px; }
} </style>
</head>
CSS supports the following border properties
1. Border-style 2. Border-width
values for border-style properties : specifies the width of the four borders.
solid The values for border-width property
Double are:

Groove thick

dotted thin

dashed medium

inset or the give specific size in px, pt, cm,

outset em, etc.

ridge Note: The border-style property must be


defined to get the result of border-width.
hidden
Example: Demonstration of border properties
<head> .bd2{
<title>Extenal style sheet</title>
border-width:7px;
<style type="text/css">
border-top-style:double;
.bd {
border-width: 5px; border-right-style:dotted;
border-style: solid; border-left-style: double;
border-color:red;
border-bottom-style: groove;
width: 500px;
} border-top-color: red;

.bd1{ border-right-color: blue;


border-width: thick; border-left-color: green;
border-style: dotted solid
groove double; border-bottom-color:yellow;

border-color: green; width: 620px;


width:620px; }
}
.bd3{ border: 10px outset maroon;width:400px;}
Example: Demonstration of border properties
</head> <body> .
<p> <h2>The Example of border
property</h2></p>

<p class="bd"> You can give any style of


border like solid, groove etc</p>

<p class="bd1"> Here you can apply different


border style for each direction</p>

<p class="bd2">This is the another way to


define different border style and color</p>

<p class="bd3">This is the way to define


border property in single line</p>

</body>

</html>
CSS supports the following border properties
3. Border-color 4. Border-direction

Border colors are set by: The border direction values are: top/
Specifying a color name, like bottom/ right/ left

“orange”. Example:
Specifying hex value, like border-bottom-style: solid;
“#ff0000”. border-bottom-color: red;
Specifying RGB value, like border-bottom-width: 5 px;
“rgb(255,0,0)”. •border-All in one
It is used to create a uniform border.
•border: 10px outset green;
CSS Link Properties

The values for link property can be:

a:link - It defines the style for unvisited links.

a:visited - It defines the style for visited links.

a:active - It defines the style for active links.

a:hover - A link is hovered when the mouse moves over it.


<html> <head>
<body>
<style>
/* visited link */ <p><b><a href="color.html">This is a
a:visited {
link</a></b></p>
color: orange;
} <p><b>Note:</b> a:hover MUST come after
/* mouse over link */
a:hover {
a:link and a:visited in the CSS definition. The order

color: hotpink; is effective here.</p>


}
<p><b>Note:</b> a:active MUST come after
/* selected link */
a:active { a:hover in the CSS definition. The order is effective
color: blue;
here.</p>
}
</style> </body>
</head>
</html;
The end of Basic CSS!

You might also like