Scribd
Upload
7 views

Topic 3 CSS

Uploaded by

SHARVENE SHARVENE
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Topic 3 CSS

Uploaded by

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

Topic 3:

Cascading Style Sheets (CSS) 1


Learning Outcome :
At the end of the lesson, students are able to :
Introduction to Cascading Style Sheets

Apply CSS

Implement CSS Selectors

Discover CSS properties

2
Using CSS in a web design
3.1
Introduction to Cascading
Style Sheets

3
Describe CSS
• CSS is a language that describes the style
of an HTML document.
• CSS describes how HTML elements
should be displayed.

4
Identify the advantages of CSS
Formatting information

Rich and uniform set

Reusability

Inheritance
5
Identify types of Style Sheets

Inline

Internal

External

6
Inline
• An inline style may be used to apply a unique
style for a single element.
• To use inline styles, add the style attribute to
the relevant element. The style attribute can
contain any CSS property.
• The example below shows how to change the
color and the left margin of a <h1> element:

7
Inline
CSS :

Output :

8
Internal
• An internal style sheet may be used if one single
page has a unique style.

• Internal styles are defined within the <style>


element, inside the <head> section of an HTML
page:

9
Internal
CSS : Output :

10
External
• With an external style sheet, you can change the look of
an entire website by changing just one file!

• Each page must include a reference to the external style


sheet file inside the <link> element. The <link> element
goes inside the <head> section

• An external style sheet can be written in any text editor.


The file should not contain any html tags. The style sheet
file must be saved with a .css extension.

11
CSS : External

Output :

12
External
mystyle.css :

13
The use of CSS :
In Web Design
• Provides efficiency in design and updates
• Can lead to faster page downloads
• Easy to work with

In Printing
• Color and layout considerations
• Hides unnecessary elements
14
Media Queries:
The @media rule, introduced in CSS2, made it possible to
define different style rules for different media types.

15
Advantages of CSS Web
Design
Consistency

Bandwidth Reduction

Search Engines

Browser Compatibility

Viewing Options 16
Consistency
By making one change to your website's
CSS style sheet, you can automatically
make it to every page of your website.
The bigger your website, the more time
CSS saves you. And not only does CSS
save time, it also ensures that your web
pages have consistent styling throughout
your site.

17
Bandwidth Reduction
When CSS separates your website's content from its design
language, you dramatically reduce your file transfer size. Your
CSS document will be stored externally, and will be accessed
only once when a visitor requests your website. In contrast,
when you create a website using tables, every page of your
website will be accessed with each visit. Your reduced
bandwidth needs will result in a faster load time and could
cut your web hosting costs.

18
Search Engines
CSS is considered a clean coding
technique, which means search engines
won't have to struggle to "read" its
content. Also, using CSS will leave your
website with more content than code –
and content is critical to your search
engine success.

19
Browser Compatibility
The recent arrival of Google® Chrome is further evidence
that today's Internet users have more browser options than
ever before, which makes browser compatibility a major
issue for your website. CSS style sheets increase your
website's adaptability and ensure that more visitors will be
able to view your website in the way you intended.

20
Viewing Options
Another common web design concern
is the increasing need to make
websites available for different media.
CSS can help you tackle this challenge
by allowing the same markup page to
be presented in different viewing styles
— for example, you may create a
separate style sheet for print or for a
mobile device.

21
If you're interested in making
your website load faster, look
better and rank higher,
consider using CSS to create a
new website.

22
CSS Selectors

23
CSS Selectors
• selectors are patterns used to
select the element(s) you want
to style.

24
Types of CSS Selectors
1 •Universal selector
2 •Type selector
3 •Class selector
4 •ID selector
5 •CSS Combinator
6 •Attribute Selector
7 •Query selector
25
8 •Nesting of selectors
Universal selector
• The * selector selects all elements.
• The * selector can also select all elements inside
another element

26
Universal selector

27
Type selector
• The CSS type selector matches elements by node
name.
• In other words, it selects all elements of the given
type within a document.
• CSS type selectors select every instance of an
element in an HTML page.

28
Type selector

29
Class Selector
• The .class selector selects elements with a specific
class attribute.
• To select elements with a specific class, write a
period (.) character, followed by the name of the
class.
• HTML elements can also refer to more than one
class

30
Class Selector

31
ID Selector
• The #id selector styles the element with the
specified id.

32
ID Selector

33
CSS Combinator
• A CSS selector can contain more than one simple
selector. Between the simple selectors, we can
include a combinator.
• There are four different combinators in CSS:
1. child selector (>)
2. descendant selector (space)
3. adjacent sibling selector (+)
4. general sibling selector (~)
34
Child Selector
The child combinator (>) is placed between two
CSS selectors. It matches only those elements
matched by the second selector that are the
children of elements matched by the first.

35
Child Selector

36
Descendant Selector
• CSS descendant selectors select an element which
is a descendant of another element.

• While writing descendant selectors, selectors must


be separated with "white space" combinator.

37
Descendant Selector

38
Adjacent sibling selector
• The adjacent sibling selector selects all elements
that are the adjacent siblings of a specified
element.

• Sibling elements must have the same parent


element, and "adjacent" means "immediately
following".

39
Adjacent sibling selector

40
General Sibling selector
The general sibling combinator (~) separates
two selectors and matches the second element only
if it follows the first element (though not necessarily
immediately), and both are children of the same
parent element.

41
General Sibling selector

42
Attribute selector
The [attribute] selector is used to select
elements with a specified attribute.

43
Attribute selector

1 [attribute] 5 [attribute^=value]

2 [attribute=value] 6 [attribute$=value]

3 [attribute~=value] 7 [attribute*=value]

4 [attribute|=value]

44
Attribute selector

45
Attribute selector
1 [attribute]
The [attribute] selector is used to
select elements with the specified
attribute.

syntax

46
Attribute selector

47
Attribute selector
2 [attribute=value]

The [attribute=value] selector is used to


select elements with the specified
attribute and value.
syntax

48
Attribute selector

49
Attribute selector
3 [attribute~=value]

The [attribute~=value] selector is used to


select elements with an attribute value
containing a specified word.

syntax

50
Attribute selector

51
Attribute selector

52
Attribute selector
4 [attribute|=value]

The [attribute|=value] selector is used to


select elements with the specified
attribute starting with the specified value.

syntax

53
Attribute selector

54
Attribute selector
5 [attribute^=value]

The [attribute^=value] selector matches


every element whose attribute value
begins with a specified value.

syntax

55
Attribute selector

56
Attribute selector
6 [attribute$=value]

The [attribute$=value] selector matches


every element whose attribute value ends
with a specified value.

syntax

57
Attribute selector

58
Attribute selector
7 [attribute*=value]

The [attribute*=value] selector matches


every element whose attribute value
containing a specified value.

syntax

59
Attribute selector

60
Query selector
• The querySelector() method returns the first
element that matches a specified CSS selector(s)
in the document.

• Note: The querySelector() method only returns


the first element that matches the specified
selectors.

• If the selector matches an ID in document that is


used several times (Note that an "id" should be
unique within a page and should not be used 61
more than once), it returns the first matching
element.
Query selector

62
Query selector

63
Query selector
Source Code :

64
Query selector
Output :

65
Query selector

66
Query selector
Source Code :

67
Query selector
Output :

68
Query selector

69
Query selector
Source Code :

70
Query selector
Output :

71
Nesting of selectors
• Nesting is used to call a particular child of parent
Element.
• If we are calling a P tag, all Para Tags will be
selected.
• We can Nest a particular tag of parent using
nesting.
• We use single space bar to relate child of that
72
particular element.
Nesting of selectors

In Example above, all paragraphs are assigned red color, but para inside header class is 73
assigned color white and background gray.
CSS Properties

74
CSS Properties

75
CSS Properties
BACKGROUND PROPERTIES
BLOCK PROPERTIES
BOX MODEL PROPERTIES
LIST PROPERTIES
BORDER PROPERTIES
76

POSITIONING PROPERTIES
Background Properties
• The CSS background properties are used to
define the background effects for elements.
• CSS background properties:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
77
5. background-position
Background Properties
CSS Background Color

The background-color property specifies the background


color of an element.
With CSS, a color is most often specified by:
• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)“

You can set the background color for any HTML elements.
Example: <h1>, <p>, and <div> elements will have different
background colors.
78
Background Properties
Output :

79
Background Properties
CSS :

80
Background Properties
CSS 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 can also be set for specific


elements, like the <p> element.

81
Background Properties

CSS :

Output :

82
Background Properties

CSS :

Output :

83
Background Properties
CSS Background Repeat

By default, the background-image property repeats an


image both horizontally and vertically.
Image repeated only horizontally use: background-
repeat: repeat-x;
CSS background-repeat: no-repeat; will show the
background image only once specified by the
background-repeat property.
The background-position property is used to specify the
position of the background image.
84
Background Properties

85
Background Properties
CSS :

Output :

86
Background Properties

CSS Background Attachment

The background-attachment property specifies whether


the background image should scroll or be fixed (will not
scroll with the rest of the page).

CSS Background Position

The background-position property specifies whether the


background image should be top, bottom, right, left.

87
Background Properties
CSS :

specify that the background


image should be fixed. change the position of the
image, so that it does not
disturb the text too much. 88
Background Properties
CSS :

Specify that the background


image should scroll with the change the position of the
rest of the page. image, so that it does not
disturb the text too much. 89
Background Properties
Use the shorthand property to set the background properties in one
declaration.

CSS :

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 90
other ones are in this order. Example above do not use the background-
attachment property because does not have a value.
Background Properties:
Exercise

Use the shorthand background property to set any


background image, repeat vertically, in the top right corner.

91
Block
CSS Layout
Properties
- display:
CSS Layout - display:
display: inline-block • allows to set a width and
height on the element
• the top and bottom
margins/paddings are
respected
display: inline the top and bottom
margins/paddings are NOT
respected
display: block a line-break after the 92
element
Block Properties
Background Properties
CSS :

Output :

93
Block Properties
Background Properties

CSS : Output :

94
Block Properties:
Background Exercise
Properties

Write the code to display the output that showed below:

Hint: Horizontal Navigation Links

95
Box Model
• The CSS box model is essentially a box that wraps around
every HTML element. It consists of: margins, borders, padding,
and the actual content.
Border - A
border that
Margin -
goes around
Clears an
the padding
area outside
and content
the border.
The margin is
transparent

Content –
Padding -
The content
Clears an area
of the box,
around the
where text 96
content. The
and images
padding is
appear
transparent
Box
BoxModel
Model

CSS :

Output :

97
List Property
• In HTML, there are two main types of lists:
1. unordered lists (<ul>) - the list items are marked
with bullets
2. ordered lists (<ol>) - the list items are marked
with numbers or letters

• 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 98
Add background colours to lists and list items
List
ListProperty
Properties
• The list-style-type property specifies the type of list item
marker
CSS :
Output :

99
List
ListProperty
Properties
CSS :

Output :

100
List Property
Position The List Item Markers
The list-style-position property specifies the position of the list-item
markers (bullet points).

"list-style-position: outside;" means that the bullet points will be


outside the list item. The start of each line of a list item will be
aligned vertically.
"list-style-position: inside;" means that the bullet points will be
inside the list item. As it is part of the list item, it will be part of the
text and push the text at the start.
The list-style-type:none property can also be used to remove the
markers/bullets. Note that the list also has default margin and
padding. To remove this, add margin:0 and padding:0 to <ul> or <ol>

101
List
ListProperty
Properties : others
list-style-position:
outside;

list-style-position:
inside;

list-style-
type:none;
102
List Property
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the
list properties in one declaration.

CSS :

103
List Property: Exercise

Create an unordered list of three popular books. The


bullet for each book must be a small image of the
book’s cover. Find the images on the web.

104
Border Properties
The CSS border properties allow you to specify the style, width, and
color of an element's border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:

• dotted - Defines a dotted border


• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• 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
• none - Defines no border
• hidden - Defines a hidden border
105
The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).
Border Properties
CSS :

<body>
<p class="dotted">A dotted border.</p>

Output :

106
Border Properties
CSS Border Width
The border-width property specifies the width of the four borders.

The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the
three pre-defined values: thin, medium, or thick.

CSS : Output :

107
Border Properties
CSS Border Width
Specific Side Widths
The border-width property can have from one to four values (for the top border,
right border, bottom border, and the left border)

CSS : Output :

108
Border Properties
CSS Border Color

The border-color property is used to set the color of the four borders.

The color can be set by:


name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"

CSS : Output :

109
Border Properties
CSS Border – Shorthand Property
To shorten the code, it is also possible to specify all the individual border
properties in one property.

The border property is a shorthand property for the following individual border
properties:
• border-width
• border-style (required) CSS :
• border-color

Can also specify all the individual border properties for just one side
CSS :

Output : 110
Positioning Properties
• The position property specifies the type of
positioning method used for an element.

• There are five different position values:

1. static CSS :
2. relative
3. fixed
4. absolute
5. sticky
111
Positioning Properties
Value Description
static Default value. Elements render in order, as they appear in the document flow.
Static positioned elements are not affected by the top, bottom, left, and right
properties.
absolute The element is positioned relative to its first positioned (not static) ancestor
element. However; if an absolute positioned element has no positioned
ancestors, it uses the document body, and moves along with page scrolling.
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20px" adds 20
pixels to the element's LEFT position. Setting the top, right, bottom, and left
properties of a relatively-positioned element will cause it to be adjusted away
from its normal position.
sticky The element is positioned based on the user's scroll position. A sticky element
toggles between relative and fixed, depending on the scroll position. It is
positioned relative until a given offset position is met in the viewport - then it
"sticks" in place (like position:fixed).
Note: Not supported in IE/Edge 15 or earlier. Supported in Safari from version 6.1
with a -webkit- prefix.

112
TEXT
STYLES
113
Text styles
• Text color • Letter spacing
• Text alignment • Line Height
• Text decoration • Text direction
• Text transform • Word spacing
• Text indentation • Text shadow

114
Text styles
Text color
• The color property is used to set the color of the text.
The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
CSS : Output :

115
Text styles
Text alignment
• The text-align property is used to set the horizontal
alignment of a text.
• A text can be left or right aligned, centered, or justified.
CSS : Output :

116
Text styles
Text decoration
• The text-decoration property is used to set or remove
decorations from text.
• The value text-decoration: none; is often used to remove
underlines from links:
CSS :
Output :

117
Text styles
Output :
Text decoration

CSS :

118
Text styles
Text transform
• The text-transform property is used to specify uppercase
and lowercase letters in a text.
• It can be used to turn everything into uppercase or
lowercase letters, or capitalize the first letter of each
word
CSS :
Output :

119
Text styles
Text indentation
• The text-indent property is used to specify the
indentation of the first line of a textn

Output :
CSS :

120
Text styles
Letter spacing
• The letter-spacing property is used to specify the space
between the characters in a text
CSS :
Output :

121
Text styles
Line Height
• The line-height property is used to specify the space
between lines Output :
CSS :

122
Text styles
Text direction

CSS :

Output :

123
Text styles
Word spacing
• The word-spacing property is used to specify the space
between the words in a text.
CSS : Output :

124
Text styles
Text shadow
• The text-shadow property adds shadow to text
• The following example specifies the position of the
horizontal shadow (3px), the position of the vertical
shadow (2px) and the color of the shadow (red)
CSS :

Output :

125
Menu System

126
Menu system
• Navigation Bar = List of Links

• A navigation bar needs standard HTML as a base.

• In our examples we will build the navigation bar


from a standard HTML list.

• A navigation bar is basically a list of links, so


using the <ul> and <li> elements makes perfect
127
sense
Vertical Menu
CSS :

Output :

128
Vertical Menu

• display: block; - Displaying the links as block


elements makes the whole link area clickable
(not just the text), and it allows us to specify the
width (and padding, margin, height, etc. if you
want)
• width: 60px; - Block elements take up the full
width available by default. We want to specify a
60 pixels width

129
Horizontal Menu
• There are two ways to create a horizontal navigation bar.
Using inline or floating list items.

float inline

130
Dropdown Menu
• https://www.w3schools.com/css/tryit.asp?filename=tryc
ss_dropdown_navbar

131
132

You might also like