Unit 6. Lesson 6.1. Cascading Style Sheets. Introduction. Overview of Cascading Style Sheets. Why CSS. What is CSS?

Size: px

Start display at page:

Download "Unit 6. Lesson 6.1. Cascading Style Sheets. Introduction. Overview of Cascading Style Sheets. Why CSS. What is CSS?"

Holly Oliver
5 years ago
Views:

1 Cascading Style Sheets Unit 6 Cascading Style Sheets Introduction Lesson 6.1 Overview of Cascading Style Sheets Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable. Used to control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects. CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document. CSS code can be reuse in multiple HTML pages.. To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. You can define a style for each HTML element and apply it to as many Web pages as you want. Upon completion of this unit you will be able to: Explain why CSS. Describe CSS. Outcomes Write syntax of CSS. Why CSS What is CSS? HTML was intended to define the content of a document, like: <H1>This is heading1</h1> <P>This is a paragraph</p> CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. Cascading Style Sheets is a way to style and present HTML. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what 124

2 Internet Technology and Web Designing background images or colors are used, as well as a variety of other effects.css is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML. You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. CSS Syntax CSS has two main parts one is selector, and the other one is declarations (may be one or more) Where usually the selector is the HTML element you want to style, - Declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value and - Declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets p {color:red;text-align:center;} You can also write one declaration on each line, like this: p { color:red; text-align:center; } Before you begin the CSS you should know the basic understanding of HTML. Note it! 125

3 Overview of Cascading Style Sheets Id and class Selectors To setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". id Selector Class Selectors The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1": #para1 { text-align:center; color:red; } Using classes is very simple. Let's try this with example of making paragraphs that perform differently. First, we begin with the CSS code; make a note of the strike through text. CSS Code1 p.first{ color: blue; } p.second{ color: red; } HTML Code <html> <body> <p>this is a normal paragraph.</p> <p class="first">this paragraph uses the p.first CSS code. </p> <p class="second">this paragraph uses the p.second CSS code. </p> CSS Code2 p{ color: red; font-size: 20px; } p.test1{ color: blue; } p.test2{ font-size: 12px; } HTML Code <html> <body> <p>this is a normal paragraph.</p> <p class="test1">this paragraph uses the p.test1 CSS code. </p> <p class="test2">this paragraph uses the p.test2 CSS code. </p> This is a normal paragraph. This is paragraph uses the p.test1 CSS code. The p.test1 paragraph remained the same size, but its color changed. This is paragraph uses the p.test2 CSS code. The p.test2 paragraph remained the same color, but its size changed. <html> <head> <style> p.first{ background-color: gray; } p.second{ background-color: red; } p.third { 126

4 Internet Technology and Web Designing Inline styles background: purple; color: white; } </style> </head> <body> <h2>css Classes</h2> <p class="first">this is the p.first paragraph</p> <p class="second">this is the p.second paragraph</p> <p class="third">this is the p.third paragraph</p> </body> </html> Inline style is the style attached to one specific element. The style is specified directly in the start tag as a value of the STYLE attribute and will apply exclusively to this specific element occurrence. The example shows how to change the color and the left margin of a paragraph <p style="color: red;margin-left:20px;">this is a paragraph -Text.</p> Internal styles Embedded, or internal, styles are used for the whole page, you can define internal styles inside the head section of an HTML page, and the style tags surround all of the styles for the page. 1 <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("imgcss.jpg ");} </style> </head> 2 <html> <head> <title>css </title> <style> p.para1 { color: red; } p.para2{ color: blue; } </style> 127

5 Overview of Cascading Style Sheets External styles The example 2 will make the paragraphs1 in the page as red and the paragraph2 as76gffhgddscfdr blue. External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like: p{ color: red; } a{ color: blue;} If this file is saved as style.css in the same directory as your HTML page then it can be linked to in the HTML like this: <html> <head> <title>css </title> <link rel="stylesheet"href="style.css"> External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file. Activity 1. Read the following code and Mention the style that it belongs? Write short notes on it. <html> <head> <title>css </title> <style> p.para1 { color: red; } p.para2{ color: blue; } </style> 128

6 Internet Technology and Web Designing Assessment Assessment Fill in the blanks 1. CSS provides powerful control over the presentation of document. 2. styles are used for the whole page. State whether the following statements are true or false 1. CSS are case sensitive. Multiple Choice questions 1. What does CSS stand for? a) Creative Style Sheets. b) Colorful Style Sheets c) Cascading Style Sheets d) Computer Style Sheets. 2. Which styles have the separate CSS file? a) Inline. b) Internal. c) External. d) None of the above. 3. Which of the following are used to change the appearance and layout of all the pages in a Web site, just by editing one single file? a) External styles. b) Inline styles c) Internal styles d) All of the above. Exercises 1. a) What is CCS? b) Write the syntax of CSS and give one example. 2. Compare CSS with HTML. 2. What does the "Cascading" in "Cascading Style Sheets" mean? 3. What is the difference between 'class' and 'id'? Briefly explain with example. 4. What is inline style? How to link? 5. What are styles are available in CSS. Explain them with suitable example 129

7 Cascading Style Sheets- 2 Lesson 6.2 Cascading Style Sheets- 2 Upon completion of this unit you will be able to: Change Background color with CSS. Outcomes CSS Background The background of your website is very important, CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position Use a light background with dark text for better looking. Tip Background Color The background-color property specifies the background color of an element. The background color of a page is defined in the body selector: body {background-color:#b0c4de;} With CSS, a color is most often specified by: Color name - like "red" RGB value - like "rgb(255,0,0)" HEX value - like "#ff0000" Color and background-color must be the American English color and not colour. Note it! 130

Internet Technology and Web Designing The following values, all produce the same result: red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 Predefined color include aqua, black, blue, fuchsia, gray,

8 Internet Technology and Web Designing The following values, all produce the same result: red rgb(255,0,0) rgb(100%,0%,0%) #ff0000 #f00 Predefined color include aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, sienna, teal, white, and yellow. RGB defines the individual values for Red, Green, and Blue. form: rgb (Red, Green, Blue); with the range of for each value. These values can also be a percentage. Hexadecimal is a base-16 number system. We are generally used to the decimal number system (base-10, from 0 to 9), but hexadecimal has 16 digits, from 0-9, A to F. The hex number is prefixed with a hash sign (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#ff0000 becomes #f00,#cc9966 becomes #c96, etc.). The three-digit version is easier to decipher (the first digit, like the first value in RGB, is red, the second green and the third blue) but the six-digit version gives you more control over the exact color. <HTML> <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} </STYLE> <TITLE> MY FIRST CSS EXAMPLE </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BODY> </HTML> Figure 2.1 background color 131

Cascading Style Sheets- 2 Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

9 Cascading Style Sheets- 2 Background Image The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element. CSS Code p { background-image: url(shahidminar.jpg); } <HTML> <HEAD> <STYLE> BODY{BACKGROUND-IMAGE: URL(SHAHIDMINAR.JPG);} </STYLE> <TITLE> CSS EXAMPLE-IMAGE BACKGOUND </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BODY> </HTML> Figure 2.2 background image CSS Background Image Positioning If you would like to define where exactly an image appears within an HTML element, you may use CSS's background-position. Please take note that there are three different ways of defining position: length, percentages, and keywords. CSS Code p { } background-image: url(shahidminar.jpg); background-position: 20px 10px; 132

10 Internet Technology and Web Designing h4 { background-image: url(shahidminar.jpg); background-position: 30% 30%; } ol { background-image: url(shahidminar.jpg); } background-position: top center; 1. Choose the correct CSS syntax from the following? Activity I. body {color: black} II. body:color=black III. {body:color=black(body} IV. {body;color:black} 133

11 Cascading Style Sheets- 2 Assessment Fill in the blanks Assessment 1. RGB defines the individual values for,, and. State whether the following statements are true or false 1. For better looking Use a light background with dark text Multiple Choice questions 1. Which property is used to change the background color? a) background-color: b) bgcolor: c) bg-color d) color: 2. How do you add a background color for all "<h1>" elements? a) all.h1 {background-color:#ffffff} b) h1 {background-color:#ffffff} c) h1.all {background-color:#ffffff} d) all of the above. Exercises 1. How can you specify background images? 134

12 Internet Technology and Web Designing Lesson 6.3 Cascading Style Sheets- 3 Upon completion of this unit you will be able to: Specify FONT Outcomes CSS Font Font Family CSS font properties define the font family, boldness, size, and the style of a text. The font family of a text is set with the font-family property. The fontfamily property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". Note it! Font Style More than one font family is specified in a comma-separated list: P {font-family:"times New Roman", Times, serif;} 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). 135

13 Cascading Style Sheets- 3 Font Size p{font-style:normal;} p {font-style:italic;} p{font-style:oblique;} The font-size property sets the size of the Font. Being able to manage the Font size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs. Set Font Size with Pixels Setting the text size with pixels gives you full control over the text size: h1 {font-size:40px;} h2 {font-size:30px;} p {font-size:14px;} The example above allows Internet Explorer 9, Firefox, Chrome, Opera, and Safari to resize the text. Set Font Size with Em To avoid the resizing problem with older versions of Internet Explorer, many developers use em instead of pixels.1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px. h1 {font-size:2.5em;} /* 40px/16=2.5em */ h2 {font-size:1.875em;} /* 30px/16=1.875em */ p {font-size:0.875em;} /* 14px/16=0.875em */ In the example above, the text size in em is the same as the previous example in pixels. However, with the em size, it is possible to adjust the text size in all browsers. <HTML> <HEAD> <STYLE> BODY { BACKGROUND-COLOR: MAROON ; } H1 { FONT-SIZE:40PX; COLOR:FUCHSIA; TEXT-ALIGN:CENTER; BACKGROUND-COLOR:GRAY; } P.PARA1 136

14 Internet Technology and Web Designing { FONT-SIZE:40PX; } P.PARA2 { FONT-SIZE:2.5EM; FONT-STYLE:ITALIC; } </STYLE> <TITLE> CSS EXAMPLE-FONT </TITLE> </HEAD> <BODY> <H1> WELCOME TO MY FIRST WEB PAGE </H1> WE ARE THE STUDENT OF DCSA PROGRAM <P CLASS=PARA1>WE LOVE BANGLADESH</P> <P CLASS=PARA2>WE LOVE BANGLADESH</P> </BODY> </HTML> Figure 3.1 Color Font Para Activity 1. Read the example-1 and example-2 and write the difference between them. example-1: h1 {font-size:40px;} example-2:h1 {font-size:2.5em;} 137

15 Cascading Style Sheets- 3 Assessment Fill in the blanks Assessment 1. The font-style property is mostly used to specify text. State whether the following statements are true or false 1. The font-size property sets the size of the Font Multiple Choice questions 1. Which CSS property controls the Font size? a) font-style b) text-style c) font-size d) font:size 2.What is the correct CSS syntax for making all the <p> elements bold? a) p {text-size:bold} b) p {font-weight:bold} c) style:bold d) p{font:bold} Exercises 1. Describe font-style. 138

16 Internet Technology and Web Designing Lesson 6.4 Cascading Style Sheets- 4 Upon completion of this unit you will be able to: Outcomes Set the color of a TXET. Align the text of a document. Specify the text-indent property. Specify the text-decoration property. Text Color The color property is used to set the color of the text. With CSS, a color is most often specified by as same as what we see in the previous section Background color: Color name - like "red" RGB value - like "rgb(255,0,0)" HEX value - like "#ff0000" <HTML> <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} p.para1{color: green ;} p.para2{color: rgb(0,255,220) ;} </STYLE> <TITLE> CSS EXAMPLE-TEXT </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE <BR><BR> <p class= para1 >WE ARE THE STUDENT OF DCSA PROGRAM<p><br> <p class= para2 >WE LOVE OUR COUNTRY<p> </BODY> </HTML> 139

17 Cascading Style Sheets- 4 Figure 4.1 Text color Text Alignment The text-align property is used to set the horizontal alignment of a text. Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers). Following is the example which demonstrates how to align a text. Possible values are left, right, center, justify. <p style="text-align:right;"> This is right aligned text. </p> <p style="text-align:center;"> This is center aligned text. </p> <p style="text-align:left;"> This is left aligned text. </p> <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} BODY {COLOR: WHITE ;} P{FONT-SIZE:30PX;} </STYLE> <TITLE> CSS EXAMPLE-TEXT </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR></BR> WE ARE THE STUDENT OF DCSA PROGRAM <P STYLE="TEXT-ALIGN:CENTER;"> WE LOVE BANGLADESH -THIS IS CENTER ALIGNED TEXT. </P> <P STYLE="TEXT-ALIGN:LEFT;"> WE LOVE BANGLADESH -THIS IS LEFT ALIGNED TEXT. </P> 140

Internet Technology and Web Designing <P STYLE="TEXT-ALIGN:RIGHT;"> WE LOVE BANGLADESH -THIS IS RIGHT ALIGNED TEXT. </P> </BODY> </HTML> This will produce following result: Figure 4.

18 Internet Technology and Web Designing <P STYLE="TEXT-ALIGN:RIGHT;"> WE LOVE BANGLADESH -THIS IS RIGHT ALIGNED TEXT. </P> </BODY> </HTML> This will produce following result: Figure 4.2 Alignment Text Indentation The text-indent property is used to specify the indentation of the first line of a text. <p style="text-indent:1cm;"> This text will have first line indented by 1cm </p> <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} BODY {COLOR: WHITE ;} P{FONT-SIZE:20PX;} </STYLE> <TITLE> CSS EXAMPLE-TEXT INDENTATION </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR></BR> WE ARE THE STUDENT OF DCSA PROGRAM <p style="text-indent:1cm;"> WE LOVE BANGLADESH -This text have first line indented by 1cm </p> <p style="text-indent:2cm;"> WE LOVE BANGLADESH -This text have first line indented by 2cm </p> </BODY> </HTML> 141

Cascading Style Sheets- 4 This will produce following result: Figure 4.3 Text Indentation Text Decoration The text-decoration property is used to set or remove decorations from text.

19 Cascading Style Sheets- 4 This will produce following result: Figure 4.3 Text Indentation Text Decoration The text-decoration property is used to set or remove decorations from text. The text-decoration property is mostly used to remove underlines from links for design purposes: Following is the example which demonstrates how to decorate a text. Possible values are none, underline, overline, line-through, blink. <p style="text-decoration:underline;"> This is underlined text </p> <p style="text-decoration:line-through;"> This is striked through text. </p> <p style="text-decoration:overline;"> This is over line text. </p> <p style="text-decoration:blink;"> This is have blinking effect text </p> <HEAD> <STYLE> BODY {BACKGROUND- COLOR: MAROON;} BODY {COLOR: WHITE ;} P{FONT-SIZE:40PX;} </STYLE> <TITLE> CSS EXAMPLE-TEXT- DECORATION </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR> </BR> WE ARE THE STUDENT OF Using class <HEAD> <STYLE> BODY {BACKGROUND- COLOR: MAROON ;} BODY {COLOR: WHITE ;} P{FONT-SIZE:40PX;} p.first{color: BLUE; TEXT- DECORATION:UNDERLINE;} p.second{color: GREEN; TEXT-DECORATION:LINE- THROUGH;} p.third{color: OLIVE; TEXT- DECORATION:OVERLINE;} </STYLE> <TITLE> CSS EXAMPLE-TEXT- DECORATION USING CLASS 142

Internet Technology and Web Designing DCSA PROGRAM <P STYLE="TEXT- DECORATION:UNDERLINE; COLOR: BLUE;" > THIS IS UNDERLINED TEXT </P> <P STYLE="TEXT- DECORATION:LINE- THROUGH; COLOR: GREEN;"> THIS IS

20 Internet Technology and Web Designing DCSA PROGRAM <P STYLE="TEXT- DECORATION:UNDERLINE; COLOR: BLUE;" > THIS IS UNDERLINED TEXT </P> <P STYLE="TEXT- DECORATION:LINE- THROUGH; COLOR: GREEN;"> THIS IS STRIKED THROUGH TEXT. </P> <P STYLE="TEXT- DECORATION:OVERLINE; COLOR: OLIVE; "> THIS IS OVER LINE TEXT. </P> <P STYLE="TEXT- DECORATION:BLINK;"> THIS IS BLINKING EFFECT TEXT </P> </BODY> </HTML> </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR> </BR> WE ARE THE STUDENT OF DCSA PROGRAM <P class=first> THIS IS UNDERLINED TEXT </P> <P class=second> THIS IS STRIKED THROUGH TEXT. </P> <P class=third> THIS IS OVER LINE TEXT. </P> <P STYLE="TEXT- DECORATION:BLINK;"> THIS IS BLINKING EFFECT TEXT </P> </BODY> </HTML> This will produce following result Figure 4.4 Text Decoration 143

21 Cascading Style Sheets Study the following sentences, think yourself and answer the questions 1 and questions 2. Activity Dhaka is the capital of Bangladesh. Dhaka is the capital of Bangladesh. Dhaka is the capital of Bangladesh. Questions 1: Which property is appropriate for that? Questions 2: Write the syntax. 144

22 Internet Technology and Web Designing Assessment Fill in the blanks Assessment 1. The color property is used to set the of the text. State whether the following statements are true or false 1. The text-align property is used to set the horizontal alignment of a text. Multiple Choice questions 1. Which of the following ways below is correct to write a CSS? a) p {color:red;text-align:center}; b) p {color:red;text-align:center} c) p {color:red;text-align:center;} d) p (color:red;text-align:center;). 2. The text-decoration property is used to set or remove a) underline b) overline c) line-through d) All of the above. Exercises 1. Describe the text alignment property with example. 2. Write the use of text indentation. Give one example. 3. Explain text decoration property with example. 145

23 Cascading Style Sheets- 5 Lesson 6.5 Cascading Style Sheets- 5 Upon completion of this unit you will be able to: Convert text to uppercase or lowercase letters. Add or subtract space between the letters that make up a word. Outcomes Text conversion Add or subtract space between the words of a sentence. Set the text shadow around a text. The text-conversion property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word. <p style="text-transform:capitalize;"> This is capitalized text </p> <p style="text-transform:uppercase;"> This is uppercase text </p> <p style="text-transform:lowercase;"> This is lowercase text </p> Following is the example which demonstrates how to set the cases for a text. Possible values are none, capitalize, uppercase, lowercase. <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} BODY {COLOR: WHITE ;} P{FONT-SIZE:30PX;} </STYLE> <TITLE> CSS EXAMPLE-TEXT-CONVERSION </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR></BR> WE ARE THE STUDENT OF DCSA PROGRAM <P STYLE="TEXT-TRANSFORM:CAPITALIZE;"> WE LOVE BANGLADESH. - THIS IS CAPITALIZED TEXT </P> <P STYLE="TEXT-TRANSFORM:UPPERCASE;"> 146

24 Internet Technology and Web Designing WE LOVE BANGLADESH. - THIS IS UPPERCASE TEXT </P> <P STYLE="TEXT-TRANSFORM:LOWERCASE;"> WE LOVE BANGLADESH. - THIS IS LOWERCASE TEXT </P> </BODY> </HTML> This will produce following result: Figure 5.1 Text Conversion Space between characters Following is the example which demonstrates how to set the space between characters. Possible values are normal or a number specifying space. <p style="letter-spacing:5px;"> This text is having space between characters. </p> Set the space between words Following is the example which demonstrates how to set the space between words. Possible values are normal or a number specifying space.. <p style="word-spacing:5px;"> This text is having space between words. </p> Following is the example which demonstrates how to set the space between characters and words. <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} BODY {COLOR: WHITE ;} P{FONT-SIZE:20PX;} </STYLE> <TITLE> CSS EXAMPLE-TEXT SPACING </TITLE> 147

Cascading Style Sheets- 5 </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR></BR> WE ARE THE STUDENT OF DCSA PROGRAM <p style="letter-spacing:10px;"> WE LOVE BANGLADESH-This text is having space

25 Cascading Style Sheets- 5 </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR></BR> WE ARE THE STUDENT OF DCSA PROGRAM <p style="letter-spacing:10px;"> WE LOVE BANGLADESH-This text is having space between letters. </p> <p style="word-spacing:10px;"> WE LOVE BANGLADESH -This text is having space between words. </p> </BODY> </HTML> Figure 5.2 Space Following is the example which demonstrates how to set the space between characters and words using class. <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} BODY {COLOR: WHITE ;} P{FONT-SIZE:25PX;} p.first{ color: blue; LETTER-SPACING:10PX;} p.second{ color: green; FONT-SIZE:30PX;WORD-SPACING:10PX;} </STYLE> <TITLE> CSS EXAMPLE-TEXT SPACING USING CLASS </TITLE> </HEAD> <BODY> WELCOME TO MY FIRST WEB PAGE </BR></BR> WE ARE THE STUDENT OF DCSA PROGRAM <P > WE LOVE BANGLADESH </P> 148

26 Internet Technology and Web Designing <P class=first> WE LOVE BANGLADESH-THIS TEXT IS HAVING SPACE BETWEEN LETTERS AND FONT SIZE IS SAME AS P (25). </P> <P class=second> WE LOVE BANGLADESH -THIS TEXT IS HAVING SPACE BETWEEN WORDS AND FONT SIZE IS (30) WHICH IS DEFINED IN CLASS SECOND. </P> </BODY> </HTML> This will produce following result: Figure 5.3 Space using class 1. Compare space between characters and space between words. Activity 149

27 Cascading Style Sheets- 5 Assessment Fill in the blanks Assessment 1. property is used to specify uppercase and lowercase letters in a text. State whether the following statements are true or false 1. The text-align property is used to set the horizontal alignment of a text. Multiple Choice questions 1. Which of the following create space between characters? a) <p style="letter-spacing:5px;"> b) <p style="letterspacing:5px;"> c) <p style="word-spacing:5px;"> d) <p style="wordspacing:5px;">. Exercises 1. Describe the text conversion property with example. 2. Briefly explain how set space between words with example. 150

28 Internet Technology and Web Designing Lesson 6.6 Cascading Style Sheets- 6 Upon completion of this unit you will be able to: Specify CSS Borders. Outcomes CSS Border Border-color Property The border properties allow you to specify how the border of the box representing an element should look. There are three properties of a border. The border-color specifies the color of a border. The border-style Specifies whether a border should be solid, dashed line, double line, or one of the other possible values. The border-width specifies the width of a border. Now we will see how to use these properties with examples. The border-color property allows changing the color of the border surrounding an element. You can individually change the color of the bottom, left, top and right sides of an element's border using the properties: border-bottom-color: changes the color of bottom border. border-top-color :changes the color of top border. border-left-color :changes the color of left border. border-right-color :changes the color of right border. Here are the examples which show effect of all these properties: p.example1{ border:1px solid; border-bottom-color: Green; border-top-color: Red; border-left-color: Blue; border-right-color: Black; } 151

29 Cascading Style Sheets- 6 p.example2{ border:1px solid; border-color: Green} p example1 will show all borders in different colors. P example2 will show all borders in green color only. Border-style Property The border-style property allows you to select one of the following styles of border: none: No border. (Equivalent of border-width:0;) solid: Border is a single solid line. dotted: Border is a series of dots. dashed: Border is a series of short lines. double: Border is two solid lines. groove: Border looks as though it is carved into the page. ridge: Border looks the opposite of groove. inset: Border makes the box look like it is embedded in the page. outset: Border makes the box look like it is coming out of the canvas. hidden: Same as none, except in terms of border-conflict resolution for table elements. You can individually change the style of the bottom, left, top, and right borders of an element using following properties: border-bottom-style: changes the style of bottom border. border-top-style: changes the style of top border. border-left-style: changes the style of left border. border-right-style: changes the style of right border. Border-width Property The border-width property allows you to set the width of an element borders. The value of this property could be either a length in px, pt or cm or it should be set to thin, medium or thick. You can individually change the width of the bottom, top, left, and right borders of an element using the following properties: border-bottom-width: changes the width of bottom border. border-top-width: changes the width of top border. border-left-width: changes the width of left border. border-right-width: changes the width of right border. Following is the example to show all these border styles: <HTML> <HEAD> <STYLE> BODY {BACKGROUND-COLOR: MAROON ;} H1{FONT-SIZE:40PX;COLOR:fuchsia;TEXT-ALIGN:CENTER; BACKGROUND-COLOR:gray; border-width:8px; border-style:solid;border-color:#009900;} P.para1{FONT-SIZE:20PX; border-width:4px; border-style:none;border-color:#009900;} 152

30 Internet Technology and Web Designing P.para2{FONT-SIZE:20PX; border-width:4px; border-style:solid;border-color:#009900;} P.para3{FONT-SIZE:20PX; border-width:4px; border-style:dotted;border-color:#009900;} P.para4{FONT-SIZE:20PX; border-width:4px; border-style:dashed;border-color:#009900;} P.para5{FONT-SIZE:20PX;border-width:4px; borderstyle:double;border-color:#009900;} P.para6{FONT-SIZE:20PX; border-width:4px; border-style:groove;border-color:#009900;} P.para7{FONT-SIZE:20PX; border-width:4px; border-style:inset;border-color:#009900;} P.para8{FONT-SIZE:20PX; border-width:4px; border-style:outset;border-color:#009900;} </STYLE> <TITLE>CSS EXAMPLE-BORDER</TITLE> </HEAD> <BODY> <H1> WELCOME TO MY FIRST WEB PAGE </H1> WE ARE THE STUDENT OF DCSA PROGRAM <p class=para1> WE LOVE BANGLADESH -This is a border with none width.</p> <p class=para2> WE LOVE BANGLADESH-This is a solid border.</p> <p class=para3> WE LOVE BANGLADESH-This is a dotted border.</p> <p class=para4> WE LOVE BANGLADESH-This is a dashed border.</p> <p class=para5> WE LOVE BANGLADESH-This is a double border.</p> <p class=para6> WE LOVE BANGLADESH-This is a groove border.</p> <p class=para7> WE LOVE BANGLADESH-This is inset border.</p> <p class=para8> WE LOVE BANGLADESH-This is outset border.</p> <p style="font-size:20px; border-color:#009900; border-top-style:solid; border-bottom-style:dashed; border-left-style:double; border-right-style:groove; border-top-width:10px; border-left-width: 6px; border-right-width:12px; border-bottom-width:8px;"> WE LOVE BANGLADESH-This is a border with four different styles and different width.</p> </BODY> </HTML> 153

31 Cascading Style Sheets- 6 This will produce following result Figure 6.1 Border 1. Compare Dotted Border and Dashed Border. Activity 2. p.example1{ border-bottom-color: Green; border-top-color: Red; border-left-color: Blue; border-right-color: Black; } Write the effect of all these properties. 154

32 Internet Technology and Web Designing Assessment Assessment Fill in the blanks 1. Dotted border is a of dots. State whether the following statements are true or false 1. The border-width specifies the width of a border. Multiple Choice questions 1. Border-style specifies a border should be? a) solid b) dashed line c) double line d) all of the above. 2. How many properties are there in a border? a) 3 b) 4 c) 8 d) 10. Exercises 1. Describe the border color property. 2. Describe the border width property. 2. Describe different types of border style property with example. 3. Explain CSS border with example. 155

33 Cascading Style Sheets- 7 Lesson 6.7 Cascading Style Sheets- 7 Upon completion of this unit you will be able to: Stipulate CSS List. Specify CSS Image. Outcomes List Lists are very helpful in conveying a set of either numbered or bulleted points. This tutorial teaches you how to control list type, position, style etc. using CSS There are following five CSS properties which can be used to control lists: The list-style-type: Allows you to control the shape or appearance of the marker. The list-style-position: Specifies whether a long point that wraps to a second line should align with the first line or start underneath the start of the marker. The list-style-image: Specifies an image for the marker rather than a bullet point or number. The list-style: Serves as shorthand for the preceding properties. The marker-offset: Specifies the distance between a marker and the text in the list. CSS List Style Type If you want to use something different from the default numbering of ordered lists, or the bullets/discs of unordered lists, then all you have to do is choose a different style for your lists. CSS allows you to select from a wide variety of different list item shapes. Unordered list styles: square, circle, disc (default), and none Ordered list styles: upper-alpha, lower-alpha, upper-roman, lower-roman, decimal (default), and none Now we will see how to use these properties with examples. CSS Code ol { list-style-type: upper-roman; } ul { list-style-type: circle; } 156

34 Internet Technology and Web Designing <HTML> <HEAD> <STYLE> UL.A {LIST-STYLE-TYPE:SQUARE;} OL.B {LIST-STYLE-TYPE:LOWER-ALPHA;} OL.C {LIST-STYLE-TYPE:UPPER-ALPHA;} </STYLE> <TITLE> CSS LIST </TITLE> </HEAD> <BODY> <UL CLASS=A> <LI> FRUITS <UL> <LI> APPLE <LI> ORANGE <LI> MANGO </UL> <LI > VEGETABLE <UL> <LI> BRINJAL <LI> POTATO <LI> TOMATO </UL> </UL> <OL CLASS=B > <LI> ITEM 1 <LI> ITEM 2 <LI> ITEM 3 <LI> ITEM 4 </OL> <OL CLASS=C > <LI> ITEM 1 <LI> ITEM 2 <LI> ITEM 3 <LI> ITEM 4 </OL> </BODY> </HTML> 157

35 Cascading Style Sheets- 7 Figure 7.1 Border CSS Images Images are very important part of any Web Page. CSS plays a good role to control image display. You can set following image properties using CSS. The border property is used to set the width of an image border. The height property is used to set the height of an image. The width property is used to set the width of an image. The -moz-opacity property is used to set the opacity of an image. Image border Property The border property of an image is used to set the width of an image border. This property can have a value in length or in %. A width of zero pixels means no border. Here is the example <img style="border:0px;" src="imgcss.jpg" > <br> <img style="border:3px dashed red;" src="imgcss.jpg"> Image height Property The height property of an image is used to set the height of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available. Here is the example <img style="border:1px solid red; height:100px;" src="imgcss.jpg"> <br > <img style="border:1px solid red; height:50%;" src="imgcss.jpg" > 158

Internet Technology and Web Designing Image width Property The width property of an image is used to set the width of an image. This property can have a value in length or in %.

36 Internet Technology and Web Designing Image width Property The width property of an image is used to set the width of an image. This property can have a value in length or in %. While giving value in %, it applies it in respect of the box in which an image is available. Here is the example <img style="border:1px solid red; width:100px;" src="imgcss.jpg"> <br> <img style="border:1px solid red; width:100%;" src="imgcss.jpg" <HTML> <HEAD> <TITLE> IMG- CSS</TITLE> </HEAD> <BODY> <img style="border:0px;" src="imgcss.jpg" > <img style="border:4px solid red;height:120px;width:120px;" src="shahidminar.jpg" > <br><br> <img style="border:3px dashed red;" src="imgcss.jpg" > <img style="border:8px solid red; height:100px;width:100px;" src="imgcss.jpg" > <br> <img style="border:2px solid red; height:40%;width:50%;" src="imgcss.jpg" > <br><br> </BODY> </HTML> Figure 7.2 CSS Image 159

37 Cascading Style Sheets Compare Dotted Border and Dashed Border. Activity Assessment State whether the following statements are true or false Assessment 1. The list-style-type allows you to control the shape or appearance of the marker. Multiple Choice questions 1. Which of the following is unordered list? a) square. b) circle. c) decimal. d) both a and b. 2. Which of the following is used to set the width of an image border? a) border property b) height property c) width property d) both a and b. Exercises 1. Describe the CSS list style. 2. Write the purpose of image border property. Write the syntax and give one example. 160

38 Internet Technology and Web Designing Lesson 6.8 Cascading Style Sheets- 8 Upon completion of this unit you will be able to: Specify CSS Table. Outcomes Table Tables are used to display data in Tabular format, containing rows and columns, on the screen. The table element can contain the following: Table Borders To specify table borders in CSS, use the border property. The example below specifies a black border for table, th, and td elements: table, th, td { border: 1px solid black; } Collapse Borders The border-collapse property sets whether the table borders are collapsed into a single border or separated. To display a single border for the table, use the border-collapse property table { border-collapse:collapse; } table,th, td { border: 1px solid black; } 161

39 Cascading Style Sheets- 8 Table Width and Height Width and height of a table is defined by the width and height properties. The example below sets the width of the table to 100%, and the height of the elements to 50px: table { width:100%; } th { height:50px; } Table Text Alignment The text in a table is aligned with the text-align and vertical-align properties. The text-align property sets the horizontal alignment, like left, right, or center: td { text-align:right; text-align:center; } The vertical-align property sets the vertical alignment, like top, bottom, or middle: td { height:50px; vertical-align:bottom; } Table Padding To control the space between the border and content in a table, use the padding property on td and th elements: td { padding:15px; } 162

Internet Technology and Web Designing <HTML> <HEAD> <STYLE> TABLE, TH, TD { BORDER: 2PX SOLID BLACK; TEXT-ALIGN:CENTER; } </STYLE> <TITLE> SIMPLE TABLE IN HTML </TITLE> </HEAD> <BODY> <TABLE>

40 Internet Technology and Web Designing <HTML> <HEAD> <STYLE> TABLE, TH, TD { BORDER: 2PX SOLID BLACK; TEXT-ALIGN:CENTER; } </STYLE> <TITLE> SIMPLE TABLE IN HTML </TITLE> </HEAD> <BODY> <TABLE> <CAPTION> TEST TABLE </CAPTION> <TR> <TH> HEADING 1</TH> <TH> HEADING 2</TH> <TH> HEADING 3</TH> </TR> <TR> <TD> CELL 1 </TD> <TD> CELL 2 </TD> <TD> CELL 3 </TD> </TR> <TR> <TD> CELL 4 </TD> <TD> CELL 5 </TD> <TD> CELL 6 </TD> </TR> </TABLE> </BODY> <HTML> Figure 8.1Table 163

41 Cascading Style Sheets- 8 Assessment Fill in the blanks Assessment 1. Tables are used to display data in. State whether the following statements are true or false 1. The text-align property is used to set the horizontal alignment of a text. Multiple Choice questions 1. Which property is used to control the space between the border and content in a table? a) padding b) alignment c) height d) weight. Exercises 1. Describe the table border property. 2. Describe table height and width property. 3. Describe the table padding property with example. 164

42 Internet Technology and Web Designing Lesson 6.9 Cascading Style Sheets- 9 Upon completion of this unit you will be able to: Specify CSS Link. Outcomes CSS Links Through this section we will learn how to set different properties of a hyper link using CSS. Links can be styled with any CSS property (e.g. color, font-family, background, etc.) In addition, links can be styled differently depending on what state they are in. You can set following properties of a hyper link a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouse over it a:active - a link the moment it is clicked When setting the style for several link states, there are some order rules a:hover MUST come after a:link and a:visited a:active MUST come after a:hover Text Decoration The text-decoration property is mostly used to remove underlines from links: a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;} Background Color The background-color property specifies the background color for links: 165

43 Cascading Style Sheets- 9 Color of Visited Links a:link {background-color:#b2ff99;} a:visited {background-color:# FF704D;} a:hover {background-color:#ff704d;} a:active {background-color:# FFFF85;} Following is the example which demonstrates how to set the color of visited links. Possible value could be any color name in any valid format. <style type="text/css"> a:visited {color: #006600} </style> <a href="/html/index.htm">click this link</a> Changing color of links Following is the example which demonstrates how to change the color of links when we bring a mouse pointer over that link. Possible value could be any color name in any valid format. <style type="text/css"> a:hover {color: #FFCC00} </style> <a href="/html/index.htm">bring Mouse Here</a> This will produce following link. Now you bring your mouse over this link and you will see that it changes its color to yellow. Changing color of active links Following is the example which demonstrates how to change the color of active links. Possible value could be any color name in any valid format. <style type="text/css"> a:active {color: #FF00CC} </style> <a href="/html/index.htm">click This Link</a> This will produce following link. This will change it color to pink when user clicks it. <HTML> <HEAD> <TITLE> Link to a Website </TITLE> </HEAD> <BODY> 166

Internet Technology and Web Designing Mohammad Mamunur Rashid <BR> School of Science and Technology <BR> Bangladesh Open University <BR> Gazipur-1705<BR> <A HREF ="http://www.bou.edu.

44 Internet Technology and Web Designing Mohammad Mamunur Rashid <BR> School of Science and Technology <BR> Bangladesh Open University <BR> Gazipur-1705<BR> <A HREF =" Link to get Website of Bangladesh Open University</A><br> <style type=""> a:link {color:#ffcc00;} </style> <a href="/h:/html Coding/css-font.html">CSS Font Link</a> <style type=""> a:visited {color:red;background-color:white;} </style><br> <a href="/h:/html Coding/css-font.html">CSS Font Link</a><br> <style type=""> a:hover {color:red;text-decoration:none;} </style> <a href="h:/html Coding/css-link.html">Bring Mouse Here</a> </BODY> </BODY> </HTML> Figure 9.1 Links 167

45 Cascading Style Sheets- 9 Assessment Fill in the blanks Assessment 1. a:hover MUST come after and. State whether the following statements are true or false 1. The text-decoration property is mostly used to remove underlines from links. Exercises 1. Write the syntax to change the color of a visited link. 2. Explain CSS links. 168

46 Internet Technology and Web Designing 169

CSS stands for Cascading Style Sheets Styles define how to display HTML elements

CSS stands for Cascading Style Sheets Styles define how to display HTML elements CSS has various levels and profiles. Each level of CSS builds upon the last, typically adding new features and typically