Scribd
Upload
253 views

CSS Stands For " Ascading Tyle Heets": Cascading

CSS stands for Cascading Style Sheets and is used to style and lay out web pages. It allows setting properties like colors, fonts, spacing, sizing, and positioning of elements. CSS rules contain selectors that identify the elements to style paired with declarations that set property-value pairs to determine how they should appear. Styles can be defined inline, within HTML tags, embedded in <style> tags, or linked via external style sheets for consistent formatting across pages.

Uploaded by

harini yaragani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
253 views

CSS Stands For " Ascading Tyle Heets": Cascading

CSS stands for Cascading Style Sheets and is used to style and lay out web pages. It allows setting properties like colors, fonts, spacing, sizing, and positioning of elements. CSS rules contain selectors that identify the elements to style paired with declarations that set property-value pairs to determine how they should appear. Styles can be defined inline, within HTML tags, embedded in <style> tags, or linked via external style sheets for consistent formatting across pages.

Uploaded by

harini yaragani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 55

CSS

CSS stands for “Cascading Style Sheets”


Cascading: refers to the procedure that determines
which style will apply to a certain section, if you have
more than one style rule.

Style: how you want a certain part of your page to look.


You can set things like color, margins, font, etc for
things like tables, paragraphs, and headings.

Sheets: the “sheets” are like templates, or a set of rules,


for determining how the webpage will look.
So, CSS (all together) is a styling language – a set of rules to tell
browsers how your webpage should look.
What is “Style”
“Style” is a command that you set to tell the
browser how a certain section of your webpage
should look.

You can use style on many HTML “elements”


(like <p> <h1> <table> etc)
Advantages of Style Sheets
• Saves time
• Easy to change
• Keep consistency
• Give you more control over layout
• Use styles with JavaScript => DHTML
• Make it easy to create a common format for all
the Web pages
Applying a single style sheet to
multiple documents
Syntax of a Style
The CSS syntax is made up of 5 parts:
i) selector, ii) property/value iii) declaration
iv) declaration block v) curly braces

Selector {declaration;}
Declaration = {property: value;}
Property: what aspect you want to change
ex: color, font, margins, etc.
Value: the exact setting for that aspect.
ex: red, italic, 40px, etc.
Selector
– Definition: identifies the HTML elements that
the rule will be applied to, identified by the
actual element name, e.g. <body>, or by other
means such as class attribute values.
– Example:

*The selector is normally the HTML element you want to style


Property & Value
– Definition: The property is the style attribute
you want to change. Each property has a value.

*Properties are separated from their respective values by colons :


*Pairs are separated from each other by semicolons ;
Declaration
– Definition: Each CSS line that includes
property and value

*Each declaration consists of a property and a value.


Declaration Block
Definition: multiple declaration lines including the
curly braces
Curly Braces
– Definition: the curly braces contain the
properties of the element you want to
manipulate, and the values that you want to
change them to. The curly braces plus their
content is called a declaration block.

– Example:
• Each declaration or definition contains:
– A property
– A colon
– A value
– A semicolon to separate two or more values
– Can include one or more values
• h1 {color:blue; font-size:12px}
Different ways of Style
1. Inline styles
2. Embedded styles / Internal styles
3. External style sheet
Inline Style Sheet
• Inline styles
– Add styles to each tag within the HTML file
– Use it when you need to format just a single
section in a web page.
• Syntax:
– <h1 style=“color:red; font-family: sans-serif”>
Welcome to CSS</h1>
• Example: inline.html
Embedded / Internal Style Sheets
• Embedded or internal styles
– A style is applied to the entire HTML file
– Use it when you need to modify all instances
of particular element (e.g., h1) in a web page.
• Syntax:
<style>
p {color:green; font-size:30px}
</style>
• Example: embedded.html
Creating an Embedded Style Sheet
<head>
<title>Embedded Example</title>
<style type=“text/css”>
Style declarations
</style>
</head>
• A style declaration:
– Selector {attribute1:value1; attribute2:value2;
…}
– Selector = an element in a document (e.g., a
header or paragraph)
External Style Sheets
• External style sheets
– An external style sheet is a text file containing the
style definition (declaration)
– Use it when you need to control the style for an entire
web site.
• Syntax:
– h1, h2, p {color:red; font-family:sans-serif}
• Example: external.html
Creating an External Style Sheet
• Open a new blank document in Notepad
• Type style declarations
– h1 {color:red; font-family:sans-serif;}
• Do not include <style> tags
• Save the document as filename.css
Linking to Style Sheets
• Open an HTML file
• Between <head> and </head> add
– <link href=URL rel=“relation_type” type=“link_type”>
• URL is the file.css
• Relation_type=“stylesheet”
• Link_type=“text/css”
• Save this file and the .css file in the same web
server directory
An example of an external style
sheet with an original html file
<head> h1{color:red; font-
<title>External Style family:sans-serief;}
Sheet</title>
<link href=“external.css” h2{color:green;}
rel=“stylesheet”
type=“text/css” /> p{font-size:20px;
</head> color:blue;}

external.html file external.css file


Conflicting Styles
• Styles may be defined by a user, an author or a
user agent (e.g., a web browser).
– user is a person viewing your web page.
– an author- the person who writes the document.
– user agent is the program used to render and display the
document.
• Styles “cascade,” or flow together, such that the
ultimate appearance of elements on a page results
from combining styles defined in several ways.
• Styles defined by the user take precedence over
styles defined by the user agent, and styles defined
by authors take precedence over styles defined by
the user.
• Most styles defined for parent elements are also
inherited by child (nested) elements.
• While it makes sense to inherit most styles, such
as font properties, there are certain properties that
we don’t want to be inherited.
• Properties defined for child and descendant
elements have a greater specificity than properties
defined for parent and ancestor elements.
• Conflicts are resolved in favor of properties with a
higher specificity

• Examples:
conflicts.html conflicts1.html conflicts2.html
Style Sheet Strategies
• Wherever possible, place your styles in
external style sheets
• Take advantage of the power of CSS to
have control over an entire Web site.
• At the top level of your web site: define a
default global.css style sheet
• Refine styles at sublevels with a
section.css style sheet
• Try to avoid using styles in tags
Attribute Selectors
• Create an attribute selector to select
an element based on the element’s
attributes.
Using IDs and Classes
• Use an id to distinguish something,
like a paragraph, from the others in a
document.
– For example, to identify a paragraph as
“head”, use the code:

<p id=“head”>… </p>


Working With Ids
• To create an ID for a specific tag, use the
property:
– <tag ID=id_name>
• To apply a style to a specific ID, use:
– #id_name {style attributes and values}
Classes
• HTML and XHTML require each id be
unique– therefore an id value can only
be used once in a document.
• You can mark a group of elements with
a common identifier using the class
attribute.

<element class=“class”> … </element>


Applying a style to a class

Example: classes.html
Working With Classes
• To create a class, enter the following in the
HTML tag:
– <tag CLASS=class_name>
– <h1 CLASS=FirstHeader>IU</h1>
– class_name is a name to identify this class of
tags
• To apply a style to a class of tags, use:
– tag.class_name {style attributes} or
– .class_name {style attributes}
Working With Classes and Ids
• The difference between the Class
property and the ID property is that the
value of the ID property must be unique:
– you can’t have more than one tag with the
same ID value
– You can apply the same Class value to
multiple document tags
Positioning – what is it?
Positioning refers to the layout of the items
on your page.

It also refers to the “position” descriptor in


CSS rules.
Normal Flow – no “positioning”

Left to Right, Top to Bottom


Normal Flow – no “positioning”
Top left of the page = (0,0)

Left to Right, Top to Bottom


Normal Flow
The yellow box is the container (more on this)

This is a paragraph to If the next paragraph fits next to


which I have set the width. it on the right, it will line up.
Normal Flow
This is a paragraph to However, if the second paragraph is
which I have set the width. too wide to fit the container, it will shift
down.
Normal Flow
This is a paragraph to
which I have set the width.

However, if the second paragraph is


too wide to fit the container, it will shift
down.

This is the basic principle of Normal Flow


Positioning Elements
• Absolute positioning
– z-index attribute
• Layer overlapping elements properly
• Relative positioning
– Elements are positioned relative to other
elements.

Example: absolute.html relative.html


Backgrounds
• background-image
– Specifies the image URL
• background-position
– Places the image on the page
• background-repeat
– Controls the tiling of the background image
• background-attachment
– fixed
– scroll
• font-weight
– Specify the “boldness” of text
Example: background.html
Element Dimensions
• CSS rules can specify the actual
dimensions of each page element.

• Example: dimensions.html
The CSS Box Model
• Every CSS box is divided into regions,
consisting of:
1.Content
2.Padding
3.Border
4.Margins
Introducing the <div> tag:
• The <div> tag is our basic building block when
laying out a page design. By defining the height
and width of the <div>, we are "reserving" that
amount of space on the screen for whatever
content we wish to place there.

• The actual content will go inside the opening


<div> and closing </div> tags.
Example <div>:
<head> This is a 300 by 300 pixel box
<style type="text/css"> with a 1 px border.
.box300 {
width:300px;
height:300px;
border:1px solid black;
}
</style>
</head>

<div class="box300">
This is outside the box.
This is a 300 by 300 pixel box
with a 1px border.
</div> By establishing the box
This is outside the box. dimensions, we can leave it there
as a placeholder until we have our
content ready. In the meantime,
the rest of the page can be built out
with our other content.
Adding padding:
<head> This is a 300 by 300 pixel box
<style type="text/css"> with a 1px border and 10px
.box300 { padding.
width:300px;
height:300px;
border:1px solid black;
padding:10px;
}
</style>
</head>

<div class="box300"> This is outside the box.


This is a 300 by 300 pixel box
with a 1px border and 10px By adding 10px of padding on all
padding. four sides of the content, we have
</div>
effectively made our box 320px by
<p>This is outside the box.</p>
320px (321px by 321px with the
border).
Setting the Padding Size
• To define padding, use:
– padding: value
– where value = a length value or a
percentage (a padding proportional to the
element’s width)
Setting the Padding Size
• To set margins on a side, use:
– padding-top
– padding-right
– padding-bottom
– padding-left
Adding margin:
<head>
This is a 300 by 300 pixel box
<style type="text/css">
with a 1px border and 10px
.box300 { padding and 10px margin.
width:300px;
height:300px;
border:1px solid black;
padding:10px; The dotted
margin:10px; line here
shows
} where the
</style> margin is but
it will not
</head>
show on the
actual page.
This is outside the box.
<div class="box300">
This is a 300 by 300 pixel box By adding 10px of margin on all
with a 1px border and 10px
four sides of the border, we have
Padding and 10px margin.
</div>
now made our box 341px by 341px
<p>This is outside the box.</p> overall.
Controlling the Margins
• To define the margins of an element, use:
– margin:value
– where value = a length value (“em” is often
used), a percentage (a margin proportional
to the element’s width, or auto
Controlling the Margins
• To set margins on a side, use:
– margin-top
– margin-right
– margin-bottom
– margin-left
• E.g., LI {margin-left:2em; margin-right:2em;
margin-top:1em; margin-bottom:1em}
Formatting the Border
• Border can be set in three ways:
– border-width
– border-style
– border-color
Formatting the Border
• To set the border, use:
– border:width_value style color
• To set borders on a side, use:
– border-top
– border-bottom
– border-left
– border-right

Example: boxmodel.html
Text Flow
• Floating
– Move an element to one side of the screen

• Example: floating.html
CSS media types
• CSS media types allow a programmer to decide what a
page should look like depending on the kind of media being
used to display the page.
• The most common media type for a web page is the screen
media type, which is a standard computer screen. Other
media types in CSS 2 include handheld, Braille, aural and
print.
• The handheld medium is designed for mobile Internet
devices, while Braille is for machines that can read or print web
pages in Braille. aural styles allow the programmer to give a
speech-synthesizing web browser more information about the
content of the web page.
• The print media type affects a web page’s appearance when it
is printed.
• Example: mediatypes.html
CSS Drop-Down Menu
• Drop-down menus are a good way to provide navigation links
on a website without using a lot of screen space.
• In this section, we take a second look at the :hover pseudoclass
and introduce the display property to create a drop-down menu
using CSS and XHTML.
• We will use this feature in a more advanced way to cause a
menu to appear when the mouse hovers over a menu button.
• The other important property we need is the display property.
• This allows a programmer to decide whether an element is
rendered on the page or not. Possible values include block,
inline and none.
• The block and inline values display the element as a block
element or an inline element, while none stops the element
from being rendered.
• Example: dropdown.html
User Style Sheets
• Format pages based on preferences
User Style Sheets

User style sheet in Internet Explorer.

You might also like