Working With The Box Model (1).pdf

Hey there! Can you still recall some of the pointers of our discussion last meeting? Let’s try if you still remember! READY? What are the 3 types of CSS? In-Line CSS Internal CSS External CSS NICE ONE ! What is the CSS Syntax? select...

Hey there! Can you still recall some of the pointers of our discussion last meeting? Let’s try if you still remember! READY? What are the 3 types of CSS? In-Line CSS Internal CSS External CSS NICE ONE ! What is the CSS Syntax? selector { property : value ; } WELL DONE ! How to set font color to blue to paragraph tag? p { color : blue ; } IMPRESSIVE ! How to set font size to 50 pixels to list item tag? li { font-size : 50px ; } WOW! YOU’RE REALLY GOOD! How to set background color to green in div tag? div { background : green ; } NICELY DONE ! GUESS THE WORD Working With Box Model LESSON ONE Learning Objectives: 1. Identify what are the properties of the Box Model. 2. Apply the properties in the webpage. 3. Discuss the importance of being organize. Introduction CSS is the style sheet language for web page presentation and design, including colors, fonts, and layouts. CSS is a popular language used in various electronic devices, devices - from printers to large or small screens. In this lesson, we will explore the CSS Box Model, which is the basics of every element on the web page. What is the CSS Box Model? It is a container that contains multiple properties including borders, margin, padding, and the content itself. It is used to create the design and layout of web pages. According to the CSS box model, the web browser supplies each element as a square prism. Content It consists of content like image, text, or other forms of media content. The height and width properties help to modify the box dimensions. Content  Content It consists of content like image, text, or other forms of media content. The height and width properties help to modify the box dimensions.  height Content width Padding It is the space around the content area and within the border-box. It can be applied to all sides of the box or to the specific, selected side(s) - top, right, bottom, and/or left. Padding height Content width Border It surrounds the padding and the content, and can be applied to all the sides of the box or to selected side(s) - top, right, bottom, and/or left. Padding height Content width Border Margin It consists of space between the border and the margin. The margin does not possess its own background color and is completely transparent. It shows the background color of the element, like the body element. Padding height Content width Border Margin  TOP Padding height LEFT Content RIGHT width Border Margin BOTTOM QUESTIONS? ASK ME! Activity 2: Let’s Go For A! Instructions: 1. Open Google Chrome. 2. Type this in the address bar: joinmyquiz.com 3. Enter this join code: 645132 Activity 3: I Noticed Something! Instructions: 1. Open Notepad. 2. Work and apply the properties of CSS. 3. The output of your webpage must look like this.  Hello there! Click Me! Let me show you something! Takeaway: THANK YOU !