HTML-CSS-QUARTER4 COMPUTER PROGRAMMING SSC

Lesson in HTML/CSS

1. INTRODUCTION TO CASCADING STYLE SHEETS Quarter 4 BLESILDA B. VOCAL

2. LEARNING OBJECTIVES understand what a CSS is, identify the ways on how to apply CSS to HTML, and; understand what selectors, properties and values are.

3. What is Cascading Style Sheet(CSS)? HTML JAVASCRIPT CSS

4. Defines the behavior Defines the appearance and style Defines the structure

5. What is CSS?

6. CSS

7. What is CSS? Cascading Styles Sheets (CSS) is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document. It is a styling language used to add style, layout, and visual presentation to web pages written in HTML or XML markup languages

8. Cascading Style Sheet Cascading Style Sheets , fondly referred to as CSS , is a simple design language intended to simplify the process of making web pages presentable. CSS handles the look and feel part of a web page. 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 or XHTML.

9. Why Use CSS? CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

10. Example of CSS coding

11. CSS Syntax

12. Parts of Style Rule Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color , border etc. Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.

13. EXAMPLE In this example all <p> elements will be center-aligned, with a red text color:

14. Advantages of CSS CSS saves time − 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. • Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download time. • Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.

15. Advantages of CSS Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML attributes. • Multiple device compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing. • Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So, it is a good idea to start using CSS in all the HTML pages to make them compatible to future browsers

16. You can put CSS Style Rule Syntax as follows selector { property: value } Table { border: 1 px solid #C00 } table is a selector that selects the HTML element(s) that you want to style. In this case, it's selecting all the <table> elements. {} brackets are used to enclose the declaration block that contains the property-value pairs for the selected element(s). border is the CSS property being applied to the selected element(s). It sets the border around the table. 1px is the value of the border-width property, which sets the width of the border to 1 pixel. solid is the value of the border-style property, which sets the style of the border to a solid line. #C00 is the value of the border-color property, which sets the color of the border to a shade of red.

17. The Type Selectors This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings. h1 { color: #36CFFF; } The selector h1 is targeting all the <h1> elements in the HTML document and applying the color property with a value of #36CFFF . This means that all <h1> elements will have their text color set to the specified value, which in this case is a shade of blue.

18. The Universal Selectors Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type * { color: #000000; }

19. The Descendant Selectors Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to < em > element only when it lies inside < ul > tag. This is a CSS rule that sets the text color of all < em > elements that are descendants of < ul > elements to black (#000000). < ul > is the selector for an unordered list element, and < em > is the selector for an emphasized text element. The space between them indicates that < em > is a descendant element of < ul >. By setting the color property to #000000 (which is black), this CSS rule will change the text color of all < em > elements within a < ul > element to black.

20. <ul> <li><em>Item 1</em></li> <li><em>Item 2</em></li> </ul>

21. The Class Selectors

22. Applying CSS Create a webpage and apply the following below; Black as background color . Add Heading 1 and write the title of this module with white as text color . For the content add paragraph use 20 pixel for text size and then write your reflection/generalization about this lesson. Minimum of 5 sentences. 4. Use Yellow for text color content. 5. Use Forte as style of the text

23. css colors, comments Quarter 4

24. Learning Objectives understand the different CSS measurement units, use comments to explain codes and identify the different color values to specify a color.

25. CSS units Pixels - The most widely used measurement unit. A pixel does not actually correlate to a physical pixel on your screen, as that varies, a lot, by device (think high-DPI devices vs non-retina devices). Percentages - let you specify values in percentages of that parent element’s corresponding property.

26. Relative units em is the value assigned to that element’s font-size, therefore its exact value changes between elements. rem is similar to em , but instead of varying on the current element font size, it uses the root element (html) font size. ex is like em , but inserted of measuring the width of m, it measures the height of the x letter. ch is like ex but instead of measuring the height of x it measures the width of 0 (zero).

27. CSS Comments Comments are used to explain the code and may help when you edit the source code at a later date. Comments are ignored by browsers. A CSS comment is placed inside the <style> element, and starts with /* and ends with */:

28. HTML and CSS Comments

29. CSS Colors CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element or else for the background of the element.

30. Following table lists all the possible formats

31. 1. CSS Colors - Hex Codes A hexadecimal is a 6-digit representation of a color. The first two digits(RR) represent a red value, the next two are a green value(GG), and the last are the blue value(BB). Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.

32. Following are the examples to use Hexadecimal notation .

33. 2. CSS Colors - Short Hex Codes

34. 3. CSS Colors - RGB Values

35. 4. CSS Color Names

36. CSS Background Color You can set the background color for HTML elements <!DOCTYPE html> <html> <body> <h1 style=" background-color:DodgerBlue ;">Hello World</h1> <p style=" background-color:Tomato ;"> The quick brown fox jumps over the lazy dog. </p> </body> </html>

37. CSS Text Color

38. CSS Border Color <!DOCTYPE html> <html> <body> <h1 style="border: 2px solid Tomato;">Hello World</h1> <h1 style="border: 2px solid DodgerBlue ;">Hello World</h1> <h1 style="border: 2px solid Violet;">Hello World</h1> </body> </html>

39. Do you have any question/s?

40. EVALUATION:

41. Hands on Activity: Create the CSS / HTML code for the given output.

42. CSS BACKGROUND PROPERTIES

43. Learning Objectives At the end of the lesson you will be able to learn the CSS background properties and apply how to set backgrounds of various HTML elements.

44. The background color of an element is specified by the background-color property. The background color of a page is defined in the body selector: body { background-color: #338844; }

45. Background Properties background-image property is used to set the background image of an element. background-color property is used to set the background color of an element. background-repeat property is used to control the repetition of an image in the background. background-position property is used to control the position of an image in the background. background-attachment property is used to control the scrolling of an image in the background. background-property is used as a shorthand to specify the number of other background properties.

46. Background Image

47. We can set t he b a ck g r o u nd i m a g e b y ca lli ng l oc a l s t o r ed i m a g es as sh ow n b el o w . < html> <head> <style> body { background-image: url ("html.png"); background-color: #cccccc; } </style> </head> <body> <h1>Hello World!</h1> </body> <html>

48. Background Color background-c o lo r : co l o r | transpa r en t | i n herit ; F o r ex a m p l e: bod y {   b a ckground - co l or : # 3 3 8 8 4 4; } C o l or va l u e s i n C S S a r e m ost o f t en sp e c i f i ed i n t h e f o ll o wi ng f o r m a t s:   a co l or n a m e - li ke " r e d " a H E X va l ue - li ke " # ff " an R G B va l ue - li ke " r g b ( 2 5 5, , ) "

49. O p a c i t y / Tra n s p are n cy E xamp l e d i v { b a ck g r o u n d - co l o r : gree n ;   o p ac i t y : . 3 ;   }

50. T ran s p a ren c y u s i ng R G B A A n RGBA co l or va l ue i s sp e c i f i ed wi t h: r g b a (r e d , green, b l u e , a l p h a ) . T h e a l p h a p a r am e t er i s a nu m b e r b e t w e e n . ( f u ll y tr a n sp a r e nt ) a n d 1.0 (f u ll y o p a q u e ) . E x a mp l e     d i v {   b a ck g r o u n d : r g b a ( , 1 2 8, , . 3) / * Gr e e n b a ck g r o u nd wi t h 3 % o p ac i t y * /   }  

51. B a c k g rou n d R e p e at Th e b a ck g r o u n d- r e p e a t p r o p e r t y a ll o w s y ou t o co nt r ol h o w a b a ckground i m a g e i s r e p e a t ed or t il ed i n t he b ack g r o u nd o f an e l eme n t . Y ou can s e t a b a ck g r o u nd i m a g e t o r e p e a t ver t i ca ll y ( y - ax i s ) , h o r i z o nta ll y ( x - ax i s ) , i n b o t h d i r ec t i o n s, or i n ne i t h e r d i r e c t i o n . S yntax: background-repeat: repeat | repeat-x | repeat-y | no-repeat | inherit;

52. V alues R e p e a t T h e image is r e p e a t ed b oth h o r i zo n t a ll y a n d ve r t i ca ll y. body { background-image: url ("images.jpg"); background-repeat:repeat ; } repeat-y: The image is repeated vertically only. body { background-image: url ("images.jpg"); background-repeat:repeat-y ; } repeat-x: The image is repeated horizontally only. body { background-image: url ("images.jpg"); background-repeat:repeat-x ; } no-repeat: the image is not repeated: only one copy of the image is drawn. body { background-image: url ("images.jpg"); background-repeat:no-repeat ; } inherit: Takes the same specified value as the property for the element's parent. body { background-image: url ("images.jpg"); background-repeat:inherit ; }

53. B a c k g rou n d P o s i ti on Th e b a c kgroun d - p o s iti on prope r t y i s us e d t o c o nt r ol t he p o s i t i on of t he b ack g r o u nd i m a g e. I f no b a ckgrou n d p o s i t i o n h a s b e en sp e c i f i e d , t h e b a ckground i m a g e i s p l ac e d at t he d e f a ul t t o p - l e f t p o s i t i on of t he e l ement i . e. a t ( 0, ) , l et ' s t r y o u t t he f o ll o wi ng ex a m p l e: Syntax: b a ckgroun d - p o s i t ion: va l u e body { background-image: url ("images/robot.png"); background-repeat: no-repeat; background-position: right top; }

54. <html> <head> <style> body { background-image: url ("lebron.jpg"); background-position:100px; } </style> </head> <body> <p><b>LEBRON JAMES</b></p> </body> </html>

55. <html> <head> <style> body { background-image: url ("lebron.jpg"); background-position:100px 200px; } </style> </head> <body> <p><b>LEBRON JAMES</b></p> </body> </html>

56. B a c k g rou n d - a t t a c hm e nt T h e backgroun d - a t t ac h m e n t p r o p e r t y s p ec i f i es w h ether a back g r o u nd i m a g e is f i xed wi t h r e g a r d t o t he v i e w p o r t or sc r o ll s a l o n g wi t h t h e con t a i n i ng b l oc k . S yntax: background-attachment: scroll | fixed | local | inherit ; V alues scroll : If specified, the background image scrolls with the element. body { background-image: url ("img.jpg"); background-attachment: scroll; }

57. B a c k g rou n d - a t t a c hm e nt T h e backgroun d - a t t ac h m e n t p r o p e r t y s p ec i f i es w h ether a back g r o u nd i m a g e is f i xed wi t h r e g a r d t o t he v i e w p o r t or sc r o ll s a l o n g wi t h t h e con t a i n i ng b l oc k . S yntax: background-attachment: scroll | fixed | local | inherit ; fixed : If specified, the background image does not scrolls with the element. body { background-image: url ("bg.jpg"); background-attachment: fixed; }

58. B a c k g rou n d - a t t a c hm e nt T h e backgroun d - a t t ac h m e n t p r o p e r t y s p ec i f i es w h ether a back g r o u nd i m a g e is f i xed wi t h r e g a r d t o t he v i e w p o r t or sc r o ll s a l o n g wi t h t h e con t a i n i ng b l oc k . S yntax: background-attachment: scroll | fixed | local | inherit ; inherit: Takes the same specified value as the property for the element's parent. body { background-image: url ("bg.jpg"); background-attachment: inherit; }

59. <!DOCTYPE html> <html> <head> <style> body { background-image: url ('lebron.jpg'); background-repeat: no-repeat; background-attachment: fixed; } </style> </head> <body> <p>LEBRON JAMES</p> <p> LEBRON JAMES </p> <p> LEBRON JAMES </p> <p> LEBRON JAMES </p> <p> LEBRON JAMES </p> <p> LEBRON JAMES </p> <p> LEBRON JAMES </p> <p> LEBRON JAMES </p> </body> </html>

60. Do you have any question/s?

61. C reate t h e C S S / H TML C o d es u sing bac k gro u nd pro p e r ti es f o r t he given o u t p u t . W r i t e t h e m i n yo u r a n s w er shee t . O utp u t : Hi n t :   *B a ck gr o u n d c o l or i s b l ue   * p c o l or i s #F F FFFF

62. CSS FONTS

63. Generic Font Families In CSS there are five generic font families: Serif  fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance. Sans-serif  fonts have clean lines (no small strokes attached). They create a modern and minimalistic look. Monospace  fonts - here all the letters have the same fixed width. They create a mechanical look.  Cursive  fonts imitate human handwriting. Fantasy  fonts are decorative/playful fonts.

64. Difference Between Serif and Sans-serif Fonts

65. Some Font Examples

66. Learning Objectives At the end of the lesson: you will be able to understand how to set fonts of a content available in an HTML element.

67. Font properties of an element: The font-family property is used to change the face of a font. The font-style property is used to make a font italic or oblique. The font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a font appears The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font properties.

68. Set the Font Family <html> <head> </head> <body> <p style = " font-family:georgia,garamond,serif ;" > This text is rendered in either georgia , garamond , or the default serif font depending on which font you have at your system. </p> </body> </html>

69. Set the Font Style Following is the example, which demonstrates how to set the font style of an element. Possible values are normal , italic and oblique. <html> <head> </head> <body> <p style = " font-style:italic ;" > This text will be rendered in italic style </p> </body> </html>

70. Set the Font Variant The following example demonstrates how to set the font variant of an element. Possible values are normal and small-caps . <html> <head> </head> <body> <p style = " font-variant:small-caps ;" > This text will be rendered as small caps </p> </body> </html>

71. Set the Font Weight The font-weight property provides the functionality to specify how bold a font is. Possible values could be normal , bold , bolder , lighter , 100, 200, 300, 400, 500, 600, 700, 800, 900. <html> <head> </head> <body> <p style = " font-weight:bold ;" > This font is bold. </p> <p style = " font-weight:bolder ;" > This font is bolder. </p> <p style = "font-weight:500;" > This font is 500 weight. </p> </body> </html>

72. Set the Font Size The font- size property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger , size in pixels or in %. <html> <head> </head> <body> <p style = "font-size:20px;" > This font size is 20 pixels </p> <p style = " font-size:small ;" > This font size is small </p> <p style = " font-size:large ;" > This font size is large </p> </body> </html>

73. Set the Font Size Adjust This property enables you to adjust the x-height to make fonts more legible. Possible value could be any number. <html> <head> </head> <body> <p style = "font-size-adjust:0.61;" > This text is using a font-size-adjust value. </p> </body> </html>

74. Set the Font Stretch This property relies on the user's computer to have an expanded or condensed version of the font being used. Possible values could be normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. <html> <head> </head> <body> <p style = " font-stretch:ultra-expanded ;" > If this doesn't appear to work, it is likely that your computer doesn't have a < br >condensed or expanded version of the font being used. </p> </body> </html>

75. Shorthand Property <html> <head> </head> <body> <p style = " font:italic small-caps bold 15px georgia ;" > Applying all the properties on the text at once. </p> </body> </html>

76. The font-family property is used to change the face of a font. The font-style property is used to make a font italic or oblique. The font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a font appears The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font properties.

77. CSS TEXT

78. Learning Objectives: At the end of the lesson you will be able to understand how to manipulate text using CSS properties.

79. You can set following text properties of an element:

80. Set the Text Color <html> <head> </head> <body> <p style = " color:red ;"> This text will be written in red. </p> </body> </html>

81. Set the Text Direction The following example demonstrates how to set the direction of a text. Possible values are ltr or rtl . <html> <head> </head> <body> <p style = " direction:rtl ;"> This text will be rendered from right to left </p> </body> </html>

82. Set the Space between Characters <html> <head> </head> <body> <p style = "letter-spacing:5px;"> This text is having space between letters. </p> </body </html>

83. Set the Space between Words <html> <head> </head> <body> <p style = "word-spacing:5px;"> This text is having space between words. </p> </body> </html>

84. Set the Text Indent <html> <head> </head> <body> <p style = "text-indent:1cm;"> This text will have first line indented by 1cm and this line will remain at its actual position this is done by CSS text-indent property. </p> </body> </html>

85. Set the Text Alignment

86. Decorating the Text

87. Set the Text Cases

88. Set the Text Shadow

89. Performance Task No.1 Design a personal blog or website with a color scheme that reflects your personality or interests using css Choose a color scheme that reflects your personality or interests. For example, if you are a nature lover, you may want to use shades of green and brown. If you are a music enthusiast, you may want to use bold and vibrant colors like red, yellow, and blue. For the additional content add paragraph use 20 pixel for text size and then write your reflection/generalization about this lesson. Minimum of 5 sentences.

90. Rubrics:

91. My Blog

92. CSS BORDERS

93. Learning Objectives At the end of the lesson, you will be able to learn the CSS border properties that allow you to define the border area of an element's box.

94. BORDER PROPERTIES 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.

95. The border-color Property The border-color property allows you to change 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.

96. The border-style Property 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

97. 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.

98. CSS IMAGES

99. The image has 9 different style. This is the following

100. The Rounded images

101. The thumbnail images

102. The Responsive images

103. The Transparent images

104. The Image Filter

105. The Image Hoverlay The overlay-image class container encapsulates all the necessary structure: - original image, -original overlay text block, -image/text overlay block With a builder, it can be replaced by an existing container block (for example it could be the Divi "code" module, to which we simply add the overlay-image class ). displayed on mouse hover.

106. EXAMPLE

107. The following example shows all flip images properties:

108. The Responsive Image A responsive, mobile friendly image gallery. You can use it as is or you can modify it how you want. It doesn't have to be full width either. Give the gallery element a width and it will fit to that making it easy to be right aligned or centered within a page.

109. The Image Modal A modal is a dialog box/popup window that is displayed on top of the current page. Example

110. PERFORMANCE TASK WEBSITE DESIGN

111. Task: Create a school website using HTML and CSS that includes the following pages and features:

112. Homepage Design an engaging homepage that represents your school. Include a header with the school logo and a navigation menu with links to other pages. Add a hero section with a captivating image or slideshow and a brief welcome message.

113. About Us Create a page that provides information about your school. Include the school's history, mission, vision, and core values. Add relevant images or videos to enhance the content.

114. Academics: Design a page that highlights the academic programs and courses offered at your school. Include a description of each program, its benefits, and any unique features. Present the information in an organized and visually appealing manner.

115. Faculty and Staff: Create a page that introduces the faculty and staff members at your school. Include their names, roles, qualifications, and a brief bio. Optionally, add their profile pictures for a personal touch.

116. Student Life: Design a page that showcases the vibrant student life at your school. Include information about clubs, sports teams, extracurricular activities, and events. Add images, videos, or testimonials to highlight student achievements and experiences.

117. Admissions: Create a page with all the necessary information for prospective students and parents. Include admission requirements, procedures, deadlines, and contact details. Optionally, provide a downloadable application form.

118. Contact Us: Design a page that includes contact information for your school. Include the school's address, phone number, email, and social media links. Optionally, include a contact form for visitors to send messages or inquiries.

119. Styling and Visual Design Use CSS to style your website and make it visually appealing. Choose appropriate fonts, colors, and layouts that align with your school's brand. Ensure consistency in design elements such as headers, buttons, and forms.

120. Rubrics

121. Criteria Points Design and Layout Effective use of color, typography, and layout Consistent design elements throughout the website Attention to detail in design and aesthetics 25 Points Content and Structure Clear and concise information on each page Well-organized structure and navigation Relevant and engaging content for each section 25 Points CSS Styling Effective use of CSS to style the website Consistent and appropriate use of fonts, colors, and layout CSS code is clean and well-structured 25 Points Interactivity Implementation of interactive elements such as forms, buttons, or animations Interactive elements are functional and enhance the user experience 10 Points Timeliness Completion of the project within the specified deadline 5 Points (DEADLINE: APRIL 30, 2024) Work Ethics Active participation and contribution to the group project accountability for assigned tasks and responsibilities 10 Points

122. CSS LINKS MODULE 5

123. Learning Objective: you will be able to learn the how to use link using CSS

124. Properties of Links The link signifies unvisited hyperlinks. The : visited signifies visited hyperlinks. The : hover signifies an element that currently has the user's mouse pointer hovering over it The : active signifies an element on which the user is currently clicking.

125. You can set following font properties of an element: The font-family property is used to change the face of a font. The font-style property is used to make a font italic or oblique. The font-variant property is used to create a small-caps effect. The font-weight property is used to increase or decrease how bold or light a font appears. The font-size property is used to increase or decrease the size of a font. The font property is used as shorthand to specify a number of other font properties.