Scribd
Upload
85 views

CSS: Cascading Style Sheets: Leonard Andrew D. Mesiera Web and Database Development Msit

CSS (Cascading Style Sheets) allows users to separate document content from document presentation and layout. CSS provides greater control over typography, layout, and presentation across different media like print, screen, and mobile. CSS uses selectors to apply styles like colors and fonts to HTML elements. It gives advantages like separation of concerns, easier maintenance, and accessibility. Advanced uses include media queries for responsive design and CSS preprocessors for variables and nesting.

Uploaded by

Leonard Andrew Mesiera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
85 views

CSS: Cascading Style Sheets: Leonard Andrew D. Mesiera Web and Database Development Msit

CSS (Cascading Style Sheets) allows users to separate document content from document presentation and layout. CSS provides greater control over typography, layout, and presentation across different media like print, screen, and mobile. CSS uses selectors to apply styles like colors and fonts to HTML elements. It gives advantages like separation of concerns, easier maintenance, and accessibility. Advanced uses include media queries for responsive design and CSS preprocessors for variables and nesting.

Uploaded by

Leonard Andrew Mesiera
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 28

CSS : Cascading

Style Sheets

Leonard Andrew D. Mesiera


Web and Database Development
MSIT -
Presentation

 CSS Defined
 Advantages of Using CSS
 Disadvantages of Using CSS
 Advanced Uses
 Other good sites for learning CSS
 References
Stylesheets

 Are text style & layout instructions that


extend the HTML (or XHTML, XML, etc.)
in web pages, giving greater control over
content presentation, including
typography, layout, and presentation on
different media (print, screen, mobile,
audio, etc.)
Cascading Stylesheets

 Which style rules?


 Browser default
 External style sheet

 Internal style sheet (inside the <head>


tag)
 Inline style (inside an HTML element)

("Introduction to CSS," n.d.)


CSS vs. Inheritance

 Cascading is not inheritance, though the


two sometimes get confused.
 Inheritance is related to the HTML
document’s containment hierarchy
 <html>
 <body>
 <p>
 Each element will by default inherit the
style of it’s parent element (.8 x.8 = .64)
Advantages of Using CSS

 Separation of presentation of
presentation & content
 Less time and labor needed for site
maintenance & revisions
 Better accessibility
 Better/faster data-driven websites
 Better semantics
 Improved graphic design possibilities
(ex: Zen Garden site)
Advantages of Using CSS

 Enables different presentations of same


page for different media
 Faster page load times
Disadvantages

 Inconsistent browser support


(decreasing problem at this point )
 May need to design page for one browser,
so be aware of what your users are using!
 Hacks to remedy browser differences can
cause problems of their own.
 Most new browsers have quirks and strict
modes to adjust their css interpretation for
older css and css written for recent
browsers
Disadvantages

 User may override your css or it may not


display at all
 CSS has bugs, so crosscheck on
browsers
 Easy for beginners to get carried away
 Use it when you need it
 Validate! Make sure your HTML is
semantically correct & CSS is good
Advanced Uses

 Use with database-driven websites and


templates
 Provide different presentations to
different media
 Use it to provide both presentation layout
and screenreader / text-only content
organization
ADVANCED CSS
TOPICS
 Semantic HTML and CSS foundation
 Media Queries
 CSS Preprocessor
 Web Developer Tools
 Flexbox
 Using SVG images
SEMANTICS IN CSS
SEMANTICS

 SEMANTIC element clearly describes


its meaning to both the browser and the
developer.
Why use semantics

 What is Semantic HTML. Semantic


HTML or semantic markup is HTML that
introduces meaning to the web page
rather than just presentation.
For example, a <p> tag indicates that
the enclosed text is a paragraph.
Sample Semantics
MEDIA QUERIES FOR
RESPONSIVE DESGIN
ADDING QUERIES FOR
DIFFERENT VIEWPORTS
Working With Images
CSS CODE SNIPPETS
CSS PREPROCESSOR
 What are the examples of CSS
Preprocessor?
 Sass is a CSS preprocessor, which adds
special features such as variables, nested
rules and mixins (sometimes referred to as
syntactic sugar) into regular CSS.
What is a CSS Preprocessor?

 A CSS preprocessor is a scripting


language that extends CSS by allowing
developers to write code in one
language and then compile it into CSS.
Sass is perhaps the most popular
preprocessor around, but other common
examples include Less and Stylus.
WEB DEVELOPER TOOLS
What are the tools needed for
web design?
References
 Cascading Style Sheets. (n.d.). Wikipedia.
Retrieved November 2, 2006, from
http://en.wikipedia.org/wiki/Cascading_Style_Sh
eets
 Introduction to CSS. (n.d.). w3 School.
Retrieved November 2, 2006, from
http://www.ischool.utexas.edu/%7Ei385e/readin
gs/css_intro.asp.htm
 Shea, D. (n.d.). CSS Zen Garden. Retrieved
November 2, 2006, from
http://www.mezzoblue.com/zengarden/resource
s/

You might also like