CSS Solution for Web Designers – Part1

CSS or Cascading Style Sheets is a style sheet language used to define visual appearance and formatting of HTML documents. CSS is very simple to use and easy to learn, but using it in real project and creating something cool, awesome and user friendly is a little tedious. CSS solution is a going on tutorial that will tech you how to solve common problems in CSS and create something creative.

CSS Solution 1: Responsive Image in CSS

There are many solutions for making an image responsive in css, but the below code is the easiest and simplest way.

CSS Solution 2: Horizontally Center a div in a div

If you want to align your content horizontally, it means having equal space from left and right, here is the solution.

Now everything inside “container” class will be in center of the page. If you want less space in right and left, increase the width percentage number.

If you want to target IE8 +, you might consider the old way.

 

CSS Solution 3: First Letter of Article Larger

You might have seen this in publications or magazine, now you can use it in your website.

This code will change the first letter of each paragraph font-family to papyrus, font-size to 28px and you can add some more properties.

See the Pen zvVrqV by Hujjat Nazari (@Hujjat) on CodePen.0

CSS Solutions 4: Split the Paragraphs into Columns

If you want to display you paragraph like newspaper or magazine in few columns, you can use column-count property in css.

Demo:

See the Pen multi colunms by Hujjat Nazari (@Hujjat) on CodePen.0

CSS Solutions 5: Media Queries for Standard Mobile Phones.

If you want to design for multiple devices, which means responsive design, definitely you need to know about media queries and the devices size. here is the list of all popular device width.

Examples: 

  • iPhones
  • Galaxy Phones.
  • HTC Phones

Conclusion

I hope it has been informative for you and if you have any question related to this topic, feel free to comment it below. I will continue this tutorial with some more css solution in future topic. 🙂

<p>Web Designer and Developer. I work with HTML5, CSS3, JavaSript, PHP, WordPress, Laravel … etc.</p>

3 Comments

  1. Why users still use to read news papers when in this technological globe all is available
    on web?

  2. Thank you Dear Hujjat.
    It was really useful.

Leave a Reply