CASCADING STYLE
SHEETS (CSS)
(INTRODUCTION)
PRESENTED BY :
MA. JU DY MA E QU INTA NA
BETHANY MAJABAGUE
C AT H L E A U MA MBO NG
WHAT IS CSS?
• CSS stands for Cascading Style Sheets
• Allow you to control the layout of the HTML document.
It is a mechanism for controlling style (e.g. fonts,colors,
spacing) for HTML.
• A style sheet is made up of rules, each of which applies
to an HTML element and controls a certain a spect of its
rendering.
• CSS use curly braces {}, colon :, and semi-colon ;and
use selectors and declarations
2
WHY USE CSS?
• CSS is used to define styles
for your web pages, including
the design, layout and
variations in display for
different devices and screen
3
CSS CONSISTS OF TWO
COMPONENTS:
• Properties: These are human-readable
identifiers that indicate which stylistic
features you want to modify. For example,
font-size, width, background-color.
• Values: Each property is assigned a value.
This value indicates how to style the
property.
4
CSS STRUCTURE
A CSS RULE-SET
CONSISTS OF A
SELECTOR AND A
D E C L A RAT I O N
BLOCK:
5
CSS STRUCTURE
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.
A CSS declaration always ends with a semicolon, and
declaration blocks are surrounded by curly braces
6
ADVANTAGES OF USING CSS
• Save typing and development time because you have to
enter CSS code only once and it can be applied to many
html scripts.
• Download faster because your browser will download only
one file once.
• You can also add multiple link tags in one document
• Enhanced Design Options and Responsive Design
• Time-Saving and Faster Loading Times
7
DISADVANTAGE OF USING CSS
• Learning Curve
• Security Concerns
• Complex Layouts and Limited Layout Control
• File Size and Performance Impact
• Over-Specificity and Overriding Styles
8
3 KINDS OF CSS
INLINE STYLE SHEET
• these are used for isolated changes to a headline,
paragraph, picture or other element. Inline style sheets
override external and embedded style sheets.
Ex. <p style=“background-color:gray;”>
10
EMBEDDED STYLE SHEETS (INTERNAL STYLE
SHEETS)
• These are used for creating a document –wide style rule.
The are placed within an HTML document, between the
<head> </head> Ex.<style type=“text/css>. They are
also used when you have a page that you want to
present in a different style from other pages. Embedded
style sheets override external style sheets.
11
EXTERNAL STYLE SHEET
These are the most global of the three kinds of CSS), you can apply
the same one to an unlimited number of pages. They allow you to
develop a consistent style across pages. They easily allow you to
change the layout of the entire web site by simply changing the
external style sheet and every page is instantly updated . External
CSS file has a .css file extension.
Ex. <link rel=“CSS” title=“Default”
href=“style.css” type=“text/css”
12
INLINE STYLE SHEET
• Inline CSS is used for a specific HTML tag. <style> attribute is
used to style a particular HTML tag.
• 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
13
INLINE STYLES
Inline styles are CSS styles that are applied directly in
the page's HTML.
To create an inline CSS style, you begin by writing your
style property similar to how you would in a style sheet,
but it needs to be all one line. Separate multiple
properties with a semicolon just as you would in a style
sheet.
Example: <p style=“font-family: Arial; color: red”>
14
This is Inline Style Sheet</p>
EXAMPLE
Place that line of styles inside the style attribute of the
element you want to be styled.
For example, if you wanted to apply this style to a
paragraph in your HTML, that element
would look like this:
<p style="background:#ccc; color:#000;
border: solid black 1px;">
15
LET'S RE-WRITE THE EXAMPLE ONCE AGAIN, BUT HERE WE
WILL WRITE STYLE SHEET RULES ALONG WITH THE HTML
ELEMENTS USING STYLE ATTRIBUTE OF THOSE ELEMENTS
<!DOCTYPE html>
<html>
<head>
<title>HTML Inline CSS</title>
</head>
<body>
<p style="color:red;">This is red</p>
<p style="font-size:20px;">This is thick</p>
<p style="color:green;">This is green</p>
<p style="color:green;font-size:20px;">
This is thick and green
</p>
</body>
16
</html>
The example
shows how to
change the
color and the
left margin of a
<h1> element
AN EXAMPLE OF HTML PAGE WITH INLINE
CSS WOULD LOOK LIKE THIS:
• <!DOCTYPE html>
• <html>
• <body style="background-color:black;">
• <h1 style="color:white;
• padding:30px;">HostingerTutorials</h1>
• <p style="color:white;">Something useful
• here.</p>
• </body>
• </html>
18
EMBEDDED OR INTERNAL STYLE
Defined by a container tag <style></style> and
placed within the head part of the HTML file. It
provides style to the whole HTML file.
<style>
p { font-size: 20px;font-weight:bold; }
</style>
19
EXTERNAL STYLE SHEET
An external stylesheet is a stand alone .css file
that is linked from a web page. The advantage
of external stylesheets is that it can be created
once and the rules applied to multiple web
pages. Should you need to make widespread
changes to your site design, you can make a
single change in the stylesheet and it will be
applied to all linked pages, saving time and 20
EXTERNAL STYLE SHEET
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 theexternal style
sheet file inside the <link>
element.
The <link> element goes inside the <head> section
21
EXTERNAL STYLE SHEET
External Style Sheet is a file containing only CSS syntax
(no document content or elements) and should carry a
MIME type of "text/css."
The style information is not explicitly tied directly to the
document's elements, so Selector syntax is used to
specify what styles attach to which portions of the
document tree. The full range of CSS syntax is allowed
in this method
22
MIME TYPE
The structure of a MIME type is very simple; it
consists of a type and a subtype, two strings,
separated by a '/'. No space is allowed. The type
represents the category and can be a discrete or a
multipart type.The subtype is specific to each type.
MIME stands for Multipurpose Internet Mail
Extensions which is used by technology, Internet,
Application Layer and Protocol
23
DISCRETE TYPES INDICATE THE CATEGORY OF THE
DOCUMENT, IT CAN BE ONE OF
THE FOLLOWING:
Type Description Example of typical subtype
text Represents any document that text/plain, text/html, text/css,
contains text/javascript
text and is theoretically human
readable
image Represents any kind of images. image/gif, image/png, image/jpeg,
Videos are not included, though image/bmp, image/webp, image/xicon,
animated images (like animated gif) image/vnd.microsoft.icon
are described with an image type
audio Represents any kind of audio files audio/midi, audio/mpeg, audio/webm,
audio/ogg,
audio/wav
video Represents any kind of video files video/webm, video/ogg
applicatio Represents any kind of binary data. application/javascriptapplication/
octetstream, application/pkcs12, 24
n
application/vnd.mspo
25
26
MULTIPART TYPES
Multipart types indicate a category of
document that are broken in distinct parts,
often with different MIME types. It is a way to
represent a composite document.
HTTP doesn't handle multipart documents in a
specific way
27
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.
Example
Assume that an external style sheet has the following
style
for the <h1> element
28
29
30
CASCADING ORDER
What style will be used when there is more than one style specified for an HTML
element?
Generally speaking we can say that all the styles will "cascade“ into a new
"virtual" style sheet by the following rules, where number one has the highest
priority:
Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default So, an inline style (inside a specific HTML element) has the
highest priority, which means that it will override a style defined
inside the <head> tag, or in an external style sheet, or a browser
31
default
32
THANK YOU
