Scribd
Upload
5 views45 pages

Lecture 6

This document provides an introduction to Cascading Style Sheets (CSS), detailing how to create and apply classes, the differences between classes and IDs, and various CSS properties for styling text, links, backgrounds, and tables. It also covers font properties, text alignment, and pseudo-classes for links. Additionally, the document includes exercises for practical application of the concepts discussed.

Uploaded by

asifiqra1110
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
5 views45 pages

Lecture 6

This document provides an introduction to Cascading Style Sheets (CSS), detailing how to create and apply classes, the differences between classes and IDs, and various CSS properties for styling text, links, backgrounds, and tables. It also covers font properties, text alignment, and pseudo-classes for links. Additionally, the document includes exercises for practical application of the concepts discussed.

Uploaded by

asifiqra1110
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/ 45

Web Technology

Lecture 6
Emad Amjad
emad.amjad@numl.edu.pk

1
Introduction to Cascading Style-sheets
(CSS)

2
Using Classes…
• To create a class
– Tag class_name {style attributes} or
– .class_name {style attributes}
• To apply a style
– <tag CLASS=class_name>
<h1 CLASS=FirstHeader>IU</h1>

3
2.3 Using Classes…

4
2.3 Using Classes…

5
3.4 Difference between classes and Id,s
• you can’t have more than one tag with the
same ID value
• You can apply the same Class value to multiple
document tags
• Classes or Id?
• use ID's for any elements that are simply used once on a
page
OR
• only use classes to style websites, but, when you have to
use an element in JavaScript, use an identifier

6
<html> .main {
<head> background-color: #FFAFA4
</head> }
<body>
<div class="main"> #demo {
<h3>Welcome to Educative! background-color: #DEDAF7
</h3>
}
<p id="demo">Sample parag
raph with an ID</p>
<p> Sample paragraph with
no ID</p>
</div>
</body>
</html> 7
CSS properties

8
Outline
• Font properties
• Controlling text with CSS
• Styling links
• Styling background
• Styling tables

9
1. CSS properties
• CSS works by allowing you to
associate rules with the
elements that appear in a web
page
• These rules govern how the
content of those elements
should be rendered

10
1. CSS properties…
• A rule consists of
– A selector: element or elements the declaration
applies to
– Declaration: how the elements referred to in the
selector should be styled
• property: which is the property of the selected
element
• value: which is a specification for this property

11
1. CSS properties…
• To control the presentation of an element,
you need to know the corresponding
properties
• Properties with related functionalities are
grouped together
– Example:
• Properties to control the presentation of text

12
2. Font properties
• Several properties allow you to control the
appearance of text in your documents
• These properties directly affect the font and
its appearance

13
2. Font properties…
• Common font properties:
– font-family
– font-size
– font-weight
– font-style
– font-variant

14
2. Font properties…
• font-family:
– Specifies the typeface or family of font that
should be used
• Common values:
– Arial, Courier/Courier New, Georgia,
Times/Times New Roman and Verdana
• Example:
– H1{font-family:arial}

15
2. Font properties…
• font-size:
– Specifies the size of a font
• Common values:
– In pixels (12px,20px etc.)
– Absolut size (small, medium, large, x-large etc.)
• Example:
– H1{font-size:20px}

16
2. Font properties…
• font-weight:
– Specifies whether the font should be bold or
normal
• Common values:
– Normal, bold, bolder, lighter
– 100, 200, 300, 400, 500, 600, 700, 800, 900
– Example:
– H1{font-weight:bold}

17
2. Font properties…
• font-style:
– Specifies whether the font should be normal,
italic or oblique
• Common values:
– Normal, italic
– Example:
– H1{font-style:italic}

18
2. Font properties…
• font-variant:
– Specifies whether the font should be normal or
small-caps (smaller version of upper case)
• Common values:
– Normal, small-caps
– Example:
– H1{font-variant:small-caps}

19
2. Font properties…
selector

Font properties

End of CSS rule

20
Example

21
3. Text properties
• color
• text-align
• vertical-align
• text-decoration
• text-transform
• word-spacing
• letter-spacing
• text align Last
22
3. Text properties
• color:
– specifies the color of the text
– P{color : green}
• text-align:
– horizontal alignment of the text
– Left, right, center or justify
• vertical-align:
– Vertical alignment of the text
– Sub, super, top, middle, bottom
23
3. Text properties
• text-decoration:
– specifies the whether the text should be
– underline, overline, line-through
• text-transform:
– text should be lowercase, uppercase or capitalized
• letter-spacing:
– Specifies the space between letters
– H1{letter-spacing:3px}

24
3. Text properties
• word-spacing:
– Specifies the space between words
– H1{word-spacing:4px}
• Text Align Last
– The text-align-last property specifies how to align
the last line of a text.
– text-align-last: justify, center, right;

25
3. Text properties

Basic properties

Class declaration

Class properties

Second class properties

26
Example

27
3. Styling Links
• color :
– Changes the color of the links
• background-color :
– Highlights the link, as if it had been highlighted
with a highlighter pen
• text-decoration :
– Underline, line-through, over-line, blink

28
3. What is Pseudo Classes?
• A pseudo-class can be defined as a keyword which is combined
to a selector that defines the special state of the selected
elements.
• It is added to the selector for adding an effect to the existing
elements based on their states.
• For example, The ":hover" is used for adding special effects to
an element when the user moves the cursor over the element.
Syntax:
selector: pseudo-class
{
property: value;
}
29
3. Styling links…
• Pseudo-classes of links:
• Link:
– Styles for links in general
• Visited:
– Styles the links which are already visited
• Hover:
– Styles when some on hovering over a link
• Active:
– Styles the links when a links is being clicked
30
3. Styling links…

a tag style

Link settings

Visited settings

Hover settings

31
3. Styling links…

Link added

32
4. Styling Background
• background-color:
– Specifies the background color
• background-image:
– Specifies the background image
• background-repeat:
– Specifies whether the image should repeat or not
• background-position:
– Where an image should be positioned

33
Example

34
5. Styling tables
• text and font
• vertical – align
• width
• height
• background - color
• background - image

35
5. Styling tables
• border :
• border-style (solid, dashed, doted, double etc.)
• border-color
• border-bottom (solid, dashed, doted, double
etc.)
• padding
• Padding-left
• Padding-right
• Padding-top
• padding-bottom
36
5. Styling tables…

Table settings

Th settings

Td settings

Tr settings

37
5. Styling tables…

38
5. Navigation bar
• Having easy-to-use navigation is important for any
web site.
• With CSS you can transform boring HTML menus
into good-looking navigation bars.
• A navigation bar needs standard HTML as a base.
• A navigation bar is basically a list of links, so using
the <ul> and <li> elements makes perfect sense:

39
5. Example Example

40
5. Cont…

41
Exercise
<html>
<head>
<style>
• Change the color of all
</style> <p> elements to "red".
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

42
Exercise
<html>
<head>
<style> • Change the color of the
element with id="para1", to
</style>
"red".
</head>
<body>

<h1>This is a Heading</h1>
<p id="para1">This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
43
Exercise
<html>
<head>
<style>
• Change the color of all elements
</style>
with the class "colortext", to
</head> "red".
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<p class="colortext">This is another
paragraph.</p>
<p class="colortext">This is also a
paragraph.</p>
</body>
</html>

44
Exercise
<html>
<head>
<style> • Change the color of all <p> and <h1>
elements, to "red". Group the selectors
to minimize code.
</style>
</head>
<body>

<h1>This is a heading</h1>
<h2>This is a smaller heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>
45

You might also like