LESSON 18

Styling Html with Internal Style Sheet,

Inline Style Sheet, and Span Tag
LEARNING OBJECTIVES
create an input using syntaxes and describe the
function of internal style sheet, inline style sheet
and span tag.
UNIQUE DESIGNS
• In sections and elements can be applied using
internal style sheet, inline style sheet, and span
tag. These are placed within the HTML tag.
 INTERNAL STYLE SHEET
• It executes codes that are placed in the
head section of an HTML file.

SYNTAX:
<style> selector{property: value;} </style>
INTERNAL STYLE SHEET
 INLINE STYLE SHEET
It applies a style to a particular tag only.
SYNTAX: <tag style=”property:value;”></tag>
INLINE STYLE SHEET
 SPAN TAG
It is a special tag used to style elements on the web page.
It is more specific compared to internal and inline CSS.
SYNTAX: <span style=”property:value;”></span>
SPAN TAG
 HIERARCHY TAG
CSS is intended to apply multiple
styles to a website. The website
efficiently designed loads faster,
wherein same styles are applied to
several elements without repeating
the styles statements in the program
codes.
Order of Precedence
When using selectors, CSS follows the order where the last selector is
the highest priority: element selector, class selector, and ID selector.

Element (element) Selector

It selects all elements according to the element name.

Class (class) Selector

It selects all elements with a certain class attribute.
When using selectors, CSS follows the order where the last selector is
the highest priority: element selector, class selector, and ID selector.

ID (id) Selector
It selects the id attribute of an HTML element to find a
certain element.
 MULTIMEDIA ELEMENTS
Multimedia is any interactive content that uses a
combination of various forms like sound or audio,
image, video, and animation.
These are the multimedia elements that we can work on:

SIZE
The height and width properties set the size of an image. The
values can be in px or %.
Syntax for height: img{height: value;}
Syntax for width: img{width: value;}
These are the multimedia elements that we can work on:

BORDER
It displays an image with borders. The values follow this order:
width, style, and color.
Syntax: img{border: width style color;}
The values of the border can also be individually used. We specify the
following properties and their values:
These are the multimedia elements that we can work on:

ROUNDED CORNERS
It displays an image with rounded corners. The values can be in px
or %.
Syntax: img{border-radius: value;}
These are the multimedia elements that we can work on:

DISPLAY AT THE CENTER

These properties are used to set the image at the center of the
browser.
These are the multimedia elements that we can work on:

OPACITY OR TRANSPARENCY
It displays an image in fade effect. The values can be from 0.0 to -
1.0. the default value is 1. Lower values are more transparent.
Syntax: img{opacity: value;}
These are the multimedia elements that we can work on:

STYLE AUDIO AND VIDEO

Almost all properties for styling images can also be used for audio
and video. We usually use the width and height properties for the
audio controls.

CSS: HTML
These are the multimedia elements that we can work on:

STYLE AUDIO AND VIDEO

The properties for images are also applicable to videos.

HTML
CSS:
THANK YOU!
SEE YOU IN
NEXT LESSON