Part 3: Images & form styling NOMZAMO S WEBSITE

Size: px

Start display at page:

Download "Part 3: Images & form styling NOMZAMO S WEBSITE"

Jasper Cook
5 years ago
Views:

1 Part 3: Images & form styling NOMZAMO S WEBSITE 1

2 OUR MISSION: In this lesson, we ll learn 3 new things 1. How to include the logo image 2.How to add background image 3.How to style the input form

3 At the end of this part your site will look like this! HI! I'm Nomzamo Mbatha,an Actress. Say hello! Your Submit 3

4 LET S GET STARTED 4

5 1. Logo Image 5

6 Adding an image is easy! Just use the <img> tag <!DOCTYPE html> <head> <title>nomzamo Mbatha</title> <style> body { text-align: center; background: black; color: white; font-family: Helvetica; } </style> </head> <body> <img src="assets/nomzamo.png"> <h1>nomzamo Mbatha</h1> <p>hi! I'm Nomzamo, an Actress. Say hello</p> <input type=" " placeholder="your > <input type="submit"> 6 </body>

7 CHECKPOINT #1 Replace the <h1> tag with <img src= /assets/nomzamo.png > TIP: Creates an image element on the page. The src should be equal to URL pointing at an image file. 7

8 The <img> tag uses the image located at the URL in the src attribute <img src= assets/nomzamo.png >

9 Hrmm, /assets/nomzamo.png Doesn t look like a URL to me. Don t URLs need a domain, like in them?

10 Good question! There are actually two types of URLs: absolute and relative.

11 ABSOLUTE URL Absolute URLs are the type of links you re used to. They include and the full domain name before the directory. RELATIVE URL /assets/logo,png Relative URLs are shortcuts that allow you to skip the domain name. it only works If you re linking to a file on the same domain or folder as the current page.

12 2. Background Image 12

13 Remember the background property from earlier? We used it to make the body s background a colour (black), but you can also use it to change the background to an image.

14 You can set the background to an image like this. URL should be set to an actual path to an image file. <head> <title>nomzamo Mbatha</title> <style> body { text-align: center; background: url("url"); color: white; font-family: Helvetica; } </style> </head> <body> <img src="assets/nomzamo.png"> <h1>nomzamo Mbatha</h1> <p>hi! I'm Nomzamo, an Actress. Say hello</p> <input type=" " placeholder="your > <input type="submit">

15 CHECKPOINT #2 1. Change the background url to ( /assets/nomzamo-bg.jpg ) TIP: Creates an image element on the page. The src should be equal to URL pointing at an image file. 15

16 Great! Now, let s make the background image look a little better on the page.

17 This is how you prevent the background from appearing tiled. <title>nomzamo Mbatha</title> <style> body { text-align: center; background: url( assets/nomzamo-bg background-size: cover; color: white; font-family: Helvetica; } </style> </head> <body> <img src="assets/nomzamo.png"> <h1>nomzamo Mbatha</h1> <p>hi! I'm Nomzamo, an Actress. Say h <input type=" " placeholder="your

18 CHECKPOINT #3 1. Set the background-size to cover. TIP: Background-size: Change the size of the background image of an element. Can be set to a value in pixels, percent, or the keywords cover or contain. EXAMPLES: Body { background-size: 50px; } Body { background-size: 50%; } Body { background-size: cover; } Body { background-size contain;} 18

19 This will center the background image on the page. <style> body { text-align: center; background: url( assets/nomzamo-bg background-size: cover; background-position: center; color: white; font-family: Helvetica; } </style> </head> <body> <img src="assets/nomzamo.png"> <h1>nomzamo Mbatha</h1> <p>hi! I'm Nomzamo, an Actress. Say h <input type=" " placeholder="your

20 CHECKPOINT #4 1. Set the body s background-position to center TIP: Background-position Controls where the background is placed in the element. The unit can be pixels, percent, or keywords like left, top, center, etc. EXAMPLES: Body { background-position: 10px 50px; } 20

21 3. Form Styles 21

22 So far we ve only applied styles to the <body> tag. Let s get more specific and starts applying styles to the other elements.

23 Let s make the paragraph s font a little bigger body { text-align: center; background: url( assets/nomzamo background-size: cover; background-position: center; color: white; font-family: Helvetica; } p { font-size: 22px; } </style> </head> <body> <img src="assets/nomzamo.png"> <h1>nomzamo Mbatha</h1>

24 CHECKPOINT #5 1. Set the paragraph s font-size to 22px TIP: Font-size Controls the size of the font in an element. EXAMPLES: body { font-size: 18px; } 24

25 By setting border to 0, we can get rid of some of the default styling on our inputs. } p { background-position: center; color: white; font-family: Helvetica; font-size: 22px; } input { border: 0; padding: 10px; } </style> </head> <body> <img src="assets/nomzamo.png">

26 CHECKPOINT #6 1. Set the border of the inputs to 0px TIP: Border 3 options width (in pixels), type (solid, dashed, etc.) and color. Setting it to 0 resets it. EXAMPLES: H1 { border: 1px solid black} 26

27 Padding is the amount of space between the edge of an element and the stuff inside it. Let s even it out for both input elements and set it to 10 pixels. background: url( assets/nomzamo-bg color: white; font-family: Helvetica; } p { font-size: 22px; } input { border: 0; padding: 10px; } </style> </head> <body> <img src="assets/nomzamo.png"> <p>hi! I'm Nomzamo, an Actress. Say 27 hel

28 CHECKPOINT #7 1. Add 10px of padding to the inputs. TIP: Padding Controls the amount of space between the edge of an element and the stuff inside it. EXAMPLES: input { padding: 10px;} 28

29 Let s increase the font-size to make it more proportionate to the rest of the text color: white; font-family: Helvetica; } p { font-size: 22px; } input { border: 0; padding: 10px; font-size: 18px; } </style> </head> <body> <img src= assets/nomzamo.png > <p>hi! I'm Nomzamo, an Actress. Say

30 CHECKPOINT #8 1. Set the input s font-size to 18px. TIP: Padding Controls the amount of space between the edge of an element and the stuff inside it. EXAMPLES: input { padding: 10px;} 30

31 Almost done! Let s make the call-to-action button nice and bright red, then we ll be finished.

32 You can select an element by one of its attributes using square brackets, like this color: white; font-family: Helvetica; } p { font-size: 22px; } input [type= submit ] { border: 0; padding: 10px; font-size: 18px; } </style> </head> <body> <img src= assets/nomzamo.png > <p>hi! I'm Nomzamo, an Actress. Say h

33 For example, you could select the input using either input[type= ] or input[placeholder= your ]. Both would work.

34 CHECKPOINT #9 1. Set the submit input s background to red 2. Set the submit input s color to white TIP: Attribute selectors A CSS selector that lets you choose elements based on the value of their attributes. EXAMPLES: Input[type= submit ] { background: red} 34

35 Wow! My new website looks great! I love it. I m recommending you to all my friends if they need any web work done 35

36 GREAT WORK! You just learned the basics of CSS. 36

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.