The padding clears an area around the content (inside the border) of an element. In our case, this area equals 0 px.
Like margins, you could set padding-left, padding-bottom, etc...
In our case, I set the padding to 0 for every bound of the area in a single command.
"h2" and "h3" are the definitions of other "title-like" lines used in the page. Property-wise, they don't present anything new to what we've already seen. I'll just let them by and let you see how they are defined, and how they are displayed back in the browser.
Then, we arrive to the "a" element, defining the hyperlinks.
As you can see, you can add styling to some events of the element.
The styling is applied to any hyperlink in the page. (<a></a> tags)
To any link ? Almost, remember how we already setted "a" for the "nav" element.
This current "a" applies on the rest of the page.
Now comes the part for the "header", line 118.
You can see the width property:
This means the element will all the space (100%) available in its container. If you check index.html you can see that <header>'s container is <body>.
So <header> takes the whole width of your browser. If you resize the window of your browser, the <header> will still take 100% of its width.
I commented this line as at first I fixed the height of the element, and realizing after that it was better to have it "free-heighted" as depending on the size of the contained element, and adding a 10px margin-bottom that allowed me to obtain a gray bar (of body color) like the bar ahead of the header.
This property means that text displayed/contained in the element will be centered. You can also set its value to "right", "left", "justify". This only deals with the horizontal alignment.
Next element is a bit special and a rebirth.
This element was discarded in CSS 2 and is now used again in CSS 3. It allows you to create your own "font-family" by providing a .ttf (.eot for IE) font file. The user downloads the font, and it is used in the browser to display text with the custom font.
Here, the font files sit in a folder fonts.
I used the Font Face Generator by fontsquirrel.com to make the code and convert the chosen font to eot format. The provided html example in the "webkit" proposed to you for download when you convert a font is helpful and insightful.
With the use of this element you can now use another name in the font-family property of elements.
I use it in #title.
This element is an id selector. The id selector is used to specify a style for a single, unique element.
You define it thanks to the "#" character.
To display it in the html file, you add an id="title" parameter to any element. Line 15 in index.html you can see it is used in a <div> tag (<div> is dimmed a neutral tag).
The text in between the tags get the "title" style applied to it.
In our case: the title that appears in a stylish sci-fi font.
font-family: HeavyDataRegular, sans-serif;
I used the HeavyDataRegular font family I just created in @font-face.
In index.html you can see that this is all <header> contains and does. In a few lines, a pretty nice effect is setted. And all relying on what browsers can do by default.
Back to pf.css.
The next element is "#content", line 145.
#content {
display:block;
text-align: center;
background: #bbbbbb;
padding-bottom: 5px;
background-image: url("images/0back.png");
background-position: top left;
background-repeat: horizontal vertical;
}
This element acts as the container/parent for all the rest of the content of the webpage. It's used as a <div id="content"></div> in index.html.
The display property is a bit tricky to understand.
In this page, this helps to say that the contained elements (the following elements in between the <div id="content"></div> tags) will use this element as reference for their positioning.
It helps to put a hierarchy in the elements of the page and set the layout out of it.
The fact that the value is "block" makes that the element automaticly takes the whole width of the available space.
This helps for the next attended effect: background image pattern:
background-image: url("images/0back.png");
background-position: top left;
background-repeat: horizontal vertical;
Those three lines allow you to set a picture as background image (url), set it's starting position (top left) and sets its tiling (horizontal vertical).
For more infos about the values of those properties check this W3C page.
The image will automaticly replicate itself as its repeat is set to go horizontal and vertical.
The next element is "#surround", line 156.
This is the "window type" that surrounds the canvas.
Allows for the element to be centered.
box-shadow: 15px 15px 20px #000000;
-webkit-box-shadow: 15px 15px 20px #000000; /[i] Safari [/i]/
This box-shadow property is the one allowing for the nice shadow effect around the border of the "surround" element.
Like for the text shadow property, you set x,y, size and color.
The "-webkit-box-shadow" line stands for compatibility in Safari browser. The property "box-shadow" isn't implemented yet officialy in it, they implemented their own version of the specs. The property should be implemented and standardized in a coming release of the browser. (like we already saw for the gradient functions earlier)
-webkit-border-radius: 18px;
-moz-border-radius:18px; /[i] Firefox 3.6 and earlier [/i]/
border-radius: 18px;
The border-radius property makes the roundy corners out of the "surround" element. You can set either pixels or percentage (%).
No surprise in index.html we use surround as a <div id="#surround"></div> line 20.
The next element is "canvas", line 177 in pf.css.
Displays a 1 pixel border around the very canvas.
background-image: url("images/0canvback.png"),url("images/0canvback.png"),url("images/0canvback.png");
background-position: center center, top right, bottom left;
background-repeat: no-repeat;
This loads the three Construct2 logo image displayed in the background of the application (which layers are transparent to achieve this effect).
the separating with "," allows to load different elements for different sources if you want to. You're not limited in the number you can load.
The background-position property allow us to position the three images. And we don't repeat them.
Take a look line 35 in index.html.
<a href="#top" style="float:right;"><img src="images/back_to_top.png" title="Back to top"/></a>
This element's style is set "on the fly", directly in the tag. This is acceptable, as this is a "Back to top" button.
Clicking the link brings the user to the id="top" in the opening <body id="top"> on top of the page.
The CSS property "float" allows for the element to be placed freely on the left or on the right of the parent element (here "surround").
Let's jump to "section" element, line 198 in pf.css at the "section" element.
Nothing really new here in the properties, and notice how lines 38, 74 and 159 in index.html you use <section></section> tags to create the element, not a div.
This is one of the new tags that will be taken in account by SEO and ease up the ranking and "understanding" of the content of your pages by search engines. Here as I provide informations about the PathFinder and its documentation, I chose to use the <section>.
Reminder: the id="something" parameter in <section> is used as anchor. In the <nav></nav> on top of page, one <a> links to "#something", and if it is clicked it will scroll down the page to the anchor.
Line 41 in index.html
<li><img src="images/source-default-000.png" /> is the <strong>source</strong> and <img src="images/dest-default-000.png" /> is the <strong>destination</strong> of the path to generate.</li>
You encounter the <li></li> tags. This tag makes up a list with a dot element.
Then you encounter the <img /> tag. This allows to display the picture reffered to in 'src=""'.
For the "Instructions", I used the graphics from the demo application directly (as they are to be downloaded anyway).
Note: as we are closing the tag <img /> we don't need to put another closing </img> tag.
You may also have noticed the tag <hr> line 40. This peculiar tag draws a horizontal line taking all the width available. No need to close this one either and it doesn't even require a "/".
Now check line 52 of index.html.
<div id="heuristic">Manhattan</div>
Let me take you to back to pf.css, to the "#heuristic" element, line 215 where the styling of this div is defined.
display:inline-block;
font-family: arial;
font-size: 15px;
height:30px;
width:120px;
padding-top:8px;
padding-left:28px;
margin-right:-28px;
margin-top:-4px;
background-image: url("images/btnheuristic-default-000.png");
background-repeat: no-repeat;
The "heuristic" element is set as inline-block (so will appear in the current container "section" and I maybe able to set its dimensions and position.). Its font is set to arial (like in the app), its size to 15px.
The dimensions height and width are those of the background image "images/btnheuristic-default-000.png".
The padding and margins are finaly used to allow the element to set nicely in the text.
This CSS definition only displays a button.
The text of the button is indicated as the text between the tags <div id="heuristic"></div> in index.html.
In pf.css at line 229 check the ".cutcorner" element.
The novelty about this element is the "." in front of it, defining it as a class selector.
The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
In index.html the element cutcorner is used in tags <div class="cutcorner"></div> as you can see lines 55 and 70.
We jump to line 175 in index.html.
<div id="author">BY<br /><a href="http://www.scirra.com/users/kyatric" target="_new" ><img src="http://www.gravatar.com/avatar/a65e480502234e6601b8983f69b64833?s=128&r=pg" title="Kyatric" /></a></div>
Cross-check with line 249 in pf.css to see the element "#author".
I wanted to have a little fun there and add my gravatar in the page.
So I use the gravatar request with the MD5 hash of my email adress. I give also the 's' parameter for the wanted size and the 'r' (rated) paramater to see it can show my gravatar from the PG rating.
The parameter "title" stands for the text that the tiptool will display when letting the cursor over the image for a moment.
In the pf.css file, interesting things are happening.
Indeed line 260 you can see a "#author a" element.
This "overwrites" the default styling for the "a" hyperlink element as seen in "nav a", applied only to elements in a <div id="author"><a></a></div>.
You can see it only consists of 3 lines and a comment:
opacity:.50;
/[i]For IE[/i]/
filter: “alpha(opacity=50)”;
filter:alpha(opacity=50);
This sets the opacity of the element.
Check line 175 in index.html, you see that the <div id="author"> contains an <img /> tag. So this image is, by default, 50% transparent.
This time, line 268, we're even exploiting the "hover" event of the "a" element.
For all <a></a> in a <div id="author"></div>, when the cursor of the mouse goes over, we apply the defined style here.
opacity:1;
/[i]For IE[/i]/
filter: “alpha(opacity=100)”;
filter:alpha(opacity=100);
And this is done by making the image totaly opaque.
Also, we encounter another novelty of HTML5 and CSS3: the transform property and the rotate() value.
/[i] Rotates the author picture [/i]/
-webkit-transform: rotate(45deg); /[i] Safari and Chrome [/i]/
-moz-transform: rotate(45deg); /[i] Firefox [/i]/
-ms-transform: rotate(45deg); /[i] IE 9 [/i]/
-o-transform: rotate(45deg); /[i] Opera [/i]/
transform: rotate(45deg);
Once again, we have to use prefixed functions so that the result is correctly displayed in each major browser.
In pf.css line 283 you have the "footer" element, sitting on bottom of the page.
It contains a few elements and in particular "#footadv" and its property "float" set to right. (line 308)
As seen with the "Back to top" button, the "float" property allows you to place the element on the left or the right of the available space.
As you can see in the way elements are hierarchized in index.html line 178 to 195, the "footadv" is placed after "tutolink" and so appears on the right of the page on the same line.
To finish you can also see in index.html line 197, in the "scripts":
<!--[if IE]><script>document.createElement("header");
document.createElement("footer");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
document.createElement("article");
document.createElement("figure");
document.createElement("figcaption");
document.createElement("hgroup");
document.createElement("time");
</script><![endif]-->
This piece of code is for IE 8 and beyond. This peculiar browsers need this bit of javascript code to take advantage of the named tags.
There are more than used in the current file, but this way, you can just copy/paste it and reuse in your future pages.
I haven't used more javascript for this index page, but it is possible to. You could add scripts to the page and have them sitting with the C2 application.