Next, let's work on something that is personally a weakness of mine: cascading style sheets. Cascading style sheets, (commonly css) are what give shape and form and visual appeal to a page. If you take the html example from the previous post, and take a text editor, save it as an *.htm or *.html file, you can open it in a browser, and see a very plain web page. That is ok, and expected, because the html is only supposed to carry information about what kind of information is being displayed; that is it, is kinda like a model for information. CSS is a kinda view, something that makes that information look appealing. So let's get started.
First thing, I recommend getting a css reset sheet to help, here is a reset sheet that will probably work for most of our needs. A reset sheet makes it so that no elements of your document have any style at all; why do we want that? Because most browsers have subtle nuanced differences in the way they present certain elements; if we start off by removing everything, then it is more reasonable to guess that perhaps we will be producing something that looks the same in most browsers. I saved it as reset.css in the same folder as the html mockup I am working on. Then I created my own recipe.css file. Now add this to your <head> tag in your html:
The only line we want to put in recipe.css so far is the following:
Reminder, I have added a <div> tag with an id="Recipe" right inside the body tag of the html between now and the last example. If you open the html file in a browser now, the text is going to look really boring, but that is what we are trying to do with the first step. Let's open up the css document and add the following:
Save your css, and refresh the html file, and you will see that each of the sections named in this file will have the garish colors encoded in those values. I do this because I think visually, and seeing all the sections colored like this helps me place them where I want. Looking back at my mockup, I notice that most of the recipe card's color is actually #eedc5b, so I'll put that in the css for background-color for Recipe, also the recipe card has small margins on each side of the card, and a three pixel black outline, so let's try making the card with some margins on the left and right, giving it a black outline, and giving it a small margin from the top. We will make the #Recipe tag thusly:
Starting to get somewhere now, I'm going to take a break from this and hack at it again later, but as you can see, most of what is listed is kinda self explanatory. We set the border color to black, and made it a solid 3 pixel line, we made the card 80% of the width, and gave it a 20 pixels margin from the top, and automatic left and right margins. This centered it horizontally and moved it down from the top. Next I will arrange the text to flow into their appropriate areas.
No comments:
Post a Comment