css class-01
TRANSCRIPT
Md. Ali Hosssain.Web Designer.Jr. Instructor, Graphic Arts Innstitute.Email:[email protected]:01731402303
04/12/23
04/12/23
CSS?Cascading Style SheetsCSS is a style sheet language used to determine the formatting of an
HTML document.Before we had CSS (and before it was widely adopted) all of this
formatting information was embedded directly in the document- either in the form of attributes like width or bgcolor (background color) or in the form of purely presentational tags like font.
Combined with the abuse of the table tag to create complicated layouts, the landscape for layout and design on the web was an unmanageable mess.
CSS fixed all that (kind of.) Using separate style sheets for an entire site, leveraging semantic
markup and identifiers like ids (for unique page elements) and classes (for multiple, like elements) a developer can apply styles across a whole site while updating a single (cacheable) file.
04/12/23
Enter CSS (The timeline)CSS1 December 1996
CSS 2Became a W3C Recommendation in May 1998
CSS 3CSS level 3 has been under development since December 15, 2005
04/12/23
CSS Versions CSS 1
Font properties such as typeface and emphasisColor of text, backgrounds, and other elementsText attributes such as spacing between words, letters, and
lines of textAlignment of text, images, tables and other elementsMargin, border, padding, and positioning for most elementsUnique identification and generic classification of groups of
attributes CSS2
includes a number of new capabilities like absolute, relative, and fixed positioning of elements and z-
index, the concept of media typessupport for aural style sheets and bidirectional textnew font properties such as shadows.
04/12/23
CSS VersionsCSS3
Modules include:Borders (border-radius, box-shadow)Backgrounds (multiple backgrounds)Color (HSL colors, HSLA colors, opacity, RGBA
colors)Also:media queriesmulti-column layoutWeb fonts
04/12/23
CSS Tips and Tricks for CSS Tips and Tricks for Designing Accessible Designing Accessible WebsitesWebsites
04/12/23
ObjectivesObjectives
Understand the benefits of CSSUnderstand principles of liquid design and
how it relates to accessibilityDemonstrate simple techniques for using CSS
to make websites more accessibleList some useful resources
04/12/23
Benefits of CSSBenefits of CSS
Exercise greater control over how websites are presented.
Access websites on multiple media platforms:o Computer monitorso Papero Projectorso Screen readers for the blindo Mobile phones
CSS Helps Your Users…CSS Helps Your Users…
04/12/23
CSS Helps You…CSS Helps You…
Save time by controlling the styles for your entire website with one file.
Simplify your web documents.Reduce file sizes.
04/12/23
Liquid DesignLiquid Design
Principles of Liquid DesignPrinciples of Liquid Design
Layout elements are given relative sizes (usually percentages).
The page scales to fit any view port, no matter the resolution, screen size, or text size.
The user does not need to use the horizontal scroll bar.
04/12/23
Liquid Design and AccessibilityLiquid Design and Accessibility
Liquid design helps your page “degrade gracefully.”
The page displays properly even if the user:o Changes text size or screen resolution.o Views the page on an extra large monitor.o Disables style sheets.
04/12/23
CSS TechniquesCSS Techniques
Style Sheets
04/12/23
Each element on a page has a style defined for it.The style is defined by a set of attribute : value
pairs.Style attributes can control:
Typeface and font propertiesBackground propertiesBox-related propertiesList properties
Ways to define styles
04/12/23
Default style: provides values for all element properties, unless you change it. (Note: user can customize browser to
change defaults!)
Inline style: style is defined as an attribute of the element in-place. Use this for “one-off” or special styles.
Embedded style sheet: styles defined in the head portion of web page. Use this if you don’t have very many web pages,
or for styles that are useful only for the given page.
External style sheet: styles defined in a separate file. Use this to centralize style definitions and provide uniformity
across all pages of a web site.
Adding styles to pages
1. Inline CSS handy, but don’t abuse it because it puts presentation
back with the content
04/12/23
Embedded Style Sheet
04/12/23
<html><head><title>Page with embedded style</title><style type="text/css"> selector { attribute : value ; attribute : value ... } selector { attribute : value ; attribute : value ... } ...</style></head></html>
•Style definitions go into a <style> element in document head.•Selector determines what elements the style rule applies to.•Style definitions separated by ; are enclosed in { }
Embedded Style Sheet (cont’d)
04/12/23
<html><head><title>Page with embedded style</title><style type="text/css"> selector { attribute : value ; attribute : value ... } selector { attribute : value ; attribute : value ... } ...</style></head> ...</html>
•The type attribute can only be "text/css". (It is leaving room for future alternative style languages.)•Note: CSS is not HTML!
Example
04/12/23
<html><head><title>Example page with embedded
style</title><style type="text/css"> body { font-family : sans-serif; color : blue; background-color : yellow } h1 { font-style : italic } p { font-size : 14pt } ol { font-size : 12pt; color : red; font-family : serif }</style></head> ...</html>
Here the selectors are simply tag names. The style rules will apply to elements defined by those tags. Result (Example 1)
Adding styles to pages
3. External CSS easier to read and modify downloaded once for all website pages separates content from presentation – the way to go
04/12/23
sample.htmlsample_style.css
CSS rule
04/12/23
Selector Values
Properties
04/12/23
Inheritance
04/12/23
A descendant is an element that is enclosed (nested) in another, its ancestor. (If it is an immediate descendant, it is a child of the enclosing element, its parent. Elements having the same parent are siblings.)
All descendants of an element inherit its style properties, unless these are overridden by their own style rules.
If two styles could apply to the same element, the one defined by the more specific rule will be used. For instance, an explicit rule is always more specific than an inherited rule.
Inheritance in CSS
HTML documents are parsed into a document tree
Example:
04/12/23
html
head body
title meta link h1 pul
li li li
• used when building CCS rules
• some properties (e.g. font-family) are inherited from parents if not specified
04/12/23