Cascading Style Sheets (CSS) offers website administors and designers to style and arrange the look of web pages. We’ve watched the evolution of web page design and have kept up with it. We’ve also been on the cutting edge of web page design and layout, including designing some of the first CSS experiments that push graphic elements on a web page to the extreme using tableless design and only CSS.
This series of articles offers tips, tricks, and techniques for CSS and web page design. Not all the styles within these articles work on every web browser, as they tend to push the limits of the browser. You are free to look, learn, and even take any designs within these pages for your site. If you link back to us, that’s nice, but these are here to help you learn and to help us teach web page design and CSS techniques.
If you are new to website and web page design, there is much that will help you here, but also take time to check out more articles in our Web Pages category, especially the topics of Website Development to help you start developing your website, and Web Page Design to help you learn more about designing web pages.
If you are very new to this and you would like to use a software program that is easy-to-use, powerful, customizable, and free, check out our articles on WordPress.
I have quite a few examples in my CSS Experiments on showcasing your photographs, as a single image or in a gallery format, and I found a very simple, easy-to-understand explanation of how to use CSS to create a photo gallery from Web Reference.
With this article I hope to show you how to produce a [...]
While I deal with this and other design issues I had with my site in the article WordPress Tips and Tricks - Template Files, Styles, and Themes, the issue keeps coming up. So I decided we needed to address it specifically.
What to do when images start shoving other images round?
Generally, we try to avoid browser hacks, but there was one in particular we couldn't avoid. It causes floats within floats, especially those with images floated within floating containers, to fail to recognize the height of the floated image within the container and stair step or wrap itself around neighboring containers. Does that make sense?
Let's spell it out.
One of the biggest problems I had is with floats within floats. A division with a float inside scrambles your layout in FireFox, though it looks great in MSIE. The inside floats don't line up and when they reach the virtual "end" of the parent container, they overlap past the end and into the next container. The problem is that the float doesn't "clear" or stop at the end of the container where it should. It needs to be told when to stop with the "clear" function, but unfortunately different browsers need different instructions to accommodate those instructions.
Fonts are a critical part of web page design. They display the content of the page, but their style reflects the entire look of the site. They play a very important role. Understanding how fonts work is part of web page design and we look at how they work, which are the most popular fonts, and how to embed fonts into your web page design.
What does a web page look like when viewed with different screen sizes, resolutions, on handheld computers, PDA, by the color blind, and visually impaired? A web page today is used by a variety of different medium, from small cell phones and handheld computers to large screen televisions and projectors. We take a look at the different views a web page may be seen to help you understand the thinking that needs to go into your web page design. It isn't all about the Internet browser or computer screen any more.
Enjoy our CSS Experiments? Want to know more? How about how we did them? About the lessons we learned along the way? We learned a lot with our CSS experiments, about how CSS and HTML work together, about how to emulate what we see in magazines and ads, about working with different browsers to maintain the experimental look, and how to write the code that tells you how we did all this. Oh, we learned this and so much more, so you can now learn from us about how these popular CSS experiments were all done.
Learn how to jazz up your article or post content with CSS. Stylize text, paragraphs, lines, headings, and more. Want a colorful headline? Want to know how to play with vertical and horizontal positioning? Creating shadows, embossing, and other text effects? We have the step-by-step instructions to help you play with elements within your web pages to add some jazzy effects to your website.
Have you tried flipping filters? Or playing with some of the other interesting filters available for CSS? These work in MS Internet Explorer, but not all other browsers. You can have fun flipping text and graphics around, creating embossed effects, and more with all the CSS filters out there. We show you a few fun examples in these step-by-step instructions for your web page design.
