Sunteți pe pagina 1din 13

Unit-1 CSS

What is CSS?
Cascading Style Sheets (CSS) are a powerful way to affect the presentation of a document or a collection of
documents. Cascading Style Sheets (CSS) represent a major breakthrough in how Web-page designers work
by expanding their ability to control the appearance of Web pages which are the documents that people
publish on the Web.
! style sheet is a set of stylistic guidelines that tell a browser how an "#$% document is to be presented to
users. With CSS you can specify such styles as the si&e color and spacing of text as well as the placement
of text and images on the page.
! key feature of CSS is that style sheets can cascade. #hat is se'eral different style sheets can be attached
to a document and all of them can influence the document(s presentation. )n this way an author can create a
style sheet to specify how the page should look while a reader can attach a personal style sheet to adjust the
appearance of the page for human or technological limitations such as poor eyesight or a personal
preference for a certain font.
Styles Solve a Common Problem
"#$% tags were originally designed to define the content of a document. #hey were supposed to say *#his
is a header* *#his is a paragraph* *#his is a table* by using tags like +h,- +p- +table- and so on. #he
layout of the document was supposed to be taken care of by the browser without using any formatting tags.
!s the two major browsers - .etscape and )nternet /xplorer - continued to add new "#$% tags and
attributes (like the +font- tag and the color attribute) to the original "#$% specification it became more
and more difficult to create Web sites where the content of "#$% documents was clearly separated from
the document(s presentation layout.
#o sol'e this problem the World Wide Web Consortium (W0C) - the nonprofit standard setting
consortium responsible for standardi&ing "#$% - created S#1%/S in addition to "#$% 2.3.
Style Sheets Can Save a Lot of Work
Styles sheets define "4W "#$% elements are to be displayed just like the font tag and the color attribute
in "#$% 0.5. Styles are normally sa'ed in external .css files. /xternal style sheets enable you to change the
appearance and layout of all the pages in your Web just by editing one single CSS document6
CSS is a breakthrough in Web design because it allows de'elopers to control the style and layout of
multiple Web pages all at once. !s a Web de'eloper you can define a style for each "#$% element and
apply it to as many Web pages as you want. #o make a global change simply change the style and all
elements in the Web are updated automatically.
Created By Deependra Rastogi Page 1
Unit-1 CSS
Syntax
CSS works by allowing you to associate rules with the elements that appear in a web page. #hese rules
go'ern how the content of those elements should be rendered. 7igure shows you an example of a CSS rule
which is made up of two parts8
#he selector which indicates which element or elements the declaration applies to (if it applies to
more than one element you can ha'e a comma - separated list of se'eral elements)
#he declaration which sets out how the elements referred to in the selector should be styled
#he selector links the "#$% document and the style sheet. )t specifies what elements are affected by the
declaration. #he declaration is the part of the rule that sets forth what the effect will be.#he rule in 7igure
applies to all + td - elements and indicates that they should be 09 pixels wide.
#he declaration is also split into two parts separated by a colon8
! property which is the property of the selected element(s) that you want to affect in this case
the width property.
! value which is a specification for this property: in this case it is that the table cells should be 09
pixels wide.
"ere is an example of a CSS rule that applies to se'eral different elements (in this example the + h, -
+ h5 - and + h0 - elements). ! comma separates the name of each element that this rule will apply to. #he
rule also specifies se'eral properties for these elements with each property - 'alue pair separated by a
semicolon. .ote how all the properties are kept inside the curly braces8
h, h5 h0 ;
font-weight8bold:
font-family8arial:
color8<333333:
background-color8<777777:
=
Created By Deependra Rastogi Page 2
Unit-1 CSS
Advantages of CSS
Consistency
>y making one change to your website?s CSS style sheet you can automatically make it to e'ery page of
your website. #he bigger your website the more time CSS sa'es you and not only does CSS sa'e time it
also ensure that your web pages ha'e consistent styling throughout your site.
Bandwidth Redction
When CSS separates your website?s content from its design language you dramatically reduces your file
transfer si&e your document will be stored externally and you will be accessed only once when the 'isitor
re@uest your website. )n Contrast when you create a website using tables e'ery page of your website will
be accessed with each 'isit. 1ou reduced bandwidth needs will result in a faster load time and could cut
your web hosting costs.
Search !ngines
CSS is considered a clean coding techni@ue which means search engine won?t ha'e to struggle to AreadB its
content. !lso using CSS will lea'e your website with more content then code and content is crucial to your
search engine success.
Browser Com"atibility
#he recent arri'al of Coogle Chrome is further e'idence that today?s internet users ha'e more browser
option than e'er before which makes browser compatibility a major issue for your website.CSS style sheets
increase your websites adaptability and ensure that more 'isitor will be able to 'iew your website in the
way you intended.
#iewing $"tion
!nother Common web design concern is the increasing need to make websites a'ailable for different
media.CSS can help you tackle this challenge by allowing the same markup page to be presented in
different 'iewing stylesDfor example you may create a separate style sheet for print or for a mobile de'ice.
Created By Deependra Rastogi Page 3
Unit-1 CSS
%y"es of Style Sheet
)nline Style Sheet
/mbedded Style Sheet
/xternal Style Sheet
)mported Style Sheet
&nline Style Sheet
!n inline style loses many of the ad'antages of style sheets by mixing content with presentation. Ese this
method sparingly such as when a style is to be applied to a single occurrence of an element.
#o use inline styles you use the style attribute in the rele'ant tag. #he style attribute can contain any CSS
property. #he example shows how to change the color and the left margin of a paragraph8
+p styleF*color8 sienna: margin-left8 53px*-
#his is a paragraph
+Gp-
!mbedded or &nternal Style Sheet
!n internal style sheet should be used when a single document has a uni@ue style. 1ou define internal styles
in the head section by using the +style- tag like this8
+head-
+style typeF*textGcss*-
hr ;color8 sienna=
p ;margin-left8 53px=
body ;background-image8 url(*imagesGback23.gif*)=
+Gstyle-
+Ghead-
#he browser will now read the style definitions and format the document according to it.
A browser normally ignores unknown tags. This means that an old browser that does not support styles,
will ignore the <style> tag, but the content of the <style> tag will be displayed on the page. It is possible to
prevent an old browser from displaying the content by hiding it in the HT! comment element"
+head-
+style typeF*textGcss*-
+6--
hr ;color8 sienna=
p ;margin-left8 53px=
body ;background-image8 url(*imagesGback23.gif*)=
---
+Gstyle-
+Ghead-
Created By Deependra Rastogi Page 4
Unit-1 CSS
!xternal Style Sheet
!n external style sheet is ideal when the style is applied to many pages. With an external style sheet you
can change the look of an entire Web site by changing one file. /ach page must link to the style sheet using
the +link- tag. #he +link- tag goes inside the head section8
+head-
+link relF*stylesheet* typeF*textGcss*
hrefF*mystyle.css* G-
+Ghead-
#he browser will read the style definitions from the file mystyle.css and format the document according to
it.
!n external style sheet can be written in any text editor. #he file should not contain any html tags. 1our
style sheet should be sa'ed with a .css extension. !n example of a style sheet file is shown below8
hr ;color8 sienna=
p ;margin-left8 53px=
body ;background-image8 url(*imagesGback23.gif*)=
Ho '$% lea'e spaces between the property 'alue and the units6 )f you use *margin-left8 53 px* instead of
*margin-left8 53px* it will only work properly in )/9 but it will not work in $o&illaG7irefox or .etscape.
!xam"le() *
ex*+css
body ;background-color8 yellow=
h, ;font-si&e8 09pt=
h5 ;color8 blue=
p ;margin-left8 I3px=
,tml -ile
+html-
+head-
+link relF*stylesheet* typeF*textGcss* hrefF*ex,.css* G-
+Ghead-
+body-
+h,-#his header is 09 pt+Gh,-
+h5-#his header is blue+Gh5-
+p-#his paragraph has a left margin of I3 pixels+Gp-
+Gbody-
+Ghtml-
!xam"le().
Created By Deependra Rastogi Page 5
Unit-1 CSS
ex.+css
body ;background-color8 tan=
h, ;color8maroon: font-si&e853pt=
hr ;color8na'y=
p ;font-si&e8,,pt: margin-left8 ,Ipx=
a8link ;color8green=
a8'isited ;color8yellow=
a8ho'er ;color8black=
a8acti'e ;color8blue=
,tml -ile
+html-
+head-
+link relF*stylesheet* typeF*textGcss* hrefF*ex5.css* G-
+Ghead-
+body-
+h,-#his is a header ,+Gh,-
+hr G-
+p-1ou can see that the style sheet formats the text+Gp-
+p-+a hrefF*..G..Gwww.w0schools.comGdefault.htm* targetF*Jblank*-#his is a link+Ga-+Gp-
+Gbody-
+Ghtml-
Created By Deependra Rastogi Page 6
Unit-1 CSS
Class and &/ Selectors
#he selectors we('e used refer only to document elements: they(re fine up to a point but there are times
when you need something a little more speciali&ed.
)n addition to raw document elements there are two other types of selectors8 class selectors and I#
selectors which let you assign styles in a way that is independent of document elements. #hese selectors
can be used on their own or in conjunction with element selectors.
7or example say you(re drafting a document that discusses ways of handling plutonium. #he document
contains 'arious warnings about safely dealing with such a dangerous substance. 1ou want each warning to
appear in boldface text so that it will stand out. "owe'er you don(t know which elements these warnings
will be. Some warnings could be entire paragraphs while others could be a single item within a lengthy list
or a small section of text. So you can(t define a rule using simple selectors of any kind. Suppose you tried
this route8
p ;font-weight8 bold:=
!ll paragraphs would be bold not just those that contain warnings. 1ou need a way to select only the text
that contains warnings or more precisely a way to select only those elements that are warnings. "ow do
you do itK 1ou apply styles to parts of the document that ha'e been marked in a certain way independent of
the elements in'ol'ed by using class selectors.
Class Selectors
#he C%!SS attribute enables you to apply declarations to a group of elements that ha'e the same 'alue on
the C%!SS attribute. !ll elements inside >4H1 can ha'e a C%!SS attribute. /ssentially you classify
elements with the C%!SS attribute create rules in your style sheet that refer to the 'alue of the C%!SS
attribute and then the browser automatically applies those rules to the group of elements.
7or example say that you are an actor rehearsing for the role of Lolonius in Shakespeare(s "amlet. )n your
copy of the manuscript you want all the lines by Lolonius to stand out. #he first step to achie'e this is to
classify Lolonius( lines: that is set the C%!SS attribute on all elements that contain lines by Lolonius.
)n 7igure the class name chosen is L4%4.)ES. !uthors pick class names.
Class names must be single words although you can use digits and dashes. #he following are all acceptable
class names8
L4%4.)ES
Created By Deependra Rastogi Page 7
Unit-1 CSS
name-,3
first-remark
>ut the following are not8
#he man (contains a space)
itemM,5 (contains a plus sign)
last66 (contains exclamation marks)
)n contrast to element names class names are case-sensiti'e which means you must spell class names in the
style sheet with exactly the same uppercase and lowercase letters as in the "#$% source file.
#he next step is to write style rules with selectors that refer to the class name. ! selector that includes a
class name is called a class selector. 7igure shows a rule with a selector that selects all of Lolonius(
elements.
#he class selector starts with a flag character (the period) which signals what type of selector follows. 7or
class selectors the period was chosen because it is associated with the term *class* in many programming
languages. #ranslated into /nglish the flag character reads *elements with class name.* #he whole selector
says *elements with class name L4%4.)ES.* !uthors are free to choose class names. !ssuming that you
ha'e consistently classified elements containing lines by Lolonius they will be printed in a bold font.
%et(s look at a complete example that introduces a second class8
+"#$%-
+#)#%/-"amlet excerpt from act ))+G#)#%/-
+S#1%/ #1L/F*textGcss*-
.L4%4.)ES ; font-weight8 bold =
."!$%/# ; font-weight8 normal =
+GS#1%/-
+>4H1-
+L C%!SSFL4%4.)ES- Lolonius8 Ho you know me my lordK
Created By Deependra Rastogi Page 8
Unit-1 CSS
+L C%!SSF"!$%/#- "amlet8 /xcellent well1ou are a fishmonger.
+L C%!SSFL4%4.)ES- Lolonius8 .ot ) my lord.
+L C%!SSF"!$%/#-"amlet8 #hen ) would you were so honest a man.
+G>4H1-
+G"#$%-
)n this example two classes ha'e been defined "!$%/# and L4%4.)ES. #he result is shown in 7igure
!s you can see Lolonius( lines stand out. #his is an in'aluable tool when you rehearse a role.
4ne could argue that the same result could be achie'ed without style sheets. >y enclosing Lolonius( lines in
S#N4.C or > elements they would also come out bold. #his is true but consider the conse@uences when
the actor who is scheduled to play "amlet catches a cold and you ha'e to replace him. .ow you suddenly
need "amlet(s lines to stand out and Lolonius( lines to use the normal font weight. )f you had been using
S#N4.C elements to emphasi&e Lolonius( lines you(d ha'e to remo'e them and add them to "amlet(s lines
instead. >ut if you use CSS you simply change two lines in the style sheet8
.L4%4.)ES ; font-weight8 normal =
."!$%/# ; font-weight8 bold =
#his re'erses the effect and "amlet(s lines stand out now.
#he C%!SS attribute is a powerful feature of CSS. We recommend that you use the C%!SS attribute to add
more information about elements O information that can enhance the presentation of your documents. We
do not recommend that you use the C%!SS attribute to completely change the presentation of an element.
7or example you can easily change an %) element to look like an ", element by classifying it. )f you want
Created By Deependra Rastogi Page 9
Unit-1 CSS
an element to look like ", we recommend that you mark it up as ",. Ho not let style sheets replace the
structure of your documents: instead let the style sheets enhance the structure.
&/ Selector
#he )H attribute works like the C%!SS attribute with one important difference8 #he 'alue of an )H attribute
must be uni@ue throughout the document. #hat is e'ery element inside >4H1 can ha'e an )H attribute but
the 'alues must all be different. #his makes the )H attribute useful for setting style rules on indi'idual
elements. ! selector that includes an )H attribute is called an )H selector.
.otice that the flag character for )H selectors is a hash mark (<). #he flag character alerts the browser that
an )H 'alue is coming up next. )n /nglish the selector says *the element with an )H 'alue e@ual to xy&02.*
#he entire rule reads *#he element with an )H 'alue e@ual to xy&20 is to be underlined.* #he author is free
to pick the 'alue of the )H attribute and the chosen 'alue is case-insensiti'e.
#he "#$% syntax of the element on which you want to use the )H attribute resembles that of other
elements with attributes: for example8
+L )HFxy&02-Enderlined text+GL-
Combined with this style sheet rule the content of the element will be underlined. >ecause the 'alue of the
)H attribute must be uni@ue you could not also include in the same document another usage of it such as
the following8
+", )HFxy&02-! headline+G",-
+L )HFxy&02-Enderlined text+GL- +6-- WN4.C6 ---
)nstead you would ha'e to gi'e the two elements different )H 'alues8
+", )HFxy&02-! headline+G",-
+L )HFxy&0I-Enderlined text+GL-
Created By Deependra Rastogi Page 10
Unit-1 CSS
"ere is a complete example using an )H selector8
+"#$%-
+#)#%/-)H showoff+G#)#%/-
+S#1%/ #1L/F*textGcss*-
<xy&02 ; text-decoration8 underline =
+GS#1%/-
+>4H1-
+L )HFxy&02-Enderlined text+GL-
+G>4H1-
+G"#$%-
>y using the )H selectors you can set style properties on a per-element basis. %ike C%!SS )H is a
powerful feature. )t carries the same cautions we set out in the pre'ious section.
Created By Deependra Rastogi Page 11
Unit-1 CSS
/eciding Between Class and &/
1ou may assign classes to any number of elements as demonstrated earlier: the class name warning was
applied to both a p and a span element and it could ha'e been applied to many more elements. )Hs on the
other hand are used once and only once within an "#$% document. #herefore if you ha'e an element
with an id 'alue of lead-para no other element in that document can ha'e an id 'alue of lead-para.
)n the real world browsers don(t usually check for the uni@ueness of )Hs in "#$%
which means that if you sprinkle an "#$% document with se'eral elements all of
which ha'e the same 'alue for their )H attributes you(ll probably get the same styles
applied to each. #his is incorrect beha'ior but it happens anyway. "a'ing more than
one of the same )H 'alue in a document also makes H4$ scripting more difficult
since functions like get/lement>y)d( ) depend on there being one and only one
element with a gi'en )H 'alue.
Enlike class selectors )H selectors can(t be combined since )H attributes do not permit a space-separated
list of words.
4n a purely syntactical le'el the dot-class notation (e.g. .warning) is not guaranteed to work for P$%
documents. !s of this writing the dot-class notation works in "#$% SQC and $ath$% and it may well
be permitted in future languages but it(s up to each language(s specification to decide that. #he hash-)H
notation (e.g. <lead) will work in any document language that has an attribute that enforces uni@ueness
within a document. Eni@ueness can be enforced with an attribute called id or indeed anything else as long
as the attribute(s contents are defined to be uni@ue within the document.
!nother difference between class and id names is that )Hs carry a hea'ier weight when trying to determine
which styles should be applied to a gi'en element. )(ll explain this in greater detail in the next chapter.
%ike classes )Hs can also be selected independently of an element. #here may be circumstances in which
you know that a certain )H 'alue will appear in a document but you don(t know the element on which it
will appear (as in the plutonium-handling warnings) so you(ll want to declare standalone )H selectors. 7or
example you may know that in any gi'en document there will be an element with an )H 'alue of
most)mportant. 1ou don(t know whether that most important thing will be a paragraph a short phrase a list
item or a section heading. 1ou know only that it will exist in each document occur in an arbitrary element
and appear no more than once. )n that case you would write a rule like this8
<most)mportant ;color8 red: background8 yellow:=
#his rule would match any of the following elements (which as ) noted before should not appear together
in the same document because they all ha'e the same )H 'alue)8
+h, idF*most)mportant*-#his is important6+Gh,-
+em idF*most)mportant*-#his is important6+Gem-
Created By Deependra Rastogi Page 12
Unit-1 CSS
+ul idF*most)mportant*-#his is important6+Gul-
!lso note that class and )H selectors may be case-sensiti'e depending on the document language. "#$%
and P"#$% define class and )H 'alues to be case-sensiti'e so the capitali&ation of your class and )H
'alues must match that found in your documents. #hus in the following pairing of CSS and "#$% the
element will not be boldfaced8
p.critical)nfo ;font-weight8 bold:=
+p classF*criticalinfo*-Hon(t look down.+Gp-
>ecause of the change in case for the letter *)* the selector will not match the element shown.
Some older browsers did not treat class and )H names as case-sensiti'e but all current
browsers as of this writing enforce case sensiti'ity.
Created By Deependra Rastogi Page 13

S-ar putea să vă placă și