Scribd
Upload
23 views14 pages

Chapter Three: Cascading Style Sheet

This document provides an overview of cascading style sheets (CSS) including what CSS is, its advantages, what is needed to get started using CSS, methods for adding CSS, CSS syntax, selectors, colors, fonts, the box model, positioning, and cascading order. CSS is a styling language used for website layout and design that is not a programming language. It saves time, improves page load speeds, and makes maintenance and multi-device compatibility easier compared to only using HTML.

Uploaded by

Yididya Kedir
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
23 views14 pages

Chapter Three: Cascading Style Sheet

This document provides an overview of cascading style sheets (CSS) including what CSS is, its advantages, what is needed to get started using CSS, methods for adding CSS, CSS syntax, selectors, colors, fonts, the box model, positioning, and cascading order. CSS is a styling language used for website layout and design that is not a programming language. It saves time, improves page load speeds, and makes maintenance and multi-device compatibility easier compared to only using HTML.

Uploaded by

Yididya Kedir
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/ 14

1

Chapter Three
CASCADING STYLE SHEET
2

• CASCADING STYLE SHEET


• NOT A PROGRAMMING LANGUAGE
• STYLING LANGUAGE
What is CSS? • USED FOR WEBSITE LAYOUT AND
DESIGN
• EVERYONE’S CSS IS DIFFERENT
3

• SAVES TIME
• PAGE LOAD FASTER
• EASY MAINTENANCE
• SUPERIOR TO HTML
Advantages of CSS • MULTIPLE DEVICE
COMPATIBILITY
• GLOBAL WEB STANDARDS
4

• A WEB BROWSER
• Google Chrome
• Mozilla Firefox
• Edge
What We need to • A TEXT EDITOR

get started •

•
Notepad
Notepad++
• Visual Studio Code
• Sublime Text
5

• INLINE CSS: DIRECTLY IN THE HTML


ELEMENT.
3 Methods of • INTERNAL CSS: USING <STYLE>
TAGS WITHIN A SINGLE DOCUMENT.
Adding css • EXTERNAL CSS: LINKING AN
EXTERNAL .CSS FILE.
6
CSS Syntax
7

1. CSS ELEMENT SELECTOR


2. CSS ID SELECTOR
3. CSS CLASS SELECTOR
Selectors in CSS 4. CSS UNIVERSAL SELECTOR
5. CSS GROUPING SELECTOR
8

Colors in CSS
• COLOR NAMES
• HTML5 COLOR NAMES
• HEXADECIMAL
• RGB
9

Web Safe Fonts


10

Box Model
11

Margin and Padding


Shorthand
12

• STATIC
• RELATIVE
• ABSOLUTE
Positioning in CSS • FIXED
• INITIAL
• INHERIT
13

1. INLINE STYLE

Cascading Order 2. INTERNAL AND EXTERNAL CSS


3. BROWSER DEFAULT
14

Thank You!

You might also like