To space the banner from the top of the browser window we’re applying a margin of 0.2em and to let our banner-image cover all the width of our browser’s window, we’ve set the corresponding rule with a percentage of 100. These first rules simple enough to understand. The first one is the banner element, with this code for styling: #banner The code for the very first part (which includes the elements of banner, newsletter bar and menu) will be shown piece after piece with a very short comment, as for the other items of the page. Having said that, let’s dive deep into the code.Īs for the HTML section, in this case we’ll proceed step-by-step from the upper part of our layout to the bottom part. The homepage of our totally customizable website should look more or less as following:Īs you can see, I have imagined a very big banner to allow the designer to express all his creativity and chosen colors that combine in a clear and positive way (I really love them!). Now it’s time to introduce the first CSS rules in order to have a general idea of the graphic style that the homepage of our website will display, especially for the pc-desktop version.įirst of all, before having a look on the rules we have to apply in order to create a particular design for our homepage, let’s see how it will appear in our browser window (my default browser is Chrome but, with the application of some specific rules, you’ll be able to obtain the same result for all modern web-browsers). In the last article of this series, I’ve shown how to start building a website from scratch with a particular focus on the HTML code and its main elements.
0 kommentar(er)
