Scribd
Upload
98 views22 pages

Cascading Style Sheet (CSS)

Cascading Style Sheets (CSS) is a standard style sheet language used for defining and formatting the presentation of documents written in HTML and XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It allows the separation of document content from document presentation, including layout, colors, and fonts. CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. CSS rules consist of selectors and declarations.

Uploaded by

Reymon R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
98 views22 pages

Cascading Style Sheet (CSS)

Cascading Style Sheets (CSS) is a standard style sheet language used for defining and formatting the presentation of documents written in HTML and XML. CSS describes how elements should be rendered on screen, on paper, in speech, or on other media. It allows the separation of document content from document presentation, including layout, colors, and fonts. CSS works by associating rules with HTML elements. These rules govern how the content of specified elements should be displayed. CSS rules consist of selectors and declarations.

Uploaded by

Reymon R
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Cascading Style Sheet – CSS

Reymon Rotikan

Universitas Klabat YOUR FUTURE STARTS HERE


The W3C standard for defining the presentation of
Cascading documents written in HTML and any XML language.

Style Presentation refers to the way the document


is displayed or delivered to the user, whether on
Sheet a computer screen, a cell phone display, printed
on paper, or read aloud by a screen reader.

CSS is a separate language with its own syntax.

Benefits
• Precise type and layout controls
• Less work
• More accessible sites

Universitas Klabat YOUR FUTURE STARTS HERE


How Stylesheets Work?
1. Marking up the
document
2. Writing the rules
3. Attaching the
styles to the
document

Universitas Klabat YOUR FUTURE STARTS HERE


How Stylesheets Work?
1. Marking up the
document
2. Writing the rules
3. Attaching the
styles to the
document

Universitas Klabat YOUR FUTURE STARTS HERE


How Stylesheets Work?
1. Marking up the
document
2. Writing the rules
3. Attaching the
styles to the
document

Image source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

Universitas Klabat YOUR FUTURE STARTS HERE


How Stylesheets Work?
1. Marking up the • External (.css)
document • Embedded
2. Writing the rules
3. Attaching the
styles to the
document

• Inline

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance • Styled HTML elements pass down certain
2. Cascade style properties to the elements they contain.
3. The Box Model

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance
2. Cascade
3. The Box Model

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance
2. Cascade
3. The Box Model

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance • CSS allows you to apply several style sheets
2. Cascade to the same document, which means there
3. The Box Model are bound to be conflicts.
• When two rules in a single style sheet
conflict, the type of selector is used to
determine the winner.
• The more specific the selector, the more
weight is given to override conflicting
declarations.

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance
2. Cascade
3. The Box Model

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance
2. Cascade
3. The Box Model

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance • CSS visual formatting system: the box model.
2. Cascade • Browsers see every element on the page
3. The Box Model (both block and inline) as being contained in
a little rectangular box

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance
2. Cascade
3. The Box Model

Image source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Concepts
1. Inheritance
2. Cascade
3. The Box Model

Image source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

Universitas Klabat YOUR FUTURE STARTS HERE


CSS Unit
Measurement

Universitas Klabat YOUR FUTURE STARTS HERE


SELECTORS

Image source: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics

Universitas Klabat YOUR FUTURE STARTS HERE


PROPERTIES AND VALUES
• Font and Text
• Colors and Backgrounds
• The Box Model
• Floating and Positioning
• Layout: Flexbox and Grid
• Responsive Web Design
• Transition, Transform, and Animation

Universitas Klabat YOUR FUTURE STARTS HERE


CSS DEMO

Universitas Klabat YOUR FUTURE STARTS HERE


CSS FRAMEWORKS
• Bootstrap • Skeleton
• Foundation • Tailwind CSS
• Pure CSS • Spectre
• Bulma • Base
• Semantic UI • Picnic CSS
• UI Kit • Mustard UI
• Materialize CSS • Dead Simple Grid
• Miligram • etc…

Universitas Klabat YOUR FUTURE STARTS HERE


CSS FRAMEWORKS - DEMO

Universitas Klabat YOUR FUTURE STARTS HERE


REFERENCE(s)
1. J. N. Robbins, Learning Web Design: A Beginner’s Guide to HTML,
CSS, JavaScript, and Web Graphics 5th Edition, 2018, O’Reilly.
2. https://developer.mozilla.org/en-US/docs/Web/CSS
3. https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_bloc
ks

4. https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

Universitas Klabat YOUR FUTURE STARTS HERE

You might also like