Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Front End Technology Articles
Page 505 of 652
The outline-width Property in CSS
The outline-width property can be defined to draw a line of specific thickness around the borders of the element, but the outline is not a part of an element's dimensions, unlike border property. Syntax selector { outline-width: value; } Possible Values ValueDescription thinCreates a thin outline (typically 1px) mediumCreates a medium outline (typically 3px) thickCreates a thick outline (typically 5px) lengthCreates outline with specific width (px, em, rem, etc.) NOTE − The outline-style property needs to be defined before declaring outline-width. Example 1: Thin Outline ...
Read MoreSetting Background Image using CSS
The CSS background-image property is used to set an image as a background for the selected element. The url() function is used in the background-image property to specify the image source. Syntax selector { background-image: value; } Possible Values ValueDescription url('URL')The image URL source linear-gradient()Creates a linear gradient as background radial-gradient()Creates a radial gradient as background conic-gradient()Creates a conic gradient as background repeating-linear-gradient()Repeats a linear gradient pattern repeating-radial-gradient()Repeats a radial gradient pattern repeating-conic-gradient()Repeats a conic gradient pattern Example: Basic Background Image This example shows how to set ...
Read MoreEmbedded or internal Style Sheets in CSS
CSS files can be embedded internally by declaring them in the tag. This decreases the load time of the webpage. Although embedded CSS declarations allow dynamic styles, it should be downloaded at every page request as internal CSS can't be cached. Internal CSS are declared in the tag inside the tag. Syntax The syntax for embedding CSS files is as follows − selector { property: value; } Example 1: Internal Style Sheet for Styling a div ...
Read MoreSetting Margin Space around elements using CSS
The CSS margin property is used to create space around elements, outside of their borders. The margin property is a shorthand for margin-top, margin-right, margin-bottom, and margin-left. Let's say we have set the following margins using the shorthand property − margin: 10px 45px 35px 70px; The above means − 10 pixels for the top margin 45 pixels for the right margin 35 pixels for the bottom margin 70 pixels for the left margin Syntax selector { margin: value; } Possible Values ...
Read MoreWidth and Height of Elements in CSS
To specify the height and width of an element, use the CSS height and width properties, respectively. We can also set the maximum and minimum values for these properties using the max-height, max-width, min-height, and min-width properties. Syntax selector { height: value; width: value; } Possible Values Here are the values of the height and width properties − Value Description auto The dimension is calculated by the web browser length The dimension is defined in length units (px, em, ...
Read MoreA Practical Guide to Font Styling using CSS
CSS plays a key role in font styling. The CSS font properties allow us to change the font-family, font-size, font-weight, font-kerning, and a lot more properties. The CSS font property is a shorthand for font-style, font-variant, font-weight, font-size/line-height and font-family. Further, we can apply styles to the text through text-decoration using CSS text-shadow, text-stroke, text-fill-color, color, etc. Syntax /* Individual font properties */ selector { font-family: family-name; font-size: value; font-weight: value; font-style: value; } /* Font shorthand property */ selector ...
Read MoreRemoving Dotted Line around Active Links using CSS
We can remove the default behavior of hyperlinks which is to show a dotted outline around themselves when active or focused by declaring CSS outline property on active/focused links to be none. Syntax a, a:active, a:focus { outline: none; } Example Let's see how to remove dotted line around active links with an example − Remove dotted line around links using css div { ...
Read MoreThe outline Shorthand Property in CSS
The CSS outline shorthand property is used to draw a line around an element's border. Unlike the border property, the outline does not affect the element's dimensions or layout and is drawn outside the border area. Syntax selector { outline: outline-width outline-style outline-color; } Possible Values PropertyDescriptionValues outline-widthSpecifies the thickness of the outlinethin, medium, thick, or length units (px, em, etc.) outline-styleSpecifies the line style (required)dotted, dashed, solid, double, groove, ridge, inset, outset outline-colorSpecifies the color of the outlineColor names, hex values, rgb(), etc. Example: Basic Outline ...
Read MoreThe outline-color Property in CSS
The CSS outline-color property is used to set the color of an outline around an element. Unlike borders, outlines do not take up space and are drawn outside the element's dimensions. Syntax selector { outline-color: value; } Possible Values ValueDescription color nameNamed color like red, blue, green hexHexadecimal color like #ff0000 rgb()RGB values like rgb(255, 0, 0) rgba()RGB with alpha transparency hsl()Hue, saturation, lightness values hsla()HSL with alpha transparency Note: The outline-style property must be defined before using outline-color. Example: Basic Outline Color The following ...
Read MoreStatic Positioning Using CSS
CSS static positioning is the default positioning method for HTML elements. When an element has position: static, it appears in the normal document flow and is not affected by the top, right, bottom, or left properties. Syntax selector { position: static; } Key Points Static positioning is the default value for all HTML elements Elements are positioned according to the normal document flow CSS positioning properties (top, right, bottom, left) have no effect Elements cannot be moved from their natural position Example: Basic Static Positioning The ...
Read More