CSS is a vast domain. As a beginner, you need to become conversant with the tips and techniques that would help you accomplish your chosen design effortlessly. This post takes you through some proven CSS tricks to get started with designing.
Important CSS Tricks You Must Know
1) Controlling Exact Position of Web Element With ‘Absolute Positioning’
With ‘absolute’ positioning, you can exercise control on any element’s position on your site. Specify the pixel value preceded by ‘top’, ‘bottom’, ‘right’ or ‘left’ for controlling the position.
Example:
position:absolute;
bottom:30px;
left:30px
This CSS makes the element to remain 30px above the browser’s bottom and 30px to the left. Absolute positioning can be used within a div.
2) Selecting Every Elements of Selector
For a given selector, all elements can be selected with *. If, for instance, you are using *p before adding CSS styles, each element within the document with
tag will be selected. You can easily target selected parts of site.
3) Overriding Other CSS Styles
You must use this with caution as potential problems may show up if used regularly. For overriding a particular CSS style, you need to put a !important as the suffix of CSS style.
.section h1 { color:blue !important; }
The above would render H1 header of specific site section as blue instead of red.
4) Centering CSS Items
Centering is based on CSS content to be aligned in the centered manner.
You can center text with ‘text-align:center;’. Replace ‘center’ with right or left for specific alignment.
Through addition of block property, you can center ‘div’ or other element. After that, you may use auto margins.
div1 {
display: block;
margin: auto;
width: anything under 100%;
}
‘Anything under 100%’ is important for targeting elements without set width like 55% or 250px.
5) Aligning Text Vertically for Single Line
Used mostly in CSS menu navigation , you have to render menu’s height same as that of text’s line-height.
.nav li{
line-height:50px;
height:50px;
}
6) Adding Hover Effects
By adding :hover to CSS, you can change the style of elements when mouse is hovered over it. You can use it to change the color, font size or weight etc. of text links, icons, buttons, sections etc.
Example:
.entry h2{
font-size:36px;
color:#000;
font-weight:800;
}
.entry h2:hover{
color:#f00;
}
7) Using Transition For Easing In Changes
When you use hover effect, you may not want the changes to happen abruptly to elements. For making the changes ease in over a period of time, you need to use the transition property.
Example:
.entry h2:hover{
color:#f00;
transition: all 0.4s ease;
}
Now, the change would occur over a timeframe of 0.4 seconds. It would be soothing to eyes.
8) Using ‘max width’ For Resizing Images
When you need image to be fit for a given width through proportional scaling, consider using ‘max width’.
img {
max-width:100%;
height:auto;
}
This implies that the maximum width of image will be 100%. By factoring in image’s width, height would be calculated spontaneously.
9) Controlling The Section’s Elements
When your aim is to target images of your blog or any specified section, you need to use class option and include it with original selector. Now, the images used in the specified section would be selected. Other images like logo, sidebar pictures, social media icons etc. won’t be selected.
Example:
.blog img{
max-width:100%;
height:auto;
}
10) Applying CSS To Selectors or Classes Collectively
Suppose you want to put same border type along sidebar, all images, and blog section. To repeat the action, you need not write similar CSS thrice. You have to specify the elements separated/using by commas.
Ex:
.blog, img, .sidebar {
border: 1px solid #000;
}
This tip is used by many of the reputed web design companies to develop the website with CSS.
11) Solving Issues Related To Layout & Padding
To make your web design steer clear of padding or layout issues, use ‘box-sizing:border-box;’. After setting a box to given width and adding padding to the same, you will find that box’s size increases due to padding. You can revert the increase in size with ‘box-sizing:border-box;’. The actual size of the box would prevail.
12) Inserting Controllable Elements
With ‘content’ CSS property, you can insert controllable elements. For example, an icon can be inserted from the font icon in a given place. The text to be inserted has to be wrapped in “quotation” marks.
13) Resetting CSS Settings of Browsers
The default CSS settings of various browsers are different. To ensure consistency and standard base, they have to be reset uniformly. Unneeded borders, preset margins, heights of lines, list styles, padding etc. can be removed.
14) Using Drop Caps
Another of CSS tips is to create attention grabbing drop caps easily with element ‘:first-letter’.
Ex:
p:first-letter{
display:block;
float:left;
margin:4px;
color:#f00;
font-size:400%;
}
The letter is now set to 4x the size of following letters. For preventing overlapping, 4px space is provided around the letter. Letter color is set to red.
15) Forcing Text To Change Case
If your entire blog has been published in caps, you may want the same to change in lowercase and intermitted capitalized text. You need not retype. Instead, you can use fixed CSS style in the stylesheet for forcing text to change its ‘case’ formatting.
Example:
In above example, h1 title tag has been targeted.
16) Filling The Complete Screen With Specific Section
When a section has to be used for filling the complete browser screen irrespective of its size, you have to use vh (view(v) height(h)). The percentage before vh indicates the amount of browser screen that you want to fill. For accommodating a static navigation menu, you may want to set the value to 85%.
For applying the vh amount, you need to build a class for the container. The given media query has to be tweaked so that its value caters to particular screens or phone orientations. If the image is in landscape mode, stretching it for fitting portrait screen would cause its aesthetic value to be lost.
.fullheight { height: 85vh; }
17) Styling Phone Links
Suppose, you have placed a link which upon tapped by user calls phone number, you may experience issues in its styling. This is because conventional selector for active line option becomes inefficacious. You have to use CSS3 format for overcoming the problem.
Example:
Conclusion
You have by now grown familiar with popular tips meant for beginners. CSS for beginners is very interesting provided you are investing quality time and efforts to learn the intricacies of CSS.
Top comments (0)