Post on 08-Apr-2018
transcript
8/7/2019 Cascading Style Sheets(final)
1/18
8/7/2019 Cascading Style Sheets(final)
2/18
Allow you to control the layout and look of yourpage easily
Styles define how to display HTML elements Style web pages written in a markup language
like HTML, XHTML etc. Allows the same markup page to be presented
in different styles for different rendering
methods(on-screen, in print etc.) Specifies a priority scheme to determine whichstyle rules apply if more than one rule matchesagainst a particular element
8/7/2019 Cascading Style Sheets(final)
3/18
The basic CSS syntax is made up of following
three parts:
Selector Property
Value
For ex:
8/7/2019 Cascading Style Sheets(final)
4/18
Three ways of inserting a style sheet:
Inline Style Sheet
(inside the HTML document, style on a singleelement, specified using the style attribute)
Embedded Style Sheet(Internal Style Sheet)
(blocks of CSS information inside the HTML itself) External Style Sheet
(separate CSS file referenced from the document)
8/7/2019 Cascading Style Sheets(final)
5/18
Page Level CSS
this requires the style sheet code to be embedded in a web page
Site Level CSS
somewhere in the website a single page is stored, usually with the
extension .css, containing style definitions: for example
Web Level CSS an extension of Site Level CSS in which the web page is stored
somewhere else on the Web and the link includes a complete URL:for instance
8/7/2019 Cascading Style Sheets(final)
6/18
What style will be used when there is more than onestyle specified for an HTML element?
All style will cascade into a new virtual style sheetby the following rules, where no. 4 has highestpriority:
1. Browser default (lowest priority)
2. External Style Sheet3. Internal Style Sheet
4. Inline Style Sheet (highest priority)
8/7/2019 Cascading Style Sheets(final)
7/18
If some properties have been set for the sameselector in different style sheets, the values will be
inherited from the more specific style sheet. For ex:, an external style sheet has these properties
for the h3 selector:
H3
{Color:red;Text-align:left;Font-size:8pt;}
8/7/2019 Cascading Style Sheets(final)
8/18
And an internal style sheet has these properties forh3 selector:
If the page with the internal style sheet also links tothe external style sheet the properties for h3selector will be:
H3{Text-align:right;Font-size:20pt;}
8/7/2019 Cascading Style Sheets(final)
9/18
The color is inherited from the external stylesheet and the text-alignment and the font-
size is replaced by the internal style sheet.
Color:red;Text-align:right;
Font-size:20pt;
8/7/2019 Cascading Style Sheets(final)
10/18
The fl at r erty ena les y t eter ine here t siti n anelement relative t the ther element n the a e.
When y se the fl at r erty, ther elements ill simply rap ar ndtheelement y applied the fl at t .
r example:
CSSfloat
If your browser supports the CSS float Property, this text
will be flowing around the heading. If this does not seem to work, it could
be a browser compatibility thing...
8/7/2019 Cascading Style Sheets(final)
11/18
It is directly responsible for the layout of the website. It determines how a particular element is positioned on the
site. If the positioning property is not used properly, the websites
layout can become rather messy and crippled.
Relative PositioningAbsolute Positioning Fixed Positioning Static Positioning
8/7/2019 Cascading Style Sheets(final)
12/18
defined by the top, bottom, left and right CSS properties determine how much an element will shift in relation to its natural position
these four additional properties have default value of 0. they can accept both positive and negative values.
this is a paragraph having no style
this is a paragraph having relativepositioning
This is a paragraph having relativepositioning
8/7/2019 Cascading Style Sheets(final)
13/18
element ill epositioned a solutely it ill not affect other elements, and it ill epositioned according to its
containing lock if a solutepositioning is used, topor ottom, left or right, and idth andheightshould eused as ell.
odyp>This is a paragraphhavingno style
Thisis a paragraphhaving a solutepositioning
xyza c
8/7/2019 Cascading Style Sheets(final)
14/18
a subcategory of Absolute Positioning if an element has this type of position assigned, its viewport is the same as its
containing block. on the computer screen, an element using a fixed CSS positioning will not move
if a website is scrolled.
8/7/2019 Cascading Style Sheets(final)
15/18
Media Type Description
all For all media type device.
aural For speech synthesizers.
braille For Braille tactile feedback devices.
embossed For paged Braille printers.
handheld For handheld devices.
print For printed versions and print preview onthe screen.
projection For projected presentations such as
projectors and transparencies.
screen Computer screens.
tty Media using a fixed-pitch character grid,such as teletypes, terminals, or portable
devices with limited display capabilities.
Tv Television-type devices.
8/7/2019 Cascading Style Sheets(final)
16/18
There are two methods for creating separate stylesdepending on the media type:
Use the @media rule. For example:
Use the media attribute when linking to an external stylesheet. For example:
@media print{
p{font-family: Georgia, times, serif}}
8/7/2019 Cascading Style Sheets(final)
17/18
Advantages: CSS saves times
(CSS automatically apply the specified styles whenever that elementoccurs)
Pages load faster(less code means faster download times)
Easy maintenance(to change the style of an element, you only have to make an edit in one
place)
Superior styles to HTML(CSS has a much wider array of attributes than HTML)
Disadvantages: Browser compatibility
Advantages and Disadvantages
8/7/2019 Cascading Style Sheets(final)
18/18
The if statement in CSS is placed within an HTML commentconstruct.
It is used to identify the browser version for Internet Explorer, andload various parts of the style sheet based on that parameter.
The constructs only works with IE because the browser IE is theonly one that interprets HTML comments instead of ignoringthem entirely. Other browsers, on the other hand, do not interpretcomments at all.
The notation is similar to standard if statement, asdemonstrated in the following example:
Thisis Internet Explorer