A little bit of CSS
Coding with just HTML can get boring. That's why we'll need to know a thing or two about CSS. CSS makes everything shiny and pretty!
Out tutorial will continue with the following points:
- How do you transfer design ideas to CSS?
- Nice and clear navigation between pages
- sticky elements which don't scroll with the page
- Different style ideas for websites, e.g.
- Classic blog
- "tumblr" style blog
- individual articles
- other applications:
- gallerys with lightbox
And of course, as always, we are open for specific requests from you!
- Website elements are arranged in rectangles, so called boxes
- important attributes:
How do you transfer your design ideas to CSS?
- Elements can be
- fixed, e.g. at the top of the page as a navigation menu
- adjusted to a grid
- neither scroll upwards or downwards, i.e. stay
- Pick one example, either one we suggested or choose your own and start experimenting!
- Working with sample or inspirational websites makes the process much easier. Rememeber: Nobody likes copycats, so always refer to the original author
- It's not a shame to look at cool tricks other people did on their websites
- Sketching your draft really helps
- Experiment live with size, color, font-size etc
Navigation between pages
- fixed bar on the top of your page
- As an alternative you can fix your navigation bar a bit more downwards for a more "tumblry" style, e.g. after an image.
- Placing elements next to each other is a little complicated.
- That is why use use so called grids.
You can download a CSS grid here
<div class="grid"> <div class="unit whole red"><pre>groß</pre></div> </div> <div class="grid"> <div class="unit half green"><pre>halb</pre></div> <div class="unit half orange"><pre>und halb</pre></div> </div>
This will look like this
Links that might interest you
- Learn CSS Layout explains the basics in coherent constitutive steps
- A Beginner's Guide to HTML & CSS
- A Advanced Guide to HTML & CSS
- HTML & CSS course at codeacademy
- Overview CSS properties
- CSS Diners - Where we feast on CSS Selectors, game that helps to test your understanding of CSS selectors
- Gridism, simple grid Framework
- Bootstrap, popular and very extensive CSS framework
- Can I Use, compatibility tables for support of newer HTML and CSS
- Font Awesome, many icons for website design
- available for charge: