WEB TECHNOLOGIES. UNIT II introduction to the style sheets and java script. 4. Cascading Stylesheets. 5. An Introduction to Java Script

Size: px

Start display at page:

Download "WEB TECHNOLOGIES. UNIT II introduction to the style sheets and java script. 4. Cascading Stylesheets. 5. An Introduction to Java Script"

Deborah Sims
6 years ago
Views:

1 Web Technologies 1 WEB TECHNOLOGIES UNIT II introduction to the style sheets and java script Chapters: 4. Cascading Stylesheets 5. An Introduction to Java Script

2 4. Cascading Stylesheets 1. Define and Explain CSS and STYLE. Web Technologies 2 CSS is an acronym which means Cascading Style Sheets. A style sheet is made up of style rules that tell a browser how to present a document. As the name suggests, CSS is a special purpose stylesheet language and it helps in defining the format of presentation for any document that has been written in a markup language like the HTML. A STYLE is simply a set of formatting instructions that can be applied to a piece of text. There are three mechanisms by which we can apply styles to our HTML documents: The style can be defined within the basic HTML tag (This is also known as Inline Style). Styles can be defined in the section and applied to the whole document (This is known as Internal Style). Styles can be defined in external files called stylessheets which can then be used in any document by including the stylesheet via a URI (This is also known as External Style). Styles can be cascaded i.e., the formats override any which were defined or included earlier in the document. 1 Inline Style: <title> Inline Style </title> <h1> Inline Style sheet </h1> <p> The first paragraph is left unaltered. </p> <p style= margin-left : 10%; border: ridge; background: #ffffcc > But this paragraph undergoes some fairly radical alterations. </p> <p> And we finish with an unaltered paragraph. </p>

3 Web Technologies 3 2 Internal Style: <title> Internal Style </title> h1{ color: red; border: thin groove; text-align:center; <h1> Internal Style Sheet </h1>

4 Web Technologies 4 3 External Style Step:1 Open a new file in Notepad and type the following code: h1{ color: red; border: thin groove; text-align:center; ** Save the file as css_v3.css Step:2 Open a new file in Notepad and type the following code: <title> Internal Style </title> <link rel="stylesheet" href="css_v3.css" type="text/css"> <h1> External Style Sheet </h1> ** Save the above file as css_v3.html and open it in the browser. 2. How can you define your own styles? a. Cascading Styles: Conventionally styles are cascaded i.e, a document consist a set of styles and also we can also import the required Stylesheets. But we can face cascade problem with imported stylesheets i.e., the first is overridden by the second, the second by the third and so on.

5 Web Technologies 5 b. Rules: A style has two parts: a selector and a set of declarations. The selector is used to create a link between the rule and the HTML tag. The declaration has two parts: a property and a value. Selectors can be placed into classes. Hence a tag can be formatted in variety of ways. Declarations must be using colons and terminated using semicolons. The general format is selector {property: value; property: value The declaration has three items: the property, a colon and the value. If we miss the colon or fail to put the semicolon between declarations, the style could not be processed. The rule will be more readable, if we put each declaration on its own line. This is explained in the following example: c. Classes: body { h1{ background-color: #eebd2; color: #eebd2; background-color: #d8a29b; font-family: Book Antiqua, Times,serief; border: thin groove #9baab2; A class is a definition of a set of styles which can be applied where we need. The classes are required to apply a style to some paragraphs. The above methods apply styles to all paragraphs in the same manner. The general format is: selector.classname {property; value; property: value <selector class=classname> The rule is slightly modified as unique name is appended with a dot (.) operator. In HTML document, when we want to use a named style, the tag is extended by including class=unique name.

6 Web Technologies 6 h1.fred{ color: #eeebd2; background-color: #d8a29b; font-family: Book Antiqua, Times, serif; border: thin groove #9baab2; Now we can use fred class in the following statement: d. Anonymous Classes: <h1 class= fred >A simple Heading</h1> To apply a piece of formatting to many different elements within a page but not necessary to the entire page. CSS provides a way of defining styles within reusable classes. <title>anonymous Classes</title>.fred{ color: #eeebd2; background-color: #d8a29b; font-family: Book Antiqua, Times, serif; border: thin groove #9baab2;

7 Web Technologies 7 <h1 class= fred >A Simple Heading</h1> <p class= fred >Applying the style fred to a paragraph of text</p> e. Including Stylesheets: We can include stylesheets in the tag using <link> and tags. The <link> tag defines the relationship between a document and an external resource. The <link> tag is most used to link to style sheets. This element goes only in the head section, but it can appear any number of times. The general format is: <link rel= StyleSheet href= url type= text/css media= screen > [<style type= text/css >] url(url); -> Where rel Required. Specifies the relationship between the current document and the linked document. href Specifies the location of the linked document. type Specifies the MIME type of the linked document media Specifies on what device the linked document will be displayed url Specifies address of new CSS file. <link rel= StyleSheet href= type= text/css media= screen > <style type= text/css url( -- >

8 Web Technologies 8 3. Explain properties and values in styles. A number of properties of the text can be altered. The following properties can change the style of our work. a. Fonts: Fonts are identified by giving the name of a specific font. In CSS, there are two types of font family names: generic family - a group of font families with a similar look (like "Serif" or "Monospace") font family - a specific font family (like "Times New Roman" or "Arial") The general format is <font-family>: <family name> [<generic family>] Generic family Font family Description Serif Times New Serif fonts have small lines at the ends on Roman some characters Georgia Sans-serif Arial "Sans" means without - these fonts do not Verdana have the lines at the ends of characters Monospace Courier New All monospace characters have the same Lucida width Console p{ Source Code: font-family:"times New Roman", Times, serif; p.serif{font-family:"times New Roman",Times,serif; p.sansserif{font-family:arial,helvetica,sans-serif;

Web Technologies 9 <h1>css font-family</h1> <p class="serif">this is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">this is a paragraph, shown in the Arial font.

9 Web Technologies 9 <h1>css font-family</h1> <p class="serif">this is a paragraph, shown in the Times New Roman font.</p> <p class="sansserif">this is a paragraph, shown in the Arial font.</p> Font Style: The font-style property is mostly used to specify italic text. This property has three values: normal - The text is shown normally italic - The text is shown in italics oblique - The text is "leaning" (oblique is very similar to italic, but less supported) p.normal {font-style:normal; p.italic {font-style:italic; p.oblique {font-style:oblique; Source Code:

Web Technologies 10 p.normal {font-style:normal; p.italic {font-style:italic; p.oblique {font-style:oblique; <p class="normal">this is a paragraph, normal.

10 Web Technologies 10 p.normal {font-style:normal; p.italic {font-style:italic; p.oblique {font-style:oblique; <p class="normal">this is a paragraph, normal.</p> <p class="italic">this is a paragraph, italic.</p> <p class="oblique">this is a paragraph, oblique.</p> Font-weight Property: The font-weight property sets how thick or thin characters in text should be displayed. The property values are: Value Description Normal Defines normal characters. This is default Bold Defines thick characters Bolder Defines thicker characters Lighter Defines lighter characters 100 Defines from thin to thick characters. 400 is the same as 200 normal, and 700 is the same as bold 300

11 Web Technologies In the above table, the first four are relative and remaining (numbers) are absolute weights. p.normal {font-weight:normal; p.thick {font-weight:bold; p.thicker {font-weight:900; Source Code: p.normal {font-weight:normal; p.light {font-weight:lighter; p.thick {font-weight:bold; p.thicker {font-weight:900; <p class="normal">this is a paragraph.</p> <p class="light">this is a paragraph.</p> <p class="thick">this is a paragraph.</p> <p class="thicker">this is a paragraph.</p>

12 Web Technologies 12 Font-size Property: The font-size property sets the size of a font. The property values are: Value Description Small Sets the font-size to a small size Medium Sets the font-size to a medium size. This is default Large Sets the font-size to a large size Smaller Sets the font-size to a smaller size than the parent element Larger Sets the font-size to a larger size than the parent element Length Sets the font-size to a fixed size in px (pixels), cm, etc. % Sets the font-size to a percent of the parent element's font size Source Code: h1 {font-size:250% h2 {font-size:200% p {font-size:100% h1 {font-size:250%; h2 {font-size:200%; p {font-size:100%;

13 Web Technologies 13 <h1>this is heading 1</h1> <h2>this is heading 2</h2> <p>this is a paragraph.</p> b. Backgrounds and Colors: The background-color property specifies the background color of an element. The background color of a page is defined in the body selector. The general format is color: <value> background-color: <value> transparent background-image: URL none The values should be given in hexadecimal values. The background color should be transparent and is default. Instead of a color, an image can be used, identified its URL. 1 h1{ background-color:#6495ed;

$<p>this paragraph has its own background color.</p> We are still in the div element. </div> 2 body{ background-image:url('img_tree.$

14 Web Technologies 14 p{ background-color:#e0ffff; div{ background-color:#b0c4de; <h1>css background-color example!</h1> <div> This is a text inside a div element. <p>this paragraph has its own background color.</p> We are still in the div element. </div> 2 body{ background-image:url('img_tree.png'); background-repeat:no-repeat;

Web Technologies 15 background-position:right top; margin-right:200px; <h1>hello World!</h1> <p>w3schools background no-repeat, set position example.

15 Web Technologies 15 background-position:right top; margin-right:200px; <h1>hello World!</h1> <p>w3schools background no-repeat, set position example.</p> <p>now the background image is only shown once, and positioned away from the text.</p> <p>in this example we have also added a margin on the right side, so the background image will never disturb the text.</p> *** In the above program, the body class can be rewritten using shorthand property as the following: body {background: url('img_tree.png') no-repeat right top; c. Text: i. Text Decoration: The text-decoration property is used to set or remove decorations from text. The textdecoration property is mostly used to remove underlines from links for design purposes. The general format is text-decoration: none underline overline line-through

Web Technologies 16 Source Code: h1 {text-decoration:overline; h2 {text-decoration:line-through; h3 {text-decoration:underline; h1 {text-decoration:overline; h2 {text-decoration:line-through; h3

16 Web Technologies 16 Source Code: h1 {text-decoration:overline; h2 {text-decoration:line-through; h3 {text-decoration:underline; h1 {text-decoration:overline; h2 {text-decoration:line-through; h3 {text-decoration:underline; <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> ii. Text-Transformation: The text-transform property controls the capitalization of text. The general format is text-transformation: none capitalization uppercase lowercase Property Values: Value Description None No capitalization. The text renders as it is. This is default Capitalize Transforms the first character of each word to uppercase Uppercase Transforms all characters to uppercase Lowercase Transforms all characters to lowercase

Web Technologies 17 p.uppercase {text-transform:uppercase; p.lowercase {text-transform:lowercase; p.capitalize {text-transform:capitalize; <p class="uppercase">this is some text.

17 Web Technologies 17 p.uppercase {text-transform:uppercase; p.lowercase {text-transform:lowercase; p.capitalize {text-transform:capitalize; <p class="uppercase">this is some text.</p> <p class="lowercase">this is some text.</p> <p class="capitalize">this is some text.</p> iii. Text-align: The text-align property specifies the horizontal alignment of text in an element. The general format is text-align: left right center justify Property Values: Value Left Right Center Justify Description Aligns the text to the left Aligns the text to the right Centers the text Stretches the lines so that each line has equal width (like in newspapers and magazines)

Web Technologies 18 h1 {text-align:center h2 {text-align:left h3 {text-align:right <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> iv.

18 Web Technologies 18 h1 {text-align:center h2 {text-align:left h3 {text-align:right <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> iv. Text-indentation: The text-indent property specifies the indentation of the first line in a text-block. Negative values are allowed. The first line will be indented to the left if the value is negative. The general format is text-indentation: length percentage Property Values: Value Description length Defines a fixed indentation in px, pt, cm, em, etc. % Defines the indentation in % of the width of the parent element

Web Technologies 19 p {text-indent:50px; <p>in my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

19 Web Technologies 19 p {text-indent:50px; <p>in my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.'</p> d. Boxes: All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements.

20 Web Technologies 20 The image below illustrates the box model: Explanation of the different parts: Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent Border - A border that goes around the padding and content. The border is affected by the background color of the box Padding - Clears an area around the content. The padding is affected by the background color of the box Content - The content of the box, where text and images appear i. Margin: The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. The general format is margin: length percentage auto {1, 4 Possible Values: Value Description auto The browser calculates a margin length Specifies a margin in px, pt, cm, etc. Default value is 0px % Specifies a margin in percent of the width of the containing element

Web Technologies 21 p{ background-color:yellow; p.margin{ margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; <p>this is a paragraph with no specified margins.

21 Web Technologies 21 p{ background-color:yellow; p.margin{ margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px; <p>this is a paragraph with no specified margins.</p> <p class="margin">this is a paragraph with specified margins.</p> Note: Margin - Shorthand property To shorten the code, it is possible to specify all the margin properties in one property. This is called a shorthand property. The shorthand property for all the margin properties is "margin". p{ background-color:yellow; p.margin{ margin:100px 50px;

22 Web Technologies 22 ii. Border-width: The border-width property sets the width of an element's four borders. This property can have from one to four values. The general format is border-width: thin thick medium length Property Values: Value Description Thin Specifies a thin border Medium Specifies a medium border. This is default Thick Specifies a thick border Length Allows us to define the thickness of the border p.one { border-style:solid; border-width:5px; p.two { border-style:solid; border-width:medium; p.three{ border-style:solid; border-width:1px; <p class="one">some text.</p>

23 Web Technologies 23 <p class="two">some text.</p> <p class="three">some text.</p> <p><b>note:</b> The "border-width" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> iii. Padding: The CSS padding properties define the space between the element border and the element content. The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. The general format is Possible Values: padding: length percentage {1, 4 Value Description Length Defines a fixed padding (in pixels, pt, em, etc.) % Defines a padding in % of the containing element

Web Technologies 24 p{ background-color:yellow; p.padding{ padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; <p>this is a paragraph with no specified padding.

24 Web Technologies 24 p{ background-color:yellow; p.padding{ padding-top:25px; padding-bottom:25px; padding-right:50px; padding-left:50px; <p>this is a paragraph with no specified padding.</p> <p class="padding">this is a paragraph with specified paddings.</p> Note: Padding - Shorthand property To shorten the code, it is possible to specify all the padding properties in one property. This is called a shorthand property. The shorthand property for all the padding properties is "padding". p{ background-color:yellow; p.padding{ padding:25px 50px;

25 Web Technologies 25 iv. Border-color: The border-color property sets the color of an element's four borders. This property can have from one to four values. The general format is Property Values: border-color: {1, 4 Value Description Color Specifies the background color. Look at CSS Color Values for a complete list of possible color values transparent Specifies that the border color should be transparent. This is default p.one { border-style:solid; border-color:#0000ff; p.two{ border-style:solid; border-color:#ff0000 #0000ff; p.three{ border-style:solid; border-color:#ff0000 #00ff00 #0000ff; p.four{ border-style:solid; border-color:#ff0000 #00ff00 #0000ff rgb(250,0,255);

Web Technologies 26 <p class="one">one-colored border!</p> <p class="two">two-colored border!</p> <p class="three">three-colored border!</p> <p class="four">four-colored border!

26 Web Technologies 26 <p class="one">one-colored border!</p> <p class="two">two-colored border!</p> <p class="three">three-colored border!</p> <p class="four">four-colored border!</p> <p><b>note:</b> The "border-color" property does not work if it is used alone. Use the "border-style" property to set the borders first.</p> v. Border-style: The border-style property sets the style of an element's four borders. This property can have from one to four values. The general format is border-style: none dotted dashed solid double groove ridge {1, 4 Property Values: Value Description None Specifies no border Dotted Specifies a dotted border dashed Specifies a dashed border Solid Specifies a solid border double Specifies a double border groove Specifies a 3D grooved border. The effect depends on the border-color value Ridge Specifies a 3D ridged border. The effect depends on the border-color value

Web Technologies 27 p.none {border-style:none; p.dotted {border-style:dotted; p.dashed {border-style:dashed; p.solid {border-style:solid; p.double {border-style:double; p.

27 Web Technologies 27 p.none {border-style:none; p.dotted {border-style:dotted; p.dashed {border-style:dashed; p.solid {border-style:solid; p.double {border-style:double; p.groove {border-style:groove; p.ridge {border-style:ridge; <p class="none">no border.</p> <p class="dotted">a dotted border.</p> <p class="dashed">a dashed border.</p> <p class="solid">a solid border.</p> <p class="double">a double border.</p> <p class="groove">a groove border.</p> <p class="ridge">a ridge border.</p> vi. Width: The width property sets the width of an element. The width property does not include padding, borders, or margins. The general format is width: length percentage auto

28 Web Technologies 28 Property Values: Value Description Auto The browser calculates the width. This is default Length Defines the width in px, cm, etc. % Defines the width in percent of the containing block vii. Height: The height property sets the height of an element. The height property does not include padding, borders, or margins. The general format is height: length auto percentage Property Values: Value Description Auto The browser calculates the height. This is default Length Defines the height in px, cm, etc. % Defines the height in percent of the containing block For Height and Width img.normal{ height:auto; img.big{ height:120px; p.ex{ height:100px; width:100px;

29 Web Technologies 29 <img class="normal" src="logocss.gif" width="95" height="84" /><br> <img class="big" src="csslogo.png" width="95" height="84" /> <p class="ex">the height and width of this paragraph is 100px.</p> <p>this is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph. This is some text in a paragraph.</p> e. Units and URLs: i. Lengths: These can be either absolute or relative. A relative length can be either positive or negative which is indicated by preceding the value with an optional + or -. Measurement Values: Unit Em Ex Px Description Relative Units that can be used are: 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses one ex is the x-height of a font (x-height is usually about half the font-size) pixels (a dot on the computer screen)

30 Web Technologies 30 In Cm Pt Pc Mm ii. URLs: relative. Allowable Absolute Units are: Inch Centimeter point (1 pt is the same as 1/72 inch) pica (1 pc is the same as 12 points) Millimeter URLs can be used in stylesheets as in HTML documents. The general format is url (location) URLs can may either absolute or relative. If a URL is partial it is considered to be 4. How can you format blocks information? a. Classes: b. Divisions: To design a HTML page in effective, there are three approaches. They are a. Classes b. Divisions c. Spans This is explained in Q.2. Please go through it. The <div> tag defines a division or a section in an HTML document. The <div> tag is used to group block-elements to format them with CSS. <p>this is some text.</p> <div style="color:#0000ff"> <h3>this is a heading in a div element</h3> <p>this is some text in a div element.</p> </div> <p>this is some text.</p>

31 Web Technologies 31 c. Spans: The <span> tag is used to group inline-elements in a document. The <span> tag provides no visual change by itself. The <span> tag provides a way to add a hook (clip) to a part of a text or a part of a document. <p>my mother has <span style="color:blue;fontweight:bold">blue</span> eyes and my father has <span style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p> 5. What is the purpose of Layers in designing a HTML page? Explain. Layers can be used in many situations. For example, the z-index is to create effects in headlines instead of creating these as graphics. It is faster to load text and for another, it provides a potentially better ranking in search engines. The position attribute is needed to create layer. The position can be either absolute or relative. The position itself is defined with the top and left properties. The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

$Web Technologies 32 img{ position:absolute; left:0px; top:0px; z-index:-1; <h1>this is a heading</h1> <img src="vishnu_logo.$

32 Web Technologies 32 img{ position:absolute; left:0px; top:0px; z-index:-1; <h1>this is a heading</h1> <img src="vishnu_logo.jpg" width="100" height="140" /> <p>because the image has a z-index of -1, it will be placed behind the text.</p> **********************

Control the letters in a text

Control the letters in a text This example demonstrates how to control the letters in a text. p.uppercase text-transform: uppercase p.lowercase text-transform: lowercase p.capitalize text-transform: capitalize