IT-304-WEB-1-UNIT-2.pdf

UNIT 2: Designing Websites UNIT 02 DESIGNING WEBSITES CSS stands for Cascading Style Sheet. It is a styling sheet language used to describe the look and feel of...

UNIT 2: Designing Websites UNIT 02 DESIGNING WEBSITES CSS stands for Cascading Style Sheet. It is a styling sheet language used to describe the look and feel of a website. Without CSS language, the webpage would be plain and dull. Imagine searching on the internet and scrolling through multiple websites with no colors, alignments, and proper design. CSS can control how the HTML elements should be displayed on a browser. Formatting the layout of the webpage, changing the font colors, size of a font, and modifying the width and height of an element is all the CSS job—the complete presentation of a webpage. Mostly CSS is combined with the markup languages like HTML or XHTML. The best way to describe the connection between CSS and HTML is a "house." The house would be the HTML, and the HTML elements would be the doors, windows, and the roofs. However, the house and its parts are unpainted. Now the paint would be the CSS; it adds colors or style to the house. To summarize it all, HTML is used to describe a website's content, while CSS is used to display the content of a website in a presentable and attractive way. This unit will discuss the most widely used style sheet over the web, the Cascading Style Sheet (CSS), and how it styles different HTML elements. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 67  UNIT 2: Designing Websites PRETEST THINK BEFORE YOU PROCEED Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ Answer the questions based on the student's current design skills and knowledge about designing and website. Use the 4-point Likert Scale below. 1 – Not at all 2 – Maybe 3 – Yes 4 – So well, that I could help others 1 2 3 4 1. Students can define what pixel is. 2. Students can design and layout creatively. 3. Students know the different types of font styles. 4. Students can explore appealing color combinations. 5. Students can use at least one photo editor application. 6. Students understand what a responsive website is. 7. Students can describe the different parts of a website. If the student answered "yes" or "so well" in questions number 5 and 6, answer the questions below. 1. Define ideas about responsive websites. ________________________________________________________________ ________________________________________________________________ _______________________________________________________________. 2. What are the different parts of a website? ________________________________________________________________ ________________________________________________________________ _______________________________________________________________. 3. What do you consider a well-designed website? ________________________________________________________________ ________________________________________________________________ _______________________________________________________________. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 68 UNIT 2: Designing Websites LESSON 1: WHAT IS CSS? OBJECTIVES: At the end of the lesson, students shall be able to: ▪ Define what CSS is; ▪ Describe the importance of CSS and how it is connected to HTML; ▪ Control the layout of the webpage using CSS Selectors; and ▪ Use multiple style sheets to make unique and attractive website. DURATION: 2 hours IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 69  UNIT 2: Designing Websites ASSESS YOURSELF Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ Creating Digital Birthday Invitation Create a webpage, notably a digital birthday invitation using HTML, and write about its design plan. For example, the background is blue, and the font color is black. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 70  UNIT 2: Designing Websites Why Learn CSS? Cascading Style Sheet (CSS) is a design or a style language intended to use for creating presentable and attractive websites. Understanding of HTML and CSS are the foundation of being a great Web Developer and Web Designer. Therefore, it is a must skill for every IT student and professional. Moreover, once they understand the basics of HTML and CSS, they can easily understand other related languages like JavaScript and PHP and their frameworks like the LaravelPHP, Bootstrap, and JQuery. In June 1999, CSS3, the current and latest version of CSS, became the recommendation of W3C, and nowadays, it is the widely used style language over the web. Prerequisite Before learning CSS, the learner should have a solid understanding of Hypertext Markup Language (HTML) which was covered in the first unit of this module. The CSS Selectors The CSS syntax is composed of a set of rules. These rules consist of three different parts: the selector, property, and value. Selector: A selector represents an HTML tag that the style will be applied. It could be any tag like a paragraph tag or a heading tag. Property: A property specifies what style to add to an HTML element. They could be a color, alignment, or a border. Value: Values are given to a property. For example, a color property can have a value of either white or black. 1 selector { property: value; } Example (paragraph with a font color of red): 1 p { color: value; } CSS selectors are used in selecting an HTML element to add style to it. There are several types of CSS selectors: 1. Type Selector – This type of selector is for selecting a specific HTML tag. For example, selecting an tag and changing its color to blue. Using IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 71 UNIT 2: Designing Websites this type of selector means all of the tags from the document will be colored blue, even the newly added tags. HTML Syntax: 1 Content goes here... CSS Syntax: 1 tagName { property: value; } Examples: 1 Hello Students! 1 h1 { color: blue; } Output: Example: (Adding another tag into the HTML file without changing the styles above.) 1 Hello Students! 2 Have a Good day! Output: 2. Universal Selector – The Universal selector matches all the HTML elements that you added on your HTML file. May it be a paragraph, button, or a heading tag. All styles will be applied in each HTML element. HTML Syntax: 1 Content goes here... CSS Syntax: 1 * { property: value; } Examples: 1 Hello Students! 2 Have a Good day! 3 4 Hello Students! IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 72 UNIT 2: Designing Websites 5 Have a Good day! 1 * { color: red; } Output: 3. Class Selector – The class selector selects all HTML elements depending on the particular class attribute. Class selectors are formed by a period and selector name. HTML Syntax: 1 Content... CSS Syntax: 1.selectorName { property: value; } Examples: 1 Hello Students! 2 Have a Good day! This div element has static 4 position property. 1.static { position: static; } Output: 2. The position: relative Property – Relative positioning places the HTML elements close to where it usually appears. Additionally, it allows us to IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 101 UNIT 2: Designing Websites change the place of an HTML element by defining the top, right, button, and left an HTML element. Take note: changing the position of an element using a relative position does not disturb the other elements. 1 selectorName { 2 position: relative; 3 } Examples: 1 The position:relative; property 2 Relative position property. 3 > This div element has relative 4 position property. 1.static { 2 position: relative; 3 left: 30px; 4 } Output: 3. The position: absolute Property – The absolute position removes the HTML element from the document flow while other elements will render as if it does not exist. It also enables the placement of an HTML element using the top, right, button, and left. However, changing the position of an element using the absolute position initially disturb the position of other elements. 1 selectorName { 2 position: absolute; 3 } Examples: 1 This paragraph has 2 absolute position. 3 The position:absolute; property 1.absolute { 2 position: absolute; 3 left: 30px; 4 } IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 102  UNIT 2: Designing Websites Output: 4. The position: fixed Property – The fixed position moves the HTML elements as it scrolls. 1 selectorName { 2 position: fixed; 3 } Examples: 1 The position:fixed; property 2 Fixed position property. 3 This div element has fixed 4 position property. 5 Scroll the page. 6 Scroll the page. 7 Scroll the page. 8 Scroll the page. 9 Scroll the page. 10 Scroll the page. 11... 1.fixed { position: fixed; } Output: CSS Display Property The display Property – The display property determines how HTML elements are going to be placed on a webpage. The default HTML display value is block or inline. Block level elements are the any HTML elements that uses the full width of a page. A block level element occupies the entire space and always begin on a new line. These are some examples of block level elements: , , , , and , and IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 103  UNIT 2: Designing Websites The inline level elements are the any HTML elements that do not force a new line and only occupy space as needed. These are some examples of inline level elements: As stated above, every HTML element has a default display value that is always changeable. 1 selectorName { 2 display: display-value; 3 } Examples: 1 Exchanging the default display value. 2 Span and paragraph tag. 3 Another paragraph tag. 1 span { 2 display: block; 3 } 4 5 p { 6 display: inline; 7 } Output: Another use of display property is hiding an HTML element using the none value. 1 selectorName { 2 display: none; 3 } Examples: 1 None display value. 2 This is the only HTML element that will show. 1 span { 2 display: none; IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 104  UNIT 2: Designing Websites 3 } 4 5 p { 6 display: inline; 7 } Output: IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 105  UNIT 2: Designing Websites YOU CAN ANSWER THESE! Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ 1. What is the difference between position and display properties? ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ ___________________________________________________________________ __________________________________________________________________. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 106  UNIT 2: Designing Websites TRY THIS ON YOUR OWN Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ Digital Resume: Update Design your digital resume using position and display properties as discussed in this lesson. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 107 UNIT 2: Designing Websites LESSON 4: CSS BOX MODEL OBJECTIVES: At the end of the lesson, students shall be able to: ▪ Describe the CSS Box Model; ▪ Classify the difference between padding, border, and margin; ▪ Compare the effects of padding, border, and margin; and ▪ Design elements following the rules of CSS box model. DURATION: 2 hours IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 108  UNIT 2: Designing Websites ASSESS YOURSELF Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ Digital Birthday Invitation: Update Improve and enhance the appearance of your digital birthday invitation by adding different types of CSS position and display properties you have learned from the previous lesson. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 109  UNIT 2: Designing Websites What is the Box Model? Everything in CSS is a box. Whether it is a button, image, or text, all HTML elements have a box model. Refer to the image below for the illustration of a box model. The box model consists of content, margin, padding, and a border. The blue color represents the content of the box or the content of an element, e.g., a paragraph tag with "Hello Students!" content. Hello Student!. The Padding, Border, and Margin Properties The padding Property – The padding property set how much space should appear inside the border and around the content of an HTML element. 1 selectorName { 2 padding-top: value; 3 padding-right: value; 4 padding-bottom: value; 5 padding-left: value; 6 padding: top-value right-value bottom-value left-value; 7 } Examples: 1 Click Me! 1 button { padding: 10px 30px 10px 30px; } Output: The border Property – The border property specifies the outer edge of an HTML element. Modify the border of an element using its three properties: 1. The border-color sets the color of the border. 2. The border-style sets the style of the border. Example values are solid, dashed, double, and dotted. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 110  UNIT 2: Designing Websites 3. The border-width sets width of a border. 1 selectorName { 2 border-color: red; 3 border-style: dashed; 4 border-width: 10px; 5 } Examples: 1 Click Me! 1 button { 2 border-color: red; 3 border-style: dashed; 4 border-width: 10px; 5 } Output: The margin Property – The margin property sets how much space should appear outside the border. Margin is usually used to specify space between the elements. 1 selectorName { 2 margin-top: value; 3 margin-right: value; 4 margin-bottom: value; 5 margin-left: value; 6 margin: top-value right-value bottom-value left-value; 7 } Examples: 1 Click Me! 2 Click Me Too! 1 button { padding: 10px 30px 10px 30px; margin: 10px 10px 10px 10px; } Output (with margin): Output (without margin): IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 111  UNIT 2: Designing Websites YOU CAN ANSWER THESE! Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ 1. What is the difference between a padding and a margin? ___________________________________________________________________ ___________________________________________________________________ __________________________________________________________________. 2. What is the use of CSS Box Model? ___________________________________________________________________ ___________________________________________________________________ __________________________________________________________________. 3. What will happen if you set a padding: 0 to an HTML element? ___________________________________________________________________ ___________________________________________________________________ __________________________________________________________________. 4. What will happen if you set a margin: 0 to an HTML element? ___________________________________________________________________ ___________________________________________________________________ __________________________________________________________________. IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 112  UNIT 2: Designing Websites TRY THIS ON YOUR OWN Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ Make your own attractive personal blog webpage using HTML elements and CSS properties. Make sure to use as many HTML elements as possible and make them visually appealing using different CSS properties. Sample Output: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_blog_layout IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 113  UNIT 2: Designing Websites POST-TEST EVALUATE WHAT YOU LEARNED Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ I. MULTIPLE CHOICE. Answer the following by encircling the letter of the best answer that fits the given question. 1. Which of the following CSS selectors chooses one unique HTML element? a. Universal Selector c. Class Selector b. ID Selector d. All of the above 2. CSS stands for ____________. a. Cascading Styles Sheets c. Cascading Style Sheet b. Creative Styles Sheet d. Cascading Styling Sheet 3. Which is a correct CSS syntax? a. h1 { color: white; } c. h1 black: color; } b. h1 { color= black; } d. h1 color: white 4. Which property is used to make an italic font? a. font-family c. font-weight b. font-italic d. font-style 5. Which property is used to set shadow over the text? a. text-shadow c. font-style b. text-decoration d. color 6. How do you add a font color to all the buttons in an HTML document? a. button { color: red; } c..button { color: red; } b. all-button { color: red; } d. #button { color: red; } 7. Which property is used to control the font size of an element? a. font-style c. font-size b. text-size d. text-style 8. What property is used to set space outside of an element? a. padding c. border b. margin d. CSS Box Model IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 114  UNIT 2: Designing Websites POST-TEST EVALUATE WHAT YOU LEARNED Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ 9. How do you select HTML element with a class of “hello”? a. hello c..hello b. class:hello d. #hello 10. Which property is used to define the border width of an element? a. bg c. background b. border d. width 11. Which is the default value or property position? a. absolute c. static b. relative d. none 12. To group HTML selectors, separate each selector with _____. a. space c. plus size b. equal sign d. comma 13. Which property is used to define the background image of an element? a. background c. background-attachment b. background-image d. background-repeat 14. "rtl" and "ltf" is the value of what property? a. font-family c. position b. font-italic d. direction 15. How would you reference your CSS across multiple HTML documents? a. Inline Style c. External Style Sheet b. Internal Style Sheet d. It is not possible 16. How can you add space between the border and the content of the element? a. padding c. border b. margin d. CSS Box Model 17. p { padding: 5px 10px 20px 15px; }. 20px is padding _____? a. top c. right b. left d. bottom IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 115  UNIT 2: Designing Websites POST-TEST EVALUATE WHAT YOU LEARNED Name: __________________________________ Date: ___________________ Course & Section: ________________________ Score: __________________ 18. It is a group of fonts with a similar class. a. generic font family c. Sans Serif b. font-family d. font 19. Setting the position of an element using ____ does not disturb the other elements. a. static c. relative b. absolute d. none 20. _______ is used to add an external style sheet in HTML document. a. b. c. d. None of the above IT 304: WEB SYSTEMS AND TECHNOLOGIES 1 116