Tip:
Highlight text to annotate it
X
Let's take a look at the starting project file for this video series
so you are more comfortable with the HTML and CSS that's already in place.
Here is our starting practice file opened up in Firefox.
And we also have the Firebug plugin
opened. We will use the Firebug just to get a quick
familiarity with the actual HTML that we have
setup. So first let's take a look at that down here in the
HTML panel you can see it's a very simple structure we have
an html5 header tag. We have a
section tag both siblings of each other. The
header tag has an h1 tag in it. And the section tag has an h2 to tag and two p
tags in it.
There isn't too much to that. If we use Firebug we can actually
highlight over these and you can see them up here in the browser window
as they're being selected. And we can also see the
layout over on the right hand side.
And if you look at the layout panel you'll notice that each of the
tag elements that are in our document are set up for
a position property of static. So that means they just flow
one after another down the page as you might expect in a normal flow layout.
The CSS is that the document level so we can take that
tag in open up there's the style tag with the CSS.
Or we can view it over here in the CSS panel for
Firebug. There's nothing too surprising in the CSS
for this document. We will notice that first the
header and section elements are being set so they recognized for legacy
browsers.
Then we're using the universal selector to
set color margin and padding for all the other elements. The body has a background
in a family
for the fonts. The header section we are
targeting inside the header element the h1 for its
properties such as background font size height
padding and line with. And then the
other major part of the documents is the section element and it has
internally an h2 and a p tag and we are also targeting those.
These are our base CSS selectors styles and properties.
And they will apply into all different types of views including
a iPhone view or a Samsung Galaxy view
or an iPad or any tablet view or even as you see them right here on our
web browser which is a rather wide width web browser
in a very large monitor. So what we'll do is we'll modify these
properties and selectors based on detecting
the width of the screen using CSS media queries.
And we'll do that so that are view looks more appropriate for that particular
width.
But first we'll start by understanding how the default mobile device
width and scaling is controlled. You may have noticed
web pages on your smartphone too tiny to read and requiring horizontal scrolling
to view them.
We can then then start detecting device widths using CSS
media queries.