Computer Programming QUARTER 2 cee CSS BORDER AND MARGINFor the learner: Welcome to the Computer Programming for the ICT Module on CSS Border and Margin ‘The hand is one of the most symbolized part of the human body. It is often used to depict skill, action and purpose. Through our hands we may learn, create and accomplish. Hence, the hand in this learning resource signifies that you asa learner is capable and empowered to successfully achieve the relevant competencies and skills at your own pace and time. Your academic success lies in your own hands! ‘This module was designed to provide you with fun and meaningful opportunities for guided and independent learning at your own pace and time. You will be enabled to process the contents of the learning material while being an active learner. ‘This module has the following parts and corresponding icons: Expectation - These are what you will be able to know after @& completing the lessons in the module Pre-test - This will measure your prior knowledge and the concepts to be mastered throughout the lesson. Recap - This section will measure what learnings and skills that you understand from the previous lesson. Lesson- This section will discuss the topic for this module. Wrap Up- This section summarizes the concepts and applications of the lessons. ‘Valuing-this part will check the integration of values in the learning competency. Post-test - This will measure how much you have learned from the entire module. Ito po ang parts ng module. i ja Activities - This is a set of activities you will perform.oy EXPECTATION ‘The students should be able to : «Classify the CSS Border property and Margin property * Perform and apply the uses of CSS property and Margin property When designing webpage. ‘* Cite the importance of CSS Border and Margin style attribute when designing a webpage. v= v— PRE-TEST v= Instruction: Select the letter that corresponds to the correct answer. 1. It is a CSS property that allows you to specify the style, width and color of an element border? A. CSS Margin _B. CSS Border C. CSS Style D. CSS Color 2. Which of the following is the Border property that modify the width of the four borders? A. Border Width —_B. Border Size C. Border Color D. Border frame 3. Which of the CSS properties are used to create space around elements, outside of any defined border? A. CSS Margin —_B. CSS Border C. CSS Style D. CSS Color 4. Which of the following CSS Border property, specifies each of the borders like top, right, bottom, and left? A. Border Width B. Border size C. Border Shorten property _D. Border Individual side 5. Which of the following CSS Margin property that can specify the margin for each side of an element? A. Margin- Shorthand B. Margin-Right C. Margin-Top D. Margin-Individual sidesos Last discussion you enjoyed how to style your webpage. We notice the power of CSS on how our webpage make it more presentable and interesting. We earned in CSS that we have syntax to follow in giving style in our website such as background color, text color, text size, text style and text alignment. The lists below are the following property can be used to add or change a style for a webpage, in one to sentence define the use of each property. 1. The font-size property 2. The text-align property 3. The font-size property 4. The background-color property 5. The color property 8S Border Properties ‘The CSS border properties allow you to specify the style, width, and color of an element's border. Y Border can be in all sides ¥ Red bottom border. ¥ Rounded border Y Blue left border Border Style ‘The border-style property specifies what kind of border to display. The following values are allowed: + dotted - Defines a dotted border + dashed - Defines a dashed border+ solid - Defines a solid border + double - Defines a double border + groove - Defines a 3D grooved border. The effect depends on the border-color value + ridge - Defines a 3D ridged border. The effect depends on the border-color value + inset - Defines a 3D inset border. The effect depends on the border-color value + outset - Defines a 3D outset border. The effect depends on the border-color value + none - Defines no border + hidden - Defines a hidden border ‘The border-style property can have from one to four values (for the top border, right border, bottom border, and the left border. <1DOCTYPE hemn> see The border-style Property poo

This property specifies what kind of border to athe aeplaye/p> pedotted (border-style: dotted) re Didashed {border stye: dashed:)

A dotted border Pasolid (border-style: sold) A dashed border

P.double (border-style: ouble;) “

A slid border pagroove {border-style: groove;) ‘A double border Buridge (border-style: ridge: piinset (border-style: inset p class="groove">A groove border “A ridge border

| Prowtet (borders: outa) “can "aet> Anat bord cfo> Pinone fborder ste: none) “Spean-outeet > tet border Pe> Pihidden (border styl: hidden) “petnenone’ oto heder fino (ordorstye dotted deshed sous |_| A don Drder

outta Senet ml nde > pos “front ate ‘Figure 1 Tes border-style PropertyFigure 2 Border Width + The border-width property specifies the width of the four borders. + ‘The width can be set as a specific size (in px, pt, em, em, etc) or by using one of the three pre-defined values: thin, medium, or thick. + The border-width property can have from one to four values (for the top border, right border, bottom border, and the left border). <1DOCTYPE htmi> ehtmb> cheae>