Cascading Style Sheets

Cascading Style Sheets

CSS Separate Style From Structure of a Web Page • Separation of content and presentation • Specify point size and font of text; • Set margins within a web page; • Create a distinctive style for individual web pages or sets of web pages; • Format style to one element of a web page or to a numerous pages; • Control color of different elements of a web page; • Etc.

Font Appearance of an Element • HTML code <H3 align="center"><font face="times new roman, times, serif" color="#800000">SPECIAL COLLECTION</a></font></h3> • CSS rule H3 { Font-family: times new roman, 'serif'; Color: #800000; Text-align: center; }

Understanding Style Rules • The style characteristics for an HTML element are expressed by Style Rules . • A set of style rules is called a Style Sheet. • Style rules are contained in the <STYLE> element in the document’s <HEAD> section. <Head> <Style type=“text/css”> P {color:blue; font-size: 24pt;} </Style> </Head>

Understanding Style Rules • A Style Rule is composed of two parts: a selector and a declaration. TH {color: red;}. • The Selector indicates the element to which the rule is applied. • The Declaration determines the property values of a selector. Declaration Selector

Understanding Style Rules • The Property specifies a characteristic, such as color, font-family, position, and is followed by a colon (:). • The Value expresses specification of a property, such as red for color, arial for font family, 12 pt for font-size, and is followed by a semicolon (;). P {color: red;} Property Value

Using the <STYLE> Element • The <STYLE> element is always positioned in the <HEAD> section of the document. • The <STYLE> element always contains <TYPE> attribute. The value “text/css” defines the style language as Cascading Style Sheets. <Head> <Style type=“text/css”> P {color:blue; font-size: 24pt;} </Style> </Head>

TypesStyle Sheets • Inline styles Sheets • Internal or Embedded styles Sheets • External Style Sheets

Inlinestyles Sheets • Affects individual HTML tag <html> ... <body> ... <p style=“font-family: Arial, sans- serif; color: blue; ”>some text</p> </body> </html> For individual elements using the STYLE attribute

Internal Style Sheets • Affects individual document <html> <head> ... <style type=“text/css”> p {font-family: Arial, sans-serif;} </style></head> <body> ... <p>some text</p> </body> </html>

External Style Sheet • Style Rules can be expressed in an external Style Sheet - a text document that doesn’t contain any HTML code. There is no <STYLE> element in an external style sheet. • Affect all documents that are linked to the style sheet • External Style Sheet has a .css extension. h1, h2, h3 {font-family: verdana, arial, 'sans serif'; color: #9933FF; text-align: center;}

Linking to an External Style Sheet • To link a Web page to an external style sheet a <LINK> element should be added within <HEAD> element of a document with the URL to a style sheet. It tells the browser to find a specified style sheet. <Head> <Title>Demo_1</Title> <Style type=“text/css”> <Link href=“style_1.css” Rel=“stylsheet”> </Style> </Head>

Linking to an External Style Sheet HREF attribute states the relative URL to the style sheet The REL attribute describes the relationship between the current document and the document identified by the href attribute <Head> <Title>Demo_1</Title> <Style type=“text/css”> <Link href=“style1.css”Rel=“stylsheet”> </Style> </Head>

Using the Class Attribute Selector • CLASS is an HTML attribute that assigns a class name to any HTML element on a Web page. • Can be used to identify which style sheet rules should be applied for the particular element of a Web page Element Class Selector A.nav:link {color:#FF3300; text-decoration: none;}

Using the Class Attribute Selector • A class name is created by declaring a style rule and adding (.) flag character indicating that the selector is a class selector. • Add it to HTML code of a Web page by using the CLASS attribute. A.nav:link {color:#FF3300; text-decoration: none;} <a href="http://www.xyz.org" class="nav“>XYZ</a>

Orderofprecedence • HTML formatting instructions (e.g. <font> tags) • Inline styles • Embedded styles • External styles • Default browser styles

SomeConversions • 1pt=1/72in • Pc(picas)=12pt • 1em =current size of font • 1ex=1em/2

Typesof CSS styles • Styles assigned to a HTML element • Class selector styles • Define different styles for one or more HTML elements • Assigned to the class attribute within an HTML element • ID selector styles • Define different styles for one and the same HTML element • Assigned to the ID attribute within an HTML element

Class selector styles • CSS: … .blue {color: #082984} .red {color: #de2131} • HTML … <h1 class=“red”>Headline</h1> <p class=“red”>a summary</p> <p class=“blue”>some text</p> …

Pseudo-classes • Used when an HTML element can display more than one behavior (e.g. hyperlinks) • CSS: a:link {color: #000} a:visited {color: #000} a:hover {color: #69f} a:active {color: #000} • HTML <a href=“nextpage.html”>Next page</a>

ID Selector styles • CSS … #red_heading {color: red} #summary {color: red} p#conclusion {color: blue} • HTML … <h1 id=“red_heading”>Headline</h1> <p id=“summary”>Summary</p> <p id=“conclusion”>Conclusion</p>

Positioning Elements <body> <p><img src = "i.gif“ position: absolute; top: 0px; left: 0px; z-index: 1“ alt = "First positioned image" /></p> <p style = "position: absolute; top: 50px; left: 50px; z-index: 3; font-size: 20pt">Positioned Text </p> <p> <img src = "circle.gif“ position: absolute; top: 25px; left: 100px; z-index: 2" alt = "Second positioned image" /></p></body> If z-index is not specified or all the element have same z-index then they are positioned according to their occurrence.

Output:

Backgrounds To set the background of body web page we use this property. body { background-image: url(logo.gif); background-position: center(50%,30px); (top, bottom) background-repeat: no-repeat; (repeat-x, repeat-y) background-attachment: fixed; (scroll)} p { font-size: 18pt; color: #aa5588; text-indent: 1em; font-family: Arial, sans-serif; } .dark { font-weight: bold }

Element Dimensions To set the dimension of elements like margin between two elements. <style type = "text/css"> div { background-color: #ffccff; margin-bottom: .5em } </style> <div style = "width: 20%“>Computer Engineering</div> <div style = "width: 80%; text-align: center"> Institute of Technology</div> <div style = "width: 20%; height: 30%; overflow: scroll"> Nirma University</div>

Output:

Text Flow and the Box Model <div style = "float: right; margin: .5em; text-align: right"> Corporate Training and Publishing </div> <p>Deitel & Associates</p> <div style = "float: right; padding: .5em; text-align: right"> Leading-Edge Programming Textbooks</div> <p>The company's clients include many Fortune 1000 companies.</p> <p style = "clear: right">Through its publishing partnership with Prentice Hall, Deitel & Associates, Inc. publishes leading-edge programming textbooks and professional books.</p>

Output:

Borders <style type = "text/css"> body { background-color: #ccffcc } div { text-align: center; margin-bottom: .3em; width: 50%; position: relative; left: 25%; padding: .3em }</style></head> <body> <div style = "border-style: solid">Solid border</div> <div style = "border-style: double">Double border</div> <div style = "border-style: groove">Groove border</div> <div style = "border-style: ridge">Ridge border</div> <div style = "border-style: inset">Inset border</div> <div style = "border-style: outset">Outset border</div> </body></html>

Output:

Borders <style type = "text/css"> body { background-color: #ccffcc } div { text-align: center;margin-bottom: 1em; padding: .5em } .thick { border-width: thick } .groove { border-style: groove }.inset { border-style: inset } .red { border-color: red } .blue { border-color: blue } </style> </head> <body> <div class = "thick groove">This text has a border</div> <p class = "thik red inset">A thin red line...</p> <div class = "thik blue inset">A thik blue line...</div> </body>

Output:

Cascading Style Sheets