- 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 8895 Articles for Front End Technology
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
137 Views
In CSS, the ‘border’ property is used to apply the border to any HTML element, such as div. Also, we can set the different styles for the border, color, width, etc. In this tutorial, we will learn different approaches to set the width of the border of the element. Also, we will learn to set the width of different sides of the element. Use the border-width CSS property to set the width of the border The ‘border-width’ CSS property is used to define the width of the border. Users can pass the four values to set the width ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
176 Views
In CSS, the ‘marker-offset’ CSS property is used to specify the distance between the nearest border edges of marker box and principal box. In CSS, the marker is a pseudoelement that refers to the bullet points of the lists. Here, we will learn to set the distance between the nearest border edges of marker box and principal box. Syntax Users can follow the syntax below to set the distance between the nearest border edges of the marker box and the principle box. marker-offset: value; Example In the example below, we have created an unordered list of different programming ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
204 Views
In CSS, the ‘text-decoration’ property is used to underline, overline, and strikethrough the text. Underlining the text means drawing a line below the text, and overlining the text means drawing a line above the text. Striking through the text means drawing a line on the text to show text is erased. In this tutorial, we will learn to use the different values of the text-decoration CSS property to style text differently. Syntax text-decoration: style decoration color thickness; Values Style – It represents the style of the decorated line, such as solid, dotted, wavy, etc. Decoration - ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
126 Views
Developers can customize the font of the webpage using various CSS properties. For example, the ‘font-size’ property is used to specify the font size, and the ‘font-weight’ CSS property is used to specify the font weight of the text. Furthermore, there are lots of other CSS properties which we can use to customize the fonts. The ‘font’ CSS property can be used as a shorthand of all properties to customize the font. Syntax Users can follow the syntax below to use the ‘font’ shorthand CSS property to customize the web page's font. font: font-style font-weight font-size/line-height font-family; Values ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
3K+ Views
In this tutorial, we will learn to shake a button when the user hovers using HTML and CSS. Creating a shaking button makes the UX of the application more attractive. We need to create a custom animation using the CSS ‘keyframes’ rules to shake any HTML element. After that, we can use custom keyframes as a value of the ‘animation’ CSS property to shake the button when the user hovers over the button. Syntax Users can follow the syntax below to shake a button on hover using HTML and CSS. .btn:hover { animation: key_frame_name animation_time ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
6K+ Views
We can use the ‘iFrame’ in HTML to embed the document in the HTML web page. For example, we can embed youtube videos in the web page using the ‘IFrame’ HTML tag. The ‘iFrame’ contains the border by default. In this tutorial, we will learn various approaches to removing the border from the IFrame using CSS. Use the Frameborder HTML Attribute The ‘IFrame’ contains the ‘frameborder’ HTML attribute. It can have either ‘0’ or ‘1’ as a value. Using the ‘0’ as a value of the ‘frameBorder’ HTML attribute removes the border; otherwise, it adds the border to the ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
3K+ Views
Generally, the developer uses JavaScript to add the behaviour to the HTML code. Sometimes, we can also add behaviour to the HTML code using CSS. For example, we can create a slideshow using HTML and CSS rather than using JavaScript with HTML. We can create custom keyframes to animate the slides and create a slideshow. Syntax Users can follow the syntax below to create a slideshow using only HTML and CSS. .slides { width: calc(716px * 2); animation: slideShow 10s ease infinite; } @keyframes slideShow { 30% {margin-left: 0px;} ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
311 Views
It is important to add animations to icons or images to improve the UX of the application. In this tutorial, we will learn to add animation to the icons. Also, we will learn to reduce or increase the size of the icon during the animation. We will use the ‘transform: scale’ property to change the dimensions of the icon during the animation. Syntax Users can follow the syntax below to reduce the size of an icon during the animation. img { animation: icon 5s infinite; } @keyframes icon { 0% {transform: scale(1);} ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
9K+ Views
In CSS, selectors are used to selecting the elements by class name, id, tag, etc. There are also some wildcard selectors available in CSS, which we can use to define the queries to select the HTML elements. Wildcard selectors allow us to select an HTML element containing the particular substring in the value of the particular attribute, such as class or id. In this tutorial, we will learn to use the *, ^, and $ wildcard selectors for classes and id. Contains (*=) wildcard selector in CSS The contains (*=) wildcard selector allows developers to find all HTML elements ... Read More
![Shubham Vora](https://www.tutorialspoint.com/assets/profiles/485898/profile/60_1456867-1657516792.jpeg)
473 Views
The SCSS allows developers to write CSS in a more structured way. Also, we can create multiple files for CSS while using the SCSS and import the required file in the main SCSS file. In this tutorial, we will see the objective to put ‘_’ before the filename in SCSS. When should we put ‘_’ in front of the filename in SCSS? Whenever we put the -_’ before the filename in the SCSS, the compiler ignores the file while compiling the SCSS. The file becomes partial if the filename starts with the ‘_’ character. For example, we have two ... Read More