Today’s Goals:
- Finish reviewing the CSS photo gallery code
- Period 3- Check out your Harvest of the Month media (school website and Facebook/Twitter). Each one either has been posted or is scheduled to post on our social media.
- Begin learning about CSS display property and values block, inline, and inline-block
Today’s Featured Site:
- Holiday-related sites:
- https://isitchristmas.com/ (check this on any day and on December 25 to see if it changes)
- http://christmasexperiments.com/ (you will want to keep going back to this one as each day gets updated!)
- http://www.itsashapechristmas.co.uk/
- http://www.watchyulelog.com/
- https://santatracker.google.com/village.html
CSS3 Photo Gallery Code Review
- Answer code (in case you need it to fix your code)
- Check out the following when you’re done
- z-index (layering content and determining what’s in front, what’s behind)
- transform (how we rotated the pictures)
- box-shadow (adds a shadow, similar to the text-shadow property you’ve used before)
- Some questions:
- Why is the padding for the images 10px 10px 25px 10px? What has the largest value there (top, bottom, left, or right) and why?
- What does list-style: none do to bullets and why did we use it here?
- Why are the images floated to the left? Why are we also using relative positioning with them?
- What does ul.gallery li a.pic-1 mean?
- Why did we have to apply classes to the images (ex. class=”pic-1″)?
- Why does ul have a class of “gallery”?
What is the CSS Display Property?
- In pairs, you will find answers to the following questions:
- What is the CSS display property?
- Why is it important?
- What are some examples of the display property (some of the values)?
- Name one display value and what it does.
- Name one display value and what it does.
- Name one display value and what it does.
About the CSS Display Property
- CSS can control how individual elements are displayed on a webpage. This is another way to create a webpage layout with CSS (in addition to positioning and floating, which we have recently learned).
- We will look at block and inline display today.
- First, let’s check out this video.
- Block elements take up as much space as they can (the full width of a page or container) and start on a new line (think paragraphs, headlines) while inline elements (the default display) only take up the space they need for the width of their content and don’t start on a new line (like images, links).
- Remember the CSS box model? Every element basically has an invisible rectangle around it that can have margins, a border, padding, background color/image, width and height. The CSS display property can control that rectangle and the inline-block value can make inline elements respond to the styling options available for the box model (margins, borders, padding, width & height) while also keeping it inline. Inline-block is often used to create menus from simple bullets (we’ll get into this tomorrow).
- Here is a good visual for inline-block. We are going to learn about this tomorrow.
Block and Inline Elements
- Let’s start a new page and add some things. Open Notepad++, and add opening and closing html, head, title, style, and body tags. Save this as cssdisplay1.html.
- Let’s learn about a new CSS selector– the universal *. Hit shift and the number 8 on your keyboard and add the * to your style sheet inside your style tags in your head section. Whatever properties we give this universal selector will be applied to EVERYTHING on our webpage. We’re going to give everything a border so we can see whether certain elements are block or inline. Add some curly brackets and then border: 1px solid blue;
- Now let’s add some elements: headline, paragraph, link, images (use these: https://www.mhswebdesign.com/storage/2012/06/1.jpg, https://www.mhswebdesign.com/storage/2012/06/2.jpg, https://www.mhswebdesign.com/storage/2012/06/3.jpg, https://www.mhswebdesign.com/storage/2012/06/4.jpg)
- Is each element block or inline? How can you tell?