Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
10 views

Chap2 CSS

CSS

Uploaded by

wmvv11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views

Chap2 CSS

CSS

Uploaded by

wmvv11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 38

1

Faculty of
Computer and
Information
Sciences
Information Technology
Department
Web Systems and
Technologies
IT 481 T

Lecture 2: CSS

2
Introduction
• Cascading Style Sheets (CSS), is a design language
• Intended to simplify the process of making web pages
presentable.
• Using CSS, we can control the color of the text, the style of
fonts, the spacing between paragraphs, what background
images or colors are used
• Most commonly, CSS is combined with the markup languages
such as HTML

3
Syntax
• A style rule is made of three parts −
– Selector − an HTML tag at which a style will be applied. (<h1>,
<table> <p> …).
– Property - a type of attribute of HTML tag. (color, border, …).
– Value - Values are assigned to properties

4
Colors
• There are several ways to specify colors in CSS.
• The two most efficient ways are hexadecimal and named colors.
• Hexadecimal colors come in two flavors: RGB triplets and shorthand.

https://www.w3schools.com/Colors/colors_hexadecimal.asp

5
Shorthand Hex Colors
• RGB triplets can be abbreviated if each of the Red, Green, and
Blue hex pairs are the same.
• We can abbreviate each color channel using one character
instead of two identical characters.
• #ffcc00 becomes this: #fc0
• .orange {color:#ff6600;}
becomes this: .orange {color:#f60;}

https://www.w3schools.com/colors/colors_names.asp
6
Selectors
• We can define selectors in various ways:
– Type selectors
– Descendant selectors
– Class selectors
– ID selectors
– Attribute selectors

7
Type Selectors
• Sometimes referred to as an Element Type Selector
• Selects all elements with the specified element name
h1 { color: #36CFFF; }
 to give a color to all headings of size 1

<body>
<h1>This an h1 element</h1>
<h2>This an h2 element</h2>
</body>

8
Descendant Selectors
• To apply a style rule to a particular element only when it lies
inside a particular element.
p em { color: red; }
 this style rule will apply to <em> element only when it lies
inside <p> tag.

<p>You <em>have</em> to hurry up!</p>


<h3>We <em>cannot</em> live like this.</h3>

9
Class Selectors
• All the elements having that class will be formatted according
to the defined rule.
• Example
.black { color: #000000; }
.bold {font-weight: bold;}
 This rule renders the content in black for every element with
class attribute set to black in our document
• We apply more than one class selectors to given element.
<p class="black bold">
This para will be styled by the classes black and bold.
</p>
<div class=black></div>
10
ID Selectors
• We can define style rules based on the id attribute of the
elements. All the elements having that id will be formatted
according to the defined rule.
• Example 1:
#black { color: #000000; }
<div id=black></div>
 This rule renders the content in black for every element
with id attribute set to black
• Example 2:
h1#black { color: #000000; }
 This rule renders the content in black for only <h1> elements
with id attribute set to black. <h1 id=black></h1>
11
Exercise
• Explain the following selector
#black h2 { color: #000000; }

12
Exercise
• Explain the following selector
#black h2 { color: red; }

 All level 2 headings will be displayed in red color when those


headings will lie with in tags having id attribute set to black.

<div id=black>
<h2> I am a heading</h2>
</div>
<h2 > my heading </h2>

13
Attribute Selectors
• We can also apply styles to HTML elements with
particular attributes
• Example:
input[type="text"]{ color: red; }
will match all the input elements having a type
attribute with a value of text
<input type=text name=first>

img[src="flower.jpg"] {border: 1px solid gray;}


<img src=flower.jpg alt=Gift>

14
Multiple Style Rules
• To combine multiple properties and corresponding values into
a single block
• Example
h1 {
color: #36C; font-weight: normal;
text-transform: lowercase;
}

15
Grouping Selectors
• We can apply a style to many selectors if you like  separate
the selectors with a comma,
#content, .footer, img {
position: absolute;
left: 510px;
width: 200px; }

16
CSS inclusion
• There are 3 ways to associate styles with your
HTML document
1. Embedded CSS - <style> element
2. Inline CSS – style attribute
3. External CSS - The <link> Element

17
Embedded CSS
• Embedded CSS: to put your CSS rules into an HTML document
using the <style> element.
• This tag is placed inside <head>...</head> tags.
• Rules defined using this syntax will be applied to all the
elements available in the document.

18
<!DOCTYPE html>
<html> optional
<head>
<style type = "text/css" media = "all">
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; border: 3px
solid;}
</style>
</head>
<body>
<h1>This is a heading
</h1>
<p>This is a paragraph.
</p>
</body>
</html>

19
20
Inline CSS
• We use style attribute of any HTML element to define style
rules.
• These rules will be applied to that element only.
• Generic syntax:
<element style = "...style rules....">
<html>
<head>
</head>
<body>
<h1 style = "color:#36C;"> This is inline
CSS </h1>
</body>
</html>
21
External CSS
• The <link> element can be used to include an external
stylesheet file in a HTML document.
• An external style sheet is a separate text file
with .css extension.
• This file is included in any HTML document using <link>
element.
• Generic syntax of including external CSS file :

<head> <link rel= “stylesheet" type = "text/css" href = "..."


media = "..." /> </head>

22
rel Required. Specifies the relationship between the current
document and the linked document
type Specifies the media type of the linked document
href Specifies the location of the linked document
media Optional. Specifies on what device the linked document will
be displayed, possible values: all, print, screen, speech

23
Example
• Consider a simple style sheet file with a
name mystyle.css having the following rules −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: 0.1em;
text-transform: lowercase;
/* This is a css comment */ }

• include this file mystyle.css in any HTML document:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
24
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h3>I am formatted with a linked style sheet</h3>


<p>but not me !</p>
</body>
</html>

25
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px pixels (1px = 1/96th of 1in)
pt points (1pt = 1/72 of 1in)

em Relative to the font-size of the element (2em means 2 times the size of the
current font)

26
<head>
<style>
div {
font-size: 30px;
border: 1px solid black;
}

span { font-size: 0.5em; }


</style> </head>
<body>

<div>The font-size of the div element is set to 30px. <span>The span element
inside the div element has a font-size of 0.5em, which equals to 0.5x30 =
15px</span>.</div>

</body>
27
CSS Rules Overriding
• We have discussed 3ways to include style sheet rules
in a an HTML document.
• Here is the rule to override any Style Sheet Rule.
– Any inline style sheet takes highest priority. So, it will
override any rule defined in <style>...</style> tags or rules
defined in any external style sheet file.
– Any rule defined in <style>...</style> tags will override
rules defined in any external style sheet file.
– Any rule defined in external style sheet file takes lowest
priority, and rules defined in this file will be applied only
when above two rules are not applicable.
28
Fonts
• The font-family property is used to change the face of a font.
• The font-style property is used to make a font italic or
oblique.
• The font-variant property is used to create a small-caps
effect.
• The font-weight property is used to increase or decrease
how bold or light a font appears.
• The font-size property is used to increase or decrease the
size of a font.
• The font property is used as shorthand to specify a number
of other font properties.
29
Font Family – Font Style
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia,
garamond, or the default serif font </p>

•Font Style: Possible values are normal, italic and oblique.


<p style="font-style:italic;">
This text will be rendered in italic style </p>

30
Font Variant
• font-variant: possible values normal, inherit,
small-caps, initial

<p style="font-variant:small-caps;">
This text will be rendered in small caps style </p>

31
Font size
• The font-size property is used to control the size of fonts.
Possible values could be xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, larger, size in pixels or in %.
<p style="font-size:20px;">T
his font size is 20 pixels</p>
<p style="font-size:small;">
This font size is small</p>
<p style="font-size:large;">
This font size is large</p>

32
Font Weight
<p style="font-weight:bold;">T
his font weight is bold</p>

possible values: bold, normal,


bolder, lighter

33
Shorthand Property
• We can use the font property to set all the font properties at
once
• The font property is a shorthand property for: font-style, font-
variant, font-weight, font-size, font-family
• The font-size and font-family values are required
<p style="font:italic small-caps bold 15px
georgia;">
Applying all the properties on the text at once.
</p>

34
Links
• How to set different properties of a hyper link
using CSS.
– The :link signifies unvisited hyperlinks.
– The :visited signifies visited hyperlinks.
– The :hover signifies an element that currently has the
user's mouse pointer hovering over it.
– The :active signifies an element on which the user is
currently clicking.
• Usually, all these properties are kept in the
header part of the HTML document.
35
Links (cont.)
<style type="text/css">
a:link {color: #000000}
a:visited {color: #006600}
a:hover {color: #FFCC00}
a:active {color: #FF00CC}
</style>
• a:hover MUST come after a:link and a:visited in the CSS
definition in order to be effective.
• a:active MUST come after a:hover in the CSS definition

36
Book Chapter/ References:
Web Technologies: A Computer Science
Perspective by Jeffrey C. Jackson, Pearson
Education, chap 3, p. 121-157
THANK
YOU

You might also like