Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd Logo
Upload

Welcome to Scribd!

  • 138 views

    Computer Programming Module 2 (.Net Technology) 2

    Uploaded by

    Joshua Bonsol
    This document is a lesson plan on CSS backgrounds for a computer programming student. It introduces CSS backgrounds and their properties. It lists the main background properties like image, position, size, repeat, attachment. It discusses using these properties to modify backgrounds and provides examples. It also discusses multiple backgrounds and browser support. The lesson includes exercises for students to practice different background techniques on a tutorial website and answer questions.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd

    Computer Programming Module 2 (.Net Technology) 2

    Uploaded by

    Joshua Bonsol
    138 views4 pages
    This document is a lesson plan on CSS backgrounds for a computer programming student. It introduces CSS backgrounds and their properties. It lists the main background properties like image, position, size, repeat, attachment. It discusses using these properties to modify backgrounds and provides examples. It also discusses multiple backgrounds and browser support. The lesson includes exercises for students to practice different background techniques on a tutorial website and answer questions.

    Original Description:

    Computer Programming

    Original Title

    Computer Programming Module 2 (.net Technology) 2

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    This document is a lesson plan on CSS backgrounds for a computer programming student. It introduces CSS backgrounds and their properties. It lists the main background properties like image, position, size, repeat, attachment. It discusses using these properties to modify backgrounds and provides examples. It also discusses multiple backgrounds and browser support. The lesson includes exercises for students to practice different background techniques on a tutorial website and answer questions.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    138 views4 pages

    Computer Programming Module 2 (.Net Technology) 2

    Uploaded by

    Joshua Bonsol
    This document is a lesson plan on CSS backgrounds for a computer programming student. It introduces CSS backgrounds and their properties. It lists the main background properties like image, position, size, repeat, attachment. It discusses using these properties to modify backgrounds and provides examples. It also discusses multiple backgrounds and browser support. The lesson includes exercises for students to practice different background techniques on a tutorial website and answer questions.

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Download as pdf or txt
    of 4

    ST. BLAISE COMMUNITY ACADEMY, INC.

    Senior High School


    San Luis, Batangas/ chs_sbca53@yahoo.com/ www.chs-sbca.com

    Learner’s Material
    COMPUTER
    PROGRAMMING
    (.net technology) 2
    Module 2: Quarter 1 | 2ND SEMESTER
    Topic: CSS BACKGROUND

    1|CO
    NAME OFMSTUDENT:
    PUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT
    Republic of the Philippines
    DEPARTMENT OF EDUCATION
    Region IV-A CALABARZON
    PROVINCE OF BATANGAS

    St. Blaise Community Academy, Inc.


    San Luis, Batangas/ chs_sbca53@yahoo.com
     043 – 740-960609997646638 / 09218539116

    Name of Student: ________________________________________________ Section: _______________________


    Present Address: _________________________________________________ Contact no.____________________
    Subject Matter: COMPUTER PROGRAMMING (.NET TECHNOLOGY) GRADE 11 – TVL ICT
    Topic: CSS | BACKGROUND (Module 2 – Quarter 1)/ Second Semester

    As JavaScript future developers, the sheer amount of stuff we're expected to know is enormous, and it
    grows bigger every day.
    With so many different languages, tools, and technologies competing for our time and attention, it can
    be tough to figure out what to prioritize. Should we get better at TypeScript?
    In my opinion, if we really want to maximize the things that we can learn in Javascript, one of the best things we
    can focus on is CSS.
    By the end of this lesson, you are expected to;
    1. Identify different techniques in modifying backgrounds of your web browser with Cascading Style
    Sheet;
    2. Explore different background properties in CSS; and
    3. Demonstrate the proper steps in modifying backgrounds- Image, Repeat, Attachment and Shorthand
    in the web browser using CSS.

    DIRECTION: Read the following statement and select the letter of the correct answer.
    1. Which CSS embedded rule is used to assign the location of the image on a web page?
    a. Background-position
    b. Background-repeat
    c. Background-attachment
    d. Background-image
    2. All CSS embedded code must be placed inside the [answer1] tags which is located within the [answer2]
    tags.
    a. Style – head
    b. Style – title
    c. Style – body
    d. Style – paragraph
    3. Which of the following phrases must be added to CSS embedded code to stop the background image
    from scrolling with the text?
    a. Fixed
    b. Cover
    c. No-scroll
    d. Stop
    4. What word must be added to the code "background-size:" to make the image fill the entire web page
    background?
    a. Cover
    b. Fixed
    c. No-scroll
    d. Stop
    5. Which CSS embedded rule allows the text to scroll but the image to stay still?
    a. Background-attachment
    b. Background-repeat
    c. Background-position
    d. Background-image

    2|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT


    The CSS background properties are used to add background effects for elements.
    The background property in CSS allows you to control the background of any element (what paints underneath
    the content in that element). It is a shorthand property, which means that it allows you to write what would be
    multiple CSS properties in one. Like this:
    body {
    background:
    url(sweettexture.jpg) /* image */
    top center / 200px 200px /* position / size */
    no-repeat /* repeat */
    fixed /* attachment */
    padding-box /* origin */
    content-box /* clip */
    red; /* color */

    }
    background is made up of eight other properties:
     background-image
     background-position
     background-size
     background-repeat
     background-attachment
     background-origin
     background-clip
     background-color
    You can use any combination of these properties that you like, in almost any order (although the order
    recommended in the spec is above). There is a gotcha though: anything you don’t specify in
    the background property is automatically set to its default. So if you do something like this:
    body {
    background-color: red;
    background: url(sweettexture.jpg);

    }
    The background will be transparent, instead of red. The fix is easy though: just define background-
    color after background, or just use the shorthand
    (e.g. background: url(...) red;)

    Multiple backgrounds

    CSS3 added support for multiple backgrounds, which layer over the top of each other. Any property related to
    backgrounds can take a comma separated list, like this:
    body {
    background: url(sweettexture.jpg), url(texture2.jpg) black;
    background-repeat: repeat-x, no-repeat;

    }
    Each value in the comma separated list corresponds to a layer: the first value is the top layer, the second value
    is the second layer, and the background color is always the last layer.

    Browser support

    Support varies among the different specific properties, and each corresponding article in the Almanac has
    unique browser support notes. Basic single-color backgrounds and single images work everywhere though, and
    anything that isn’t supported just falls back to the next best thing, whether that’s an image or a color.
    IE Edge Chrome Firefox Safari Opera

    Yes Yes Yes Yes Yes Yes

    iOS Chrome Android Firefox Android Android Browser Opera Mobile

    Yes Yes Yes Yes Yes

    3|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT


    DIRECTION: Answer the following questions.
    (PLEASE TYPE YOUR ANSWER ON THE PROVIDED SHARED BLOG.)
    1. What is the purpose of CSS Background?
    2. What are the different properties of CSS Background?

    DIRECTION: Perform the following Task and provide screen shots of each entry
    Open the website: www.w3schools.com
    Open CSS Tutorial Tab and Click the CSS Background Tutorial
    Perform the following tutorials;
    1. Background Color
    2. Background Image
    3. Background Repeat
    4. Background Attachment
    5. Background Shorthand

    Send your screen shots thru messenger.

    DIRECTION: Read the following statement and select the letter of the correct answer.
    1. Which CSS embedded rule is used to assign the location of the image on a web page?
    a. Background-position
    b. Background-repeat
    c. Background-attachment
    d. Background-image
    2. All CSS embedded code must be placed inside the [answer1] tags which is located within the [answer2]
    tags.
    a. Style – head
    b. Style – title
    c. Style – body
    d. Style – paragraph
    3. Which of the following phrases must be added to CSS embedded code to stop the background image
    from scrolling with the text?
    a. Fixed
    b. Cover
    c. No-scroll
    d. Stop
    4. What word must be added to the code "background-size:" to make the image fill the entire web page
    background?
    a. Cover
    b. Fixed
    c. No-scroll
    d. Stop
    5. Which CSS embedded rule allows the text to scroll but the image to stay still?
    a. Background-attachment
    b. Background-repeat
    c. Background-position
    d. Background-image

    Which category in 21st Century skills do you think the core of our topic falls in? (Communication, collaboration,
    creativity, critical thinking, productivity, leadership and technology literacy). Explain why.

    RECORD YOUR VOICE FOR YOUR ANSWER AND SEND IT THRU MESSENGER (GROUP CHAT)

    4|COMPUTER PROGRAMMING (.NET TECHNOLOGY)2 11 TVL ICT

    You might also like