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
