Since I've started to get deeper into the science of Web Design, I got more and more excited about its uncountable possibilities and almost limitless freedom of creativity. So, I decided to investigate, to collect and share with you everything I learned so far, but also for my own benefits. If you found any disagreement so please go ahead and shoot me with your own arguments. I'll listen to you and I'll be open for a discussion with you. But! Please be always polite! Otherwise I'll kick your ass :) !

the "span" - tag

The most useful fact on a span tag ( "< span >" ) is the ability to insert into an Html - text specific classes, id's and even definitions. But the downpart on it is, once a span tag has been applied, it will have value, even the man.css stylesheet has been changed. With other words, that means, that the span - tag is overwriting ANY css rules wthin an external css stylesheet. On a platform with multiple sites this can become a major timeconsuming problem, when any styles needs to be changed or adapted. It's much easier to use the span tag just for class and/or id assignments. Amy other css rules shall indeed performed within an external css stylesheet. This does not only improve the overall working flow but also the loading time of the browser.

Dear Visitor,

thanx a lot for visiting my Site!

Currently I'm working very hard on the content of this site. If you want to see some more CSS3 - tweaks, please feel free and visit this site from time to time! If any question shall arise - please go ahead and contact me! However, I try to leave as much comments into the @media desktop.css coding, so you will be able to check step by step of what I've done here. For the best user experience, I highly recommend you to use the newest version of Mozilla Firefox! To move back to the main site, please hit the "home" button at the site menu!

WORK IN PROGRESS!

A brief overview about CSS

For sure this might be a major question of all newbees. CSS means nothing else than "Cascading Stylesheet". Before the existence of CSS, the look of those web platforms was everything else, but not pretty! Because of this, at the year 1996 the world wide web (or W3C) Consortium decided to release a very first Version of CSS, which has become the world standard of web design, since today! With that release, web developer have seen themselves confronted to a very new challenge: Given the Web a new and an individual charme. Anyway, only two years later, at the year 1998 CSS2 has been brought to the market. 1999, the new release of the CSS3 included a lot of new features and units for web designers, i.e. 3d-styling, motion tweaks, and so on. At the other hand, of browser incompatibility, on the date of its release, CSS3 couldn't even implemented so far. However, since html5 has awoked on the market, and also since the media devices has grown so unexpectly fast, also browser provider finally went along with their technology. Of course, still today, at the year 2014 there're a lot of incompatible browsers, i.e. the Internet Explorer (-ms-), or Safari (-webkit-) which having a hard time to render complex CSS, such as "preserve-3D" or "gradient". That still is giving some of the web designers a lot of headache, even me. To overcome this there are some workarounds by setting the display and the overflow properties to "hidden", while hovers over the respective section. Anyway, as long as not all browsers adapted to the current stage of the CSS3, such experimental tryouts are not recommended on sites with business purposes, except you really know waht you you're doing. Last thing to say is, that about CSS are very useful links with many well explained specification - samples, such as the CSS Specification site of w3.org or the w3schools - community, which really does a great job to explain the most important basic syntaxes of CSS3 with nice sample code snippets and even with a neat "try it yourself"- option.

Responsive Design

In our today's world we don't only use CSS for styling, but also for responsive layouting. Even for some newbees at the first glance it seems to be pretty hard to achieve, it is not really hard to do so. All what you need or it is time, patient and a creative mind! The first step ou have to do is to create several layout for the respective device. Therefor you need some specifications about the different screen sizes of those devices you want to target. I.e. thescreen size of a tablet is much bigger than the screen of a smart phone, but much smaller as a screen of a desktop. In my case, for tablet screen I'm using a min-width of 768px and a max-width of 999px. At the end, the way, how you're going to approach a tablet screen size is your own choice. If you have still no smart phone, and neither a tablet yet, you can play around by shrinking your browser, to see how your design is responding to specific sizes. Me, on my behalf I differ between the following screen size areas:

  • for Desktop: min-width: 1000px
  • for tablets: min-width: 768px and max-width: 999px
  • for smart phones: min-width: 481px and max-width:767px
  • for small phone devices landscape: min-width:321px and max-width:480px
  • for small phone devices portrait I define a max-width of 320px

Anyway, in order to tell a browser what screen size should be applied to the respective layout, there's nothing else to do than to apply a media query to each style sheet. To do that, just place a command at the very first line of your css style sheet, saying (in this case for Tablets):@media only screen and (min-width: 768px) and (max-width:999px) {. At the end of the stylesheet you only need to close the definition with the closing "}", and that's it! A last hint I want to give you: A great tool to check your website for respective screen resolutions is the screenfly on quirktools.com. There you just need to paste the link of your site and you are ready to check your site in any device sizes, which are out of this current day market.

Managing CSS Style sheets

The organization of your CSS style sheets have a significant influence into your daily work flow, such as changing properties and defunung new rules. There are several ways to handle stylesheets. The most lazy one is just to place the stylesheet right into the html file(s). Therefore we need to use the "style - tag". Between the open and the ending style - tag we can place our CSS rules. At the first glance, that method seems to be fast and easy, but soon as you work with multiple html and media queries, that kind of CSS - styling will turn you into a nightmare. It is recommended right at the creation of any stylesheet to clarify the purpose of the stylesheet by giving it a meaningful name, such as "main.css", "desktop.css", "tablet.css" and so on. Into the main.css, you can define any global rules, such defining h1, h2, h3 -tags, @font-face - properties, footer, navigation bars and much more. All others should be used for replacing div - contents and for restyling menu structures. In order to avoid any heavy loading issues with the browser, its recommended to place all CSS - style linking in a separate stylesheet. Me, on my self, I just called that extra linking style sheet "mQuery.css". The linking you can manage via the import - rule, i.e: @import url("tablet.css") only screen and (min-width:768px) and (max-width:999px);. Another advantage from this technique is a well structured organizations. It's clear and very easy accessible. As I mentioned already, these are only suggestions. But at the end its up to you, how you build your own multi media - responsive web site.