10 essential CSS skills for web designers_html/css_WEB-ITnose

CSS is the foundation for web designers. Understanding CSS can enable them to design more beautiful and unique web pages. Using CSS techniques to handle CSS skillfully is something that fascinates designers. There is a lot of interesting stuff in the deep sea world of CSS, you just have to find what works best for you. Of course, it is impossible for us to remember all the rules and syntax of CSS at once, but we should still remember those very useful CSS skills for future development. Today we have carefully prepared 10 of the most useful CSS tips for web designers. If you want to design a unique and outstanding web page, you must pay attention to it. This blog was written while working with Business Card Printing, an online printing company that provides high-quality printing services.

1. @font-face

A good way to use fonts from other servers. Obviously, if you can't find the font you need on the hosting server, you can use this method in the style to introduce the font you need.

1

2

3

4

@font-face {

font-family : Blackout;

src : url ( "assests/blackout.ttf" ) format ( "truetype" );

}

2. .clearfix

If you cannot clear the float of an element, this is a way to clear the float. You can use this method individually with any HTML element.

1

2

3

4

5

6

7

8

.clearfix:after {

content : "." ;

display : block ;

clear : both ;

visibility : hidden ;

line-height : 0 ;

height : 0 ;

}

3. @media

@media can set the media of your current responsive website, which can help you adjust the website according to the user's monitor. width.

1

2

@media screen and ( max-width : 960px ) {

}

4. transform: rotate(30deg); Combine these transformation properties and CSS transition effects to Create interesting dynamic effects.

1

2

3

.title {

transform: rotate( 40 deg);

}

5. background-size

This rule will help you in the website Adapt to full screen background. It's not like previous versions of CSS where you had to write clunky code.

1

2

3

4

body {

background: url (image.jpg) no-repeat;

background- size: 100%;

}

6. input[type="text"]

This input[type="text"] selector and other advanced selectors are very helpful in taking you from general level to advanced level. Wouldn't it be great to use attribute selectors to control the submitted version of an input element or add an icon to an external link?

1

2

3

input[type= "text" ] {

width : 250px ;

}

7. margin: 0 auto;

Oddly enough, there isn’t any specific standard for centering block-level elements. This method centers a block-level element within its parent element.

1

2

3

#container {

margin : 0 auto ;

}

8. a {outline: none;}

While browsing your website , click on a link and a huge dotted box will span the entire web page, which will seriously affect the user's mood. The "a {outline: none;}" declaration will remove this, but for the sake of ease of use you forgot to add the :focus state to your link as well.

1

a { outline : none ;}

9. overflow :hidden

This is the best way to clear the floats of elements that have not been loaded into your CSS. Use it to make your website more responsive.

1

2

3

.container {

overflow : hidden ;

}

10. color: rgba();

PNG image because of its transparency It’s popular and widely used in web design, but now you can also achieve transparency using the following method. It uses three channels of red, green and blue and sets its opacity value to achieve transparency, like 0.5 corresponding to the opacity of P.

1

2

3

.btn {

color : rgba( 0 , 0 , 0 , 0.5 );

}