Behind the screen – HTML, CSS
Sketches and ideas are one thing and the materialisation is the other.
I guess the materialisation is not the right word. What would be the right word for it in the virtual world?
Lets keep this for a next lesson, will figure that together.
But for now say we want to translate the picture to the browser so that it can show the intention to the end viewers with all beauty and interaction as we intended.
For that matter we have couple tools, or rather programming languages. The scaffolding base is done in HTML which is beautified by other language called CSS. You can simply forget there are any two or more languages incorporated and learn it as one, as you need them.
Structure
The website structure is basically a 2 dimensional box within a box with other boxes within and so on and so forth.
The most common box or container if you like is a div container. The container is kinda weird beast. It is linear – it is written linearly but it gets 2 dimensional shape.. woooaaa that made the stuff even more confusing.
What ever… remember the .whatever container we used? Here is the small recap.
<div class="whatever"> <div class="box"> loyalty commences the album, with the first track’s, “Welcome’s,” direct reference to the Chicago Bulls theme from the 1990’s, when vocalist Meagan McNeal, as if doing introductions before a live audience, names the band members of The Blacktet: alto saxophonist Christopher McBride, vibraphonist Justin Thomas, bassist Joshua Ramos and drummer Makaya McCraven </div> <div class="box childbox"> <div class="childbox"> </div> That loyalty commences the album, with the first track’s, “Welcome’s,” direct reference to the Chicago Bulls theme from the 1990’s, when vocalist Meagan McNeal, as if doing introductions before a live audience, names the band members of The Blacktet: alto saxophonist Christopher McBride, vibraphonist Justin Thomas, bassist Joshua Ramos and drummer Makaya McCraven </div> </div>
Although there are many HTML containers we can use the most common one the div.
Because the div tag is a container we have to define its limits, its range. Where it starts and where it ends. This is done by one miniscule difference and that is the slash within the second part of the tag. If you forget the slash or mix match the containers and their ends, the result might not be what you have intended to be.
As you can see and know already, we can nest the containers into one another. In other words there can be a box inside other box or many, and if there is a “space” enough there can be more nested into one another. Just be sure you define their ranges properly and close the divs where they should be closed. Use indentation, It might seams like another way how to loose you time, but it definitely is not.
Make it human readable and its pays back each time you return to the project.
Oki, so what container or what, but why do I need them..
Containers defines the space where their inner content can live. The container can be stretched by its content or it can restrain the content within it self. Confusing? That is only because it is highly flexible and if we define all its possibilities it gets super confusing.. but that doesn’t matter now. What matters is that this simple box like structure gives as countless possibilities. Look on all the websites.. all is just box within a box with some style applied on it.
Style
Although you can just play with boxes and their positions and by that make a grate website.. like books, they have no explicitly visible design, but the proportions makes it looks good or not. This simplistic approach is wildly used nowadays, where you see no design just proportions and spaces a sure content within.
No matter the simplicity, the style is there and the way how it is done is by CSS language, Which is really just a style declaration.
If we want to define style for some object/box/container we have to address it.
We can address the container it self saying “hey you all divs go right”, but that will send all the divs to right and what if want to move some to the left? Well if we know their “names” or “surnames” it might be easier. And so we give them names (as I did in the code above already).
And now we can say:
“hey you divs, go right, but you “childbox” stay put”
And that is how you style or sort the website.. you think of it as of a real world and say it in another language the browser understands.
The request above will look like this in CSS:
<style>
div{
float:right;
}
.childbox{
float:none;
}
</style>The name is declared as class attribute. The container can have as names as you wish and make sense to you.
Again, the name/class helps us to address each container or many of same kind and give them some properties, such as color of the font within, it’s background color, define how far they stay from their neighbor and many other properties .. there are really a lot.
And because there is a zillion ways how to make things, how to style them, it would be insane to know learn them all. Don’t do that!
If you want to do something with or to the container or its content ask Google. Hey bro how to “move div right” [ENTER]
copy > paste – tweak!
If you wonder how to be more specific check this out:
<style>
/* address all div containers */
div{
float:right;
}
/* address chilbox containers, no matter if nested or not */
.childbox{
float:none;
}
/* address the "childbox" only within the whatever container.. see the space in between the names, that is what defines the inheritance */
.whatever .childbox{
}
/* address all "box" container that have also a another name/class "childbox"... see no space in between? That is as if you say someones name with his/her surname it belongs together no matter that it is two words .. deos that make sense .)
It's about being specific only when it is needed.
*/
.box.childbox{
}
</style>and finally ..
Links
HTML : http://www.w3schools.com/html/html_classes.asp
CSS : http://www.w3schools.com/css/
and you surely will end up one day on http://stackoverflow.com/