2.2 HTML5 and CSS3: Working with Images

2.2 HTML5 and CSS3: Working with Images


Images are an important part of any webpage. In this video, we will apply an image as our new background,
and then add an image to serve as our banner. To make the background an image instead of a solid color, find the CSS rule that targets the body tag, this
should be near the top of the page. Click at the end of the line that contains the background-color property
and press the Enter key to create a new line. Then, type the CSS code seen on screen. Next, we can remove the border that we applied to the wrapper in
Part One of the training series, we no longer need it. Locate the “div.wrapper” class and highlight the line
of code that defines the border property, then, press the Delete key. Next, we’re going to add a banner to our page. To add a banner, locate the div tag with class banner applied to it, and click in-between the opening and closing div tags. Next, type the HTML code seen on screen. Now, we want to make our banner a
link that links back to the homepage. To make our banner a link, type the following HTML code after
the opening div tag with the class “banner” applied to it, but before the our image tag. Then, close the anchor tag we just created by typing
the following HTML code after the image tag, but before the closing div tag. Now that we have made our image a link, a
border may appear around the image in some browsers. To remove the border, we must define default styling for any
image tag we may add to our web page. To define the default styling, click after the closing
curly brace after for the class “a.navbuttons:hover” and press the Enter key to create a new line. Then, type the CSS code seen on screen.

HTML5 + CSS3 Special Effects for Your Website

HTML5 + CSS3 Special Effects for Your Website


with the introduction of html5 and css3
there is a whole bunch of special effects that we can include in our web
page designs without a single PHP jquery or JavaScript and that’s a good thing
right in this series of short html5 and css3 classes we’ll explore a whole range of
special-effects to brighten up our websites as well as showing our site
visitors what we want them to do in this class will create a set of
interconnected spinning Cogwheels the result isn’t really useful but it looks
cool and we get to use some of css3 keyframes and explore the use of the
class plus class properties. This class is one of a series where we create
special effects with html5 and css3 that you can use on your website today just
like this hi I’m Jeb Riordon a project manager
turned html5 and css3 web developer, but that’s enough about me, right? if you want to brighten up your website
make it more fun for your readers then follow along with this series of classes
because coming soon are fancy buttons sliding images and carousels so enroll
in the class and let’s make some spinning cog wheels