Holy Spirit University of Kaslik

(USEK)

Faculty of Arts and Sciences

CSC360 – Internet Technology

Spring 2023-2024
 Chapter 2:
Cascading Style Sheet CSS3
 Outline
• Introduction
• Syntax
• How to add CSS
• Multiple Style Sheets
• Cascading Order
• CSS Selectors
• CSS Comments
• CSS Measurement Units
• CSS Colors
• span element
• CSS Text
• CSS Borders
• CSS Padding
• CSS Backgrounds
• CSS Tables
• CSS Forms
• CSS Flexbox
• HTML Layout Elements
• CSS HTML Validations
USEK CSC360 3
 Introduction
• CSS is used to control the style of a web
document in a simple and easy way.

• CSS stands for "Cascading Style Sheet".

• CSS handles the look and feel part of a web
page.

• CSS saves a lot of work. It can control the layout

of multiple web pages all at once.

USEK CSC360 4
 Introduction
• The style definitions are normally saved in
external .css files.

• With an external stylesheet file, you can change

the look of an entire website by changing just
one file!

USEK CSC360 5
 Syntax
• CSS Syntax:

– The selector points to the HTML element you want

to style.
– The declaration block contains one or more
declarations separated by semicolons.
– Each declaration includes a CSS property name and
a value, separated by a colon.
– Declaration blocks are surrounded by curly braces.
USEK CSC360 6
 Syntax
• Example:
In this example all <p> elements will be center-aligned,
with a red text color:

– P is a selector in CSS (it points to the HTML element you want

to style: <p>).
– Color is a property, and red is the property value
– Text-align is a property, and center is the property value
USEK CSC360 7
 How to add CSS
• There are three ways of inserting a style sheet:
– External CSS
– Internal CSS
– Inline CSS

USEK CSC360 8
 How to add CSS
• External CSS:
 With an external style sheet, you can change the look of
an entire website by changing just one file!
 Each HTML page must include a reference to the external
style sheet file inside the <link> element, inside the head
section.

USEK CSC360 9
 How to add CSS
• External CSS:

USEK CSC360 10
 How to add CSS
• External CSS:
An external style sheet can be written in any text editor, and must
be saved with a .css extension.

USEK CSC360 11
 How to add CSS
• Internal CSS:
 An internal style sheet may be used if one single
HTML page has a unique style.
 The internal style is defined inside the <style>
element, inside the head section.

USEK CSC360 12
 How to add CSS
• Internal CSS:

USEK CSC360 13
 How to add CSS
• Inline CSS:
 An inline style may be used to apply a unique style
for a single element.

USEK CSC360 14
 Multiple Style Sheets
If some properties have been defined for the same
selector (element) in different style sheets, the value from
the last read style sheet will be used.
Ex1:

 The <h1> elements will be "orange"

USEK CSC360 15
 Multiple Style Sheets
Ex2:

 The <h1> elements will be according to the color

defined in "mystyle.css"

USEK CSC360 16
 Cascading Order
What style will be used when there is more than
one style specified for an HTML element?
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head
section)
3. Browser default

So, an inline style has the highest priority, and will

override external and internal styles and browser
defaults.
USEK CSC360 17
 CSS Selectors
• The CSS element selector:

Here, all <p> elements on the page will be center-

aligned, with a red text color.

USEK CSC360 18
 CSS Selectors
• The CSS id selector:
– The id selector uses the id attribute of an HTML element to
select a specific element.
– To select an element with a specific id, write a hash (#)
character, followed by the id of the element.

The CSS rule will be applied to the HTML element with

id="para1":
<p id="para1">This is a test.</p>

USEK CSC360 19
 CSS Selectors
• The CSS class selector:
– The class selector selects HTML elements with a specific
class attribute.
– To select elements with a specific class, write a period (.)
character, followed by the class name.

All HTML elements with class="center" will be red and

center-aligned:
<p class="center">This is a test.</p>
USEK CSC360 20
 CSS Selectors
• The difference between Class and ID:

A Class name can be used by multiple HTML

elements, while an ID name must only be used by
one HTML element within the page.

USEK CSC360 21
 CSS Selectors
• CSS Class Selector for specific element:
If you want to specify that only one specific HTML element should be
affected, then you should use the element name with class selector.

USEK CSC360 22
 CSS Selectors
• CSS Descendant Selector:
The descendant selector matches all elements that are descendants of a
specified element.

USEK CSC360 23
 CSS Selectors
• The CSS Universal selector:
The universal selector is used as a wildcard character. It
selects all the elements on the pages.

USEK CSC360 24
 CSS Selectors
• The CSS Grouping selector:
The grouping selector selects all the HTML elements
with the same style definitions.
– - h1, h2, and p elements have the same style definitions.

- It will be better to group the selectors, to minimize the

code.

- To group selectors, separate each selector with a comma.

USEK CSC360 25
 CSS Comments
• Many times, you may need to put additional comments in
your style sheet blocks.
• So, it is very easy to comment any part in style sheet. You can
simple put your comments inside /*.....this is a comment in
style sheet.....*/.
• Comments are ignored by browsers.

USEK CSC360 26
 CSS Measurement Units

USEK CSC360 27
 CSS Colors
• You can specify your color values in various
formats:

• A hexadecimal is a 6 digit representation of a

color. The first two digits(RR) represent a red
value, the next two are a green value(GG), and
the last are the blue value(BB).
USEK CSC360 28
 CSS Colors

USEK CSC360 29
 CSS Colors
• CSS3 has supported additional color properties:
– RGBA stands for Red Green Blue Alpha.
– Alpha specifies the opacity of a color.
– The Alpha parameter number is a value between
0.0 (fully transparent) to 1.0 (fully opaque).
– A sample syntax of RGBA as shown below:

USEK CSC360 30
 span element
• Span element configure a specially formatted
area displayed inline with other elements, such
as within a paragraph.

• <span> tag is an inline container used to mark

up a part of a text, or a part of a document.

USEK CSC360 31
 span element

USEK CSC360 32
 CSS Text
You can set following text properties of an element:
– The color property is used to set the color of a text.
– The direction property is used to set the text direction.
Possible values are ltr or rtl.
– The letter-spacing property is used to add or subtract
space between the letters that make up a word. Ex
value: 5px.
– The word-spacing property is used to add or subtract
space between the words of a sentence. Ex value: 5px.
– The text-indent property is used to indent the text of a
paragraph. Ex value: 2cm.
USEK CSC360 33
 CSS Text
– The text-align property is used to align the text of a
document. Possible values are left, right, center,
justify.
– The text-decoration property is used to underline,
overline, and strikethrough text. Possible values
are none, underline, overline, line-through.
– The text-transform property is used to convert text
to uppercase or lowercase letters. Possible values
are none, uppercase, lowercase.

USEK CSC360 34
 CSS Text
– The font-size property is used to configure the size
of the text.
– The font-family property is used to configure the
font typeface of the text.
– The font-weight property sets how thick or thin
characters in text should be displayed. Possible
values are normal, bold.
– The line-height property is used to specify the
space between lines. Ex value: 1.2

USEK CSC360 35
 CSS Text
– The text-shadow property is used to configure a
drop shadow on text. It takes four values:
• The first value is the horizontal offset of the shadow. A
positive value will move the shadow to the right, while a
negative value will move the shadow to the left.
• The second value is the vertical offset of the shadow. A
positive value will move the shadow down, while a negative
value will move the shadow up.
• The third value is the blur radius of the shadow (Optional). A
higher value will create a more blurred shadow, while a lower
value will create a sharper shadow.
• The fourth value is the color of the shadow (Optional).
USEK CSC360 36
 CSS Borders
• There are three properties of a border you can
change:
– The border-color specifies the color of a border.
– The border-style specifies whether a border should
be solid, dashed line, double line, …
– The border-width specifies the width of a border.

USEK CSC360 37
 CSS Borders
• The border-color property allows you to change
the color of the border surrounding an element
using the properties:
– border-bottom-color changes the color of bottom
border.
– border-top-color changes the color of top border.
– border-left-color changes the color of left border.
– border-right-color changes the color of right
border.
USEK CSC360 38
 CSS Borders
• Example:

USEK CSC360 39
 CSS Borders
• The border-style property allows you to select
one of the following styles of border:
– None: No border. (Equivalent of border-width:0;)
– Solid: Border is a single solid line.
– Dotted: Border is a series of dots.
– Dashed: Border is a series of short lines.
– Double: Border is two solid lines.

USEK CSC360 40
 CSS Borders
• You can change the style of the bottom, left,
top, and right borders of an element using the
following properties:
– border-bottom-style changes the style of bottom
border.
– border-top-style changes the style of top border.
– border-left-style changes the style of left border.
– border-right-style changes the style of right border.

USEK CSC360 41
 CSS Borders
• Example:

USEK CSC360 42
 CSS Borders
• The border-width property allows you to set the
width of an element borders. The value of this
property could be either a length in px, cm or it
should be set to thin, medium or thick.
• You can change the width of the bottom, top, left,
and right borders of an element using the following
properties:
– border-bottom-width changes the width of bottom
border.
– border-top-width changes the width of top border.
– border-left-width changes the width of left border.
– border-right-width changes the width of right border.
USEK CSC360 43
 CSS Borders
• Example:

USEK CSC360 44
 CSS Borders
• The border-radius property defines the radius of the
element's corners.
• This property allows you to add rounded corners to
elements.
• This property can have from one to four values:
border-radius: 15px 50px 30px 5px;
– First value applies to top-left corner
– Second value applies to top-right corner
– Third value applies to bottom-right corner
– Fourth value applies to bottom-left corner

USEK CSC360 45
 CSS Borders
• This property can have from one to four values:
border-radius: 15px 50px 30px;
– First value applies to top-left corner
– Second value applies to top-right corner and bottom-left corner
– Third value applies to bottom-right corner

USEK CSC360 46
 CSS Borders
• This property can have from one to four values:
border-radius: 15px 50px;
– First value applies to top-left corner and bottom-right corner
– Second value applies to top-right corner and bottom-left corner

USEK CSC360 47
 CSS Borders
• This property can have from one to four values:
border-radius: 15px;
– The value applies to all four corners, which are
rounded equally

USEK CSC360 48
 CSS Padding
• The CSS Padding properties are used to generate space around
an element's content, inside of any defined borders.
• With CSS, you have full control over the padding. There are
properties for setting the padding for each side of an element:
– padding-top
– padding-right
– padding-bottom
– padding-left

• All the padding properties can have the following values:

– Length: specifies a padding in px, cm, etc.
– %: specifies a padding in % of the width of the containing element

USEK CSC360 49
 CSS Padding
• Examples:

USEK CSC360 50
 CSS Padding
• Padding - Shorthand Property:
It is possible to specify all the padding properties in one
property. If it has four values:
 padding: 25px 50px 75px 100px;
– top padding is 25px
– right padding is 50px
– bottom padding is 75px
– left padding is 100px

USEK CSC360 51
 CSS Padding
• Padding - Shorthand Property:
If it has three values:
 padding: 25px 50px 75px;
– top padding is 25px
– right and left paddings are 50px
– bottom padding is 75px

USEK CSC360 52
 CSS Padding
• Padding - Shorthand Property:
If it has two values:
 padding: 25px 50px;
– top and bottom paddings are 25px
– right and left paddings are 50px

If it has one value:

 padding: 25px;
– all four paddings are 25px

USEK CSC360 53
 CSS Backgrounds
• The CSS background properties are used to add
background effects for elements.
• The background-color property specifies the background
color of an element:

USEK CSC360 54
 CSS Backgrounds
• 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.

USEK CSC360 55
 CSS Backgrounds
• By default, the background-image property repeats an
image both horizontally and vertically.
• Some images should be repeated only horizontally or
vertically, or they will look strange.
• To repeat an image horizontally, set:
background-repeat: repeat-x;
• To repeat an image vertically, set:
background-repeat: repeat-y;
• Showing the background image only once, set:
background-repeat: no-repeat;
USEK CSC360 56
 CSS Backgrounds

USEK CSC360 57
 CSS Backgrounds
• The background-position property is used to specify the
position of the background image.

USEK CSC360 58
 CSS Backgrounds
• The background-attachment property is used to specify
whether the background image should scroll or be fixed
(will not scroll with the rest of the page):

USEK CSC360 59
 CSS Backgrounds
• The Shorthand property is used to specify all the background
properties in one single property.

• When using the shorthand property the order of the

property values is:

USEK CSC360 60
 CSS Tables

USEK CSC360 61
 CSS Forms
• We can use the width property to determine the width of the
input field:

• The example above applies to all <input> elements. If you

only want to style a specific input type, you can use attribute
selectors:

USEK CSC360 62
 CSS Forms
• We can use the padding property to add space inside the
text field.
• When you have many inputs after each other, you might also
want to add some margin, to add more space outside of
them:

USEK CSC360 63
 CSS Forms
• We can use the border property to change the border size
and color, and the border-radius property to add rounded
corners:

USEK CSC360 64
 CSS Forms
• We can use the background-color property to add a
background color to the form, the input, and the color
property to change the text color:

USEK CSC360 65
 CSS Forms
• Styling Select Menus:

USEK CSC360 66
 CSS Forms
• Styling Input Buttons:

USEK CSC360 67