Click icon to add picture

CHAPTER 3
CSS(CASCADING STYLE SHEETS)
Quiz one ..Create the ff page.Boxes represent a div element.
What is CSS?
• Every web page is composed of HTML (Hypertext Markup Language)
code that describes the content
• Example:
<p>An<strong>important</strong><font

color=“#FFFF00”>paragraph</font>.</p>
• Displays:
• An important paragraph.
• Repetitive and hard to maintain.
What is CSS?
• Layers of a web page:
• Content:
• Text, images, animation, video, etc.
• Presentation:
• How the content will appear to a human through a web browser, text reader, etc.
• Behavior:
• Real-time user interaction with the page: validation, sorting, drag-n-drop etc.
Style Sheet Languages
• Style sheet languages are used to describe the presentation of
structured documents, like HTML, XML and other markup languages.
What is CSS?
• Cascading Style Sheets
• Contains the rules for the presentation of HTML

=
+

• CSS was introduced to keep the presentation information separate from

HTML markup (content).
• CSS separates the presentation from the content.
What are Cascading Style Sheets?
• Cascading Style Sheets (CSS) are rules. Each rule consists of a selector and a
declaration (which, in turn, is made up of a property and a value).

• They were established by the World Wide Web Consortium (W3C). CSS rules
control the look (Style) of web pages or XML files by providing central locations
(Sheets) where HTML or XML tags are interpreted by the browser.

CS 22: Enhanced Web Site Design - Cascading Style

Slide 3 (of 54)
Sheets
Why CSS?
• Flexible, can be applied in several ways.
• Easy to maintain.
• Accessibility to different users with different devices.
• CSS caching = less bandwidth + fast loading
Every keystroke Why use Style Sheets?
counts!
Smaller files load more • separate structure from
quickly appearance
Save disk space • create consistent
appearance
For Example • ease of maintenance
Given a page • increase accessibility
webreg.html • apply additional effects
• reduce use of non-standard
Original: 27.2K tags
Embedded Style • reduce web page file size
Sheet: 26.2K
What is CSS?
> Before CSS
• Initially designers used presentation tags like (FONT, B, BR, TABLE
ETC.) and spacer GIFs to control the design of web pages.
• Any modification in the design of websites was a very difficult and
boring task, as it involves manually editing every HTML page.
• Providing support for multiple browsers was a difficult task.
Brief history… 1997-2001
• Content: HTML 4.01
• Presentation: CSS1
Brief history… 2001-2006
• Content: XHTML 1
• Presentation: CSS2
Brief history… 2007-present
• Content: HTML5
• Presentation: CSS3
Pros and Cons of Using CSS
• Pros
• Greater designer control of the appearance of the page
• Easier management of site-wide changes
• Greater accessibility to web sites by non-graphical browsers and web-page-
reading software

• Cons
• Different browsers may interpret Style Sheets in different ways
• Some styles may not be seen at all on some browsers
 General Syntax
• Style Definition:
Selector {
property: value;
}
• Example: body { font-family: Verdana; font-size: 9px; }

• The selector can either be a grouping of elements, an identifier, class, or single

HTML element (body, div, etc.)
• Each declaration includes a CSS property name and a value, separated by a
colon.
• A CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces
CSS Syntax
• Case insensitive
• In most cases the use of whitespaces does not matter, within a
selector it does matter specifying which elements are targeted.
• Comments: Comments are useful for organizing styles, annotating
code, or communicating with team members.
/*
This is
a comment
*/
Source of Styles
• Author / Developer Style Sheets
• Inline Style Sheets
• Embedded Style Sheets
• External Style Sheets
• User Style Sheets
• Browser Default Style Sheets
 Source of Styles
> Author (Developer) Style Sheets
• Inline Styles:
• Allows you to format HTML elements directly as attribute of that
element itself.
• This is achieved through the style attribute which is supported by
every HTML tag.

• The simplest way but repetitive across multiple HTML elements

 Source of Styles
> Author (Developer) Style Sheets
• Embedded Styles:
• Embedded styles allow you to
write styles to control the page
content in the head of the
page’s HTML.
• This is achieved through the
style tag.
• Inefficient as a means of
controlling styles across an
entire site.
• Repetitive across multiple
pages.
 Source of Styles
> Author (Developer) Style Sheets
• External Styles
• Allow controlling styles across
multiple pages or even an entire site.
• This can achieved in two ways.
• One is through the link tag (Empty
tag) specified in the pages head and a
separate (independent) stylesheet
file.
• type attribute: specifies the MIME type
of the resource
• rel attribute: defines the relationship
that the linked resource has to the
document from which it's referenced.

style.css
 Source of Styles
> Author (Developer) Style Sheets
• External Styles
• Another way to associate a stylesheet file to an HTML page is
through the <style> tag and an inline style rule called @import.
style.css
page1.html

• If you have to use @import, it must be specified above any rules in

the style tag.
Structuring HTML Correctly
• Without a logical, consistent structure to your HTML, writing
efficient CSS is impossible.
• HTML Authoring Best Practices
• Focus on using clear, semantic code.
• Structure your code consistently throughout your site.
• Simplify your code whenever possible. Avoid non-semantic markup.
• Coding Strategy
• Approach initial coding with only the structure and content in mind.
• Design is considered, but should not influence code structure unless
absolutely necessary.
• This approach creates lean, semantic markup that is easier to style.
• Focus on the relationship between HTML structure and CSS
organization.
Use tools for website
designing ,planning and prototyping
• Many developers and designers use good old pen and paper to plan their
designs, however this doesn’t really fit well with larger projects, where
collaboration / signoff is required from many different people.
• Others jump straight to HTML to create mockups – which I feel can limit
creativity a little, as it puts you in the mindset of what can be done with
HTML / CSS. Some of these prototyping tools for web design might be
useful for prototyping purposes – some of them with social features.

• http://www.webdistortion.com/2009/02/22/useful-online-tools-for-
easier-website-planning-and-prototyping/
Planning and prototyping(using
mindmeister and mockups)
CSS SELECTORS
CSS Selectors
• In CSS, selectors are patterns used to select that element(s) you want
to style.
• Selectors allow us to target elements on a page.
• Selectors: Type/Element/Tag based selector, Identifier Selector, Class
Selector, Grouping Selector, Descendant Selector, Child Selector,
Adjacent Sibling Selector, General Sibling Selector, Attribute Selector,
Universal Selector, Pseudo-classes.
 CSS Selectors
> Element Selector
• Also known as type selector and tag
based selector.
• The element selector allows you to
target content on the page based on
the element that contains it.
• Specify the style(s) for a single HTML
element.
• Extremely powerful, but very broad.
Quiz:-Use Element Selector
 CSS Selectors
> Class Selector (.)
• Class selectors allow you to
target any element on the
page that has the same class
attribute.
• Class based styles can be
used by multiple HTML
elements.
• They are defined using the
period (.) character together
with a class name.
 CSS Selectors
> Id Selector (Identifier Selector)
(#)
• Id selectors work in much the same
way as class selectors in that, they
allow us to target any element on the
page with a specific Id attribute.
• They are defined using the pound (#)
character together with the Id of the
element we want to target.
• In an event where Id and Class selector
conflict with each other, the Id selector
styling will be used in favor of the class
because it is more specific.
CSS Selectors
> Considerations (Id & Class)
• Class and Id attributes extend the meaning of your HTML code.
CSS Selectors
> Considerations (Id & Class)
CSS Selectors
> Class and Id Selectors with the Element
• Below is an example of an element specific selector with class and id.
• Notice that there is no space between the element name and the
class or id selector.
Quiz:-use class & id selectors
CSS Selectors
> Universal Selectors (*)
• Universal selectors are used to select any element.
• The following code sets the text color of all elements in a page to
blue.
CSS Selectors
> Grouping Selectors (,)`
• Often you will find several different elements on the page require the
exact same styling.
• Allows you to specify a single style for multiple elements at one time.
• Multiple selectors can be grouped in a single declaration by using
comma (,)
Quiz:-Group selectors
CSS Selectors
> Descendant Selector (space)
• The most powerful targeting ability
CSS gives us is the ability to
combine selectors together in what
is known as descendant selectors.
• Allow to more precisely target
content based on the relationship
between nested tags and their
parents.
• Descendant selectors are used to
select elements that are
descendants (not necessarily
children) of another element in the
document tree.
CSS Selectors
> Descendant Selector (space)
Quiz:-use a descendant selector to change the font
size of link two
 CSS Selectors
> Child Selectors (>)
• A child selector is used to
select an element that is
a direct child of another
element (parent). Child
selectors will not select
all descendants, only
direct children.
CSS Selectors
> Child Selectors (>)
Quiz:-Use Child Selectors to change colors of the
first & third paragraph
CSS Selectors
> Adjacent Selectors (+)
• Also called adjacent sibling
selectors.
• Sibling = has the same parent
• Adjacent = immediately
following
• Allow you to target elements
based on which elements
follow one another in your
code. Essentially adjacent
selector allow you to style an
element based on which
element comes before it in the
document, providing that
both of those elements are
inside the same parent.
CSS Selectors
> Adjacent Selectors (+)
Quiz:- Use Adjacent Selectors To change the last
paragraph color
 CSS Selectors
> General Sibling Selectors (~)
• Sibling = has the same
parent element
• General = just following
• Allow you to target elements
based on which elements
follow in your code.
Essentially general sibling
selector allow you to style an
element based on which
element comes before it (not
necessarily immediately) in
the document, providing
that both of those elements
are inside the same parent.
Quiz:-Use General Sibling Selectors
 CSS Selectors
> Attribute Selectors
• Attribute selectors selects
elements based upon the
attributes present in the
HTML tags and their value.
• Attributes are specified
using brackets.
• [attribute=“value”] (case
sensitive)
• [attribute] (doesn’t matter
what the value is)
CSS Selectors
> Attribute Selectors
CSS Selectors
> Attribute Selectors
CSS Selectors
> Attribute Selectors
Quiz :- Use Attribute selectors to change the color
of the second link
 CSS Selectors
> Attribute Selectors
• Allow us to much patterns as well
• Tilde (~): It basically says go ahead and look for a
white space separated list that includes the word.
 CSS Selectors
> Attribute Selectors
• Another pattern matching character
• Caret (^): It basically says go ahead and match any
string that begins with a certain value.
 CSS Selectors
> Attribute Selectors
• Another pattern matching character
• Dollar Sign ($): It basically says go ahead and match
any string that ends with a certain value.
 CSS Selectors
> Attribute Selectors
• Another pattern matching character
• Asterisk Sign (*): It basically says go ahead and match
any string that contains a certain value.
Quiz:-Use attribute selector & Asterisk Sign