- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Found 1566 Articles for CSS
![Abhinanda Shri](https://www.tutorialspoint.com/assets/profiles/13552/profile/60_73264-1512711555.jpg)
188 Views
To set media queries for different CSS style rules, you can try to run the following code −ExampleLive Demo body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightblue; } } If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color
![Ankitha Reddy](https://www.tutorialspoint.com/assets/profiles/13550/profile/60_73963-1512711511.jpg)
295 Views
Media queries are for different style rules for different size devices such as mobiles, desktops, etc. You can try to run the following code to implement media queries with CSS3 − Example Live Demo body { background-color: lightpink; } @media screen and (max-width: 420px) { body { background-color: lightblue; } } If screen size is less than 420px, then it will show lightblue color, or else it will show light pink color
![Priya Pallavi](https://www.tutorialspoint.com/assets/profiles/13562/profile/60_91320-1512544134.jpg)
121 Views
Box-sizing property is used to change the height and width of the element. Since CSS2, the box property has worked like as shown below −width + padding + border = actual visible/rendered width of an element's box height + padding + border = actual visible/rendered height of an element's boxExampleTo understand the box-sizing property, let us see an example:Live Demo .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } TutorialsPoint.com TutorialsPoint.com
![varma](https://www.tutorialspoint.com/assets/profiles/13568/profile/60_26300-1512638592.jpg)
189 Views
Let us understand the difference between CSS2 sizing property and CSS3 box-sizing property.CSS2 sizing propertyLive Demo .div1 { width: 200px; height: 100px; border: 1px solid green; } .div2 { width: 200px; height: 100px; padding: 50px; border: 1px solid pink; } TutorialsPoint.com TutorialsPoint.com CSS3 box-sizing propertyLive Demo .div1 { width: 300px; height: 100px; border: 1px solid blue; box-sizing: border-box; } .div2 { width: 300px; height: 100px; padding: 50px; border: 1px solid red; box-sizing: border-box; } TutorialsPoint.com TutorialsPoint.com
![Prabhas](https://www.tutorialspoint.com/assets/profiles/13554/profile/60_90506-1512543588.jpg)
137 Views
Outline means to draw a line around the element at the outside of the border.ExampleYou can try to run the following code to implement the CSS3 outline-offset property −Live Demo div { margin: 20px; padding: 10px; width: 300px; height: 100px; border: 5px solid pink; outline: 5px solid green; outline-offset: 15px; } TutorialsPoint
![Sreemaha](https://www.tutorialspoint.com/assets/profiles/13570/profile/60_64977-1512709068.jpg)
112 Views
The CSS3 resize property is having three common values as shown below −horizontalverticalbothExampleUsing both the values in resize property in the CSS3 user interface:Live Demo div { border: 2px solid; padding: 20px; width: 300px; resize: both; overflow: auto; } My Website
![mkotla](https://www.tutorialspoint.com/assets/profiles/13540/profile/60_41073-1512640012.jpg)
196 Views
The border-image-repeat property is used to set the border image as rounded, repeated and stretched with CSS.ExampleYou can try to run the following code to implement the border-image-repeat property:Live Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; border-image-slice: 40; border-image-width: 20px; } This is image border example.
![Ankitha Reddy](https://www.tutorialspoint.com/assets/profiles/13550/profile/60_73963-1512711511.jpg)
500 Views
The border-image-source property is used in CSS to set the image path. You can try to run the following code to set the image path − Example Live Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image-source: url(https://tutorialspoint.com/css/images/border.png); border-image-repeat: round; } This is image border example.
![seetha](https://www.tutorialspoint.com/assets/profiles/13549/profile/60_42938-1512640859.jpg)
99 Views
CSS border-image property is used to add image border to some elements. You can try to run the following code to implement the border-image property −ExampleLive Demo #borderimg1 { border: 15px solid transparent; padding: 15px; border-image: url(https://tutorialspoint.com/css/images/border.png) 50 round; } This is image border example.