Scribd
Upload
8 views

Cascading Style Sheets (CSS)

The document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in controlling the layout and style of HTML documents. It covers the structure of CSS, including selectors and declaration blocks, and discusses the advantages and disadvantages of using CSS. Additionally, it outlines the three types of CSS: inline, embedded, and external styles, along with the concept of MIME types and cascading order in style application.

Uploaded by

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

Cascading Style Sheets (CSS)

The document provides an introduction to Cascading Style Sheets (CSS), explaining its purpose in controlling the layout and style of HTML documents. It covers the structure of CSS, including selectors and declaration blocks, and discusses the advantages and disadvantages of using CSS. Additionally, it outlines the three types of CSS: inline, embedded, and external styles, along with the concept of MIME types and cascading order in style application.

Uploaded by

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

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

You might also like