CSS hyphenate-character property allows you to specify the character that should be used as the hyphenation point when text is hyphenated using the hyphens property. When text is hyphenated, the browser will insert a hyphen character at appropriate points within words.
Syntax
hyphenate-character: auto | string | initial | inherit;
Property Values
Value
Description
auto
Suitable character is selected by the browser based on the current typography conventions. Default.
string
It specifies the character to be used at the end of line before a hyphenation break.
initial
This sets the property to its default value.
inherit
This inherits the property from the parent element.
Examples of CSS Hyphenate Character Property
The following examples explain the hyphenate-character property with different values.
Hyphenate Character Property with Auto Value
To allow the browser to use its default hyphenation character for breaking words which typically is a standard hyphen (-) or another character defined by the browsers settings for hyphenation, we use the auto value. This is shown in the following example.
To use different characters for hyphenation, we specify the character in string to the hyphenate-character property. The specified character(s) will be used as the hyphenation character when breaking words. This is shown in the following example.
CSS height property specifies the height of an element. It determines how tall an element will be, affecting its layout and positioning within the document. The property can be applied to block-level elements, inline-block elements, and replaced elements like images.
This div is having auto height.
The height of this div depends on the content.
</div></div></body></html></pre>
Height Property with Length Values
To set a fixed height to an element, we use the length units (e.g. px, em, rem etc.). The element will be having a fixed height, if the content of the element is larger than the size of the element, overflow will occur. This is shown in the following example.
This paragraph is having 40px height.
</p><p class="inner inner2">
This paragraph is having 90px height.
</p></div></body></html></pre>
Height Property with Percentage Values
To set a fixed height to an element, we use the percentage values (e.g. 10%, 20% etc.). The element's height will be relative to the height of its containing block. If the content of the element is greater than the size, overflow will occur. This is shown in the following example.
This paragraph is having 30%
height of the outer container.
</p><p class="inner inner2">
This paragraph is having 50%
height of the outer container.
</p></div></body></html></pre>
Height Property with Min Content Value
To set the element height to the minimum size required to fit its content without overflow, we use the min-content value. This ensures that the height is just enough to display the content in a single line without wrapping or truncation. This is shown in the following example.
TutorialsPoint is an online educational
platform offering a vast range of tutorials
and courses on programming, web development,
data science, and other technical subjects,
featuring detailed guides and interactive
content.
</p></div></body></html></pre>
Height Property with Max Content Value
To adjust the element height to fit the tallest content within it, we use the max-content. The height expands to accommodate the largest item or content, ensuring that no content is cut off or wrapped. This is shown in the following example.
TutorialsPoint is an online educational
platform offering a vast range of tutorials
and courses on programming, web development,
data science, and other technical subjects,
featuring detailed guides and interactive
content.
</p></div></body></html></pre>
The translate property of CSS allows you to move an element along the X-axis (horizontal), Y-axis (vertical), and Z-axis (depth).
The translate property is similar to the translate() function of the transform property. The only difference between the two is that the latter does not support the Z-axis setting.
Syntax
The syntax for the CSS translate property is as follows:
translate: x-axis y-axis z-axis | none;
Possible values
Value
Description
none
It specifies no translation should be applied.
x-axis
It specifies translation along the X-axis. If one value is specified with the translate property, then it specifies translation in the x-axis.
y-axis
It specifies translation along the Y-axis. If two values are specified with the translate property, then the first value specifies translation in the x-axis and the second value in the y-axis. To specify translation only the in y-axis, specify the first value as 0px.
z-axis
It specifies translation along the Z-axis. If three values are specified with the translate property, then the first, second, and third value specifies translation in the x-axis, y-axis, and z-axis respectively. To specify translation only in the z-axis, specify the first two values as 0px.
You can use either <length> or <percentage> to specify the value of the translate property.
Applies to
All the transformable elements.
CSS translate Property with none Value
To specify that there should not be any translation effect on any axis, we use the translate property with none value.
Example
The following example sets the translate property to none which disables the translation effect on the div box.
You can use a single value with the translate property to move an element on the horizontal axis. You can either use length or percentage value for this.
Example
In this example, we have used a positive length value on the first box and a negative percentage value on the second box with the translate property. The first box will move to the right and the second box will move to the left on the x-axis.
To translate an element on the y-axis, you need to use a double value with the translate property while setting the first value to 0.
Example
In this example, we have used a positive length value on the first box and a negative percentage value on the second box with the translate property. The first box will move downwards and the second box will move upwards on the y-axis.
To translate an element on the z-axis, you need to use a triple value with the translate property while setting the first two values to 0.
Example
In this example, we have used a positive and negative length value on the first box and second box respectively with the translate property. The first box will appear to move closer to the screen while the second box will move away from the screen.
You can translate an element on both the x and y axes by using a double value with the translate property.
Example
In this example, we have used two values with the translate property. The first and second value moves the box in horizontal and vertical directions respectively.
To translate an element in all directions, you can use three values with the translate property.
Example
In this example, we have used three values with the translate property. The first, second, and third value moves the box horizontally, vertically, and in the z-axis respectively.
CSS zoom property is used to control the magnification level of HTML elements. The zoom property is a non-standard property of CSS and it is advisable to use the scale() function with the transform property to achieve the same output.
Syntax
The syntax for the CSS zoom property is as follows:
zoom: normal | percentage | number;
Possible Values
Value
Description
normal
It specifies that the element should be rendered at its normal size.
<percentage>
It specifies the zoom factor in percent value. A value equal to 100% specifies normal size. The value less than 100% specifies zoom-out, and the value more than 100% specifies zoom-in.
<number>
It specifies the zoom factor in the number value. A value equal to 1.0 specifies normal size. The value less than 1.0 specifies zoom-out, and the value more than 1.0 specifies zoom-in.
Applies to
The zoom property can be applied to all the HTML elements.
CSS zoom Property with normal Value
The normal is the default value of the zoom property. The element appears at its regular size with zoom:normal.
Example
In this example, we have used the default value(normal) of the zoom property.
<html><style>
.normal {
zoom: normal;
}
</style><head></head><body><h2>CSS zoom Property</h2><p class="normal">CSS zoom with normal value.</p></body></html>
CSS zoom Property with percent Value
You can use the zoom property with percent value to add a zoom-in or zoom-out effect to any element.
Example
In this example, we have used the percentage value > 100% to create a zoom-in effect on a div box upon hovering over it.
CSS focus effects are used to make form elements like input fields, buttons, and links more dynamic and engaging for users interacting with the webpage.
The :focus pseudo-class in CSS is used to target an element when it receives focus (by clicking on it or by pressing tab). Its purpose is to apply styles or trigger specific behaviors to enhance the user experience or provide additional visual feedback.
Focus on me!
The :focus is a tool to make interactive elements more dynamic and engaging, especially when users navigate using the keyboard.
Table of Contents
What is Focus Pseudo-Class?
CSS Focus Effect on Input Field
CSS Button With Focus Effect
CSS Border With Focus Effect
CSS Box-Shadow With Focus Effect
CSS Styling on Focusing
What is Focus Pseudo-Class?
In CSS, the pseudo-class :focus is a type of selector used to target and style an element when it gains focus, usually through keyboard navigation or mouse interaction.
Focus effects are mostly used with interactive elements like form fields, buttons, etc., to provide users a clear indication of the focused element.
Focus effects are useful to add a dynamic and engaging look to a website and improve accessibility.
CSS Focus Effect on Input Field
Here is an example of styling input fields when they receive focus:
The following example illustrates the use of the contents value. In this example, the .child element behaves as direct child of .parent element bypassing the .wrapper element.
To set an element to be a flex container making its children (flex items) layout in a flexible and responsive way, we use the flex value. The container uses the Flexbox layout model, which allows for easy alignment, distribution, and ordering of items along a single axis. This is shown in the following example.
To set an element to be a grid container which uses the grid layout model, allowing for the creation of two-dimensional layouts with rows and columns, we use the grid value. Grid items can be placed and sized explicitly or automatically across the grid. This is shown in the following example.
To make an element behave like an inline-level element (allowing it to flow with text and other inline content) while retaining block-level properties such as width and height, we use the inline-block value. This is shown in the following example.
To set an element to be an inline-level flex container making the container behaves like an inline element, flowing with surrounding text or inline elements, while still applying Flexbox layout rules to its children, we use the inline-flex property. This is shown in the following example.
To set an element to be an inline-level grid container such that it behaves like an inline element (flowing with text and other inline content) while using the grid layout model to arrange its children, we use the inline-grid value. This is shown in the following example.
To make an element behave as a block-level element or an inline-level element depending on the context, we use the run-in value. It is intended to allow an element to "run in" with surrounding text or other elements. This is shown in the following example.
Run-In Element
</div><p>
This paragraph follows the run-in element. Depending on
the browser support, the run-in element might appear
as a block or inline element here.
</p></div></body></html></pre>
CSS display Property with list-item Value
The following example illustrates the use of list-item value on div elements making them appear as bulleted list.
To create table-like layouts with CSS without using HTML table elements, we can use different displays for the table. In the following example, some values table, table-row, table-cell and table-caption have been used.
table: creates a container that behaves like a <table>,
table-cell: styles elements like <td> cells,
table-row: defines elements as rows like <tr>,
table-caption: functions like a <caption> element, positioning captions for the table.
CSS hover effects are used to make interactive elements such as buttons and links more interactive. The :hover pseudo-class in CSS is used to target an element when the user hovers over it with the mouse cursor. Its purpose is to apply styles to improve the user experience.
The :hover property can be used in various scenarios such as to change the button color when we hover it, adjust the size of div boxes, or show the hidden content.
Hover over me!
What is Hover Pseudo-Class?
In CSS, the pseudo-class :hover is a type of selector used to target and style an element when a user moves the mouse pointer over the element.
Hover effects are mostly used with interactive elements like buttons, links, etc to provide the user with a dynamic experience.
Hover effects are useful to add a dynamic and engaging look to a website.
Background Change on Hover CSS
You can use the :hover property to change the background of any element by hovering over it.
Example
In this example, we have used the background-color property with :hover pseudo class to change the background color of the div container when hovered over it.
You can style a button by hovering over it to make the web page more interactive. You can add transformation properties, transition, animation, and many more to a button while hovering over it.
Example
In this example, we have used the text-transform property to the button that scales the size of the button using the scale() function on hovering over it.
To set a border with the hover effect, we use the border property with :hover property. You can set the border properties such as color, width, style, and radius of the border.
Example
In this example, we have added a border to the div element when we hover the div element.
You can add glowing effects to HTML elements using CSS properties such as linear-gradient, background-color, animation, and many more. Here is an example of how you can add the glowing effect to a button.
Example
In this example, we have used the linear-gradient function with :hover property to add a glowing effect to the button when we hover over it.
The CSS hyphens property controls how words are broken into lines when text is too long to fit on a single line. It improves the readability of text that wraps across multiple lines. The property only applies to block-level elements.
Syntax
The syntax for the hyphens property is as follows:
hyphens: none | manual | auto | initial | inherit;
Property Values
Value
Description
none
It disables the hyphenation.
manual
It is the default value that specifies manual hyphenation behavior for text at &hyphen or ­.
auto
It allows hyphenation at appropriate hyphenation points, as determined by the browser.
initial
This sets the property to its default value.
inherit
This inherits the property from the parent element.
Prevent Hyphenation with hyphens: none in CSS
To prevent the hyphenation of words, we use the none value. The words will not be broken into lines, even if they are too long to fit on a single line.
Example
In this example, we have used hyphens: none; to prevent automatic hyphenation of words.
This is a muchmuchmuch larger building.
</p></div></body></html></pre>
Automatic Hyphenation with hyphens:auto in CSS
To let the browser automatically hyphenate words at points that are considered to be appropriate, according to the language's hyphenation rules, we use the auto value.
CSS position property specifies the position of an element in a web page. CSS properties such as top, bottom, right, and left are used to control the exact position of an element in the web page.
The position property can be used to create floating elements, a floating sidebar, and other interactive features.
Syntax
The syntax for the CSS position property is as follows:
It is the default value where the element is positioned according to the normal flow of the page. So, if we set left/right/top/bottom/z-index, then there will be no effect on that element.
relative
The element’s original position is according to the normal flow of the page just like static value. But now the left/right/top/bottom/z-index will work.
absolute
The element is completely removed from the document flow. It is then positioned with respect to its nearest positioned ancestor element. The positioned element should be any value except static.
fixed
The element’s fixed positioning is just like absolute positioning, except the containing block of a fixed element is always the viewport. Here the element is totally removed from the document’s flow and does not have a position relative to any part of the document.
sticky
The element sticks to the top of its nearest positioned ancestor that has a “scrolling mechanism”. It behaves as relative till it reaches the scrolling position, then behaves as fixed.
Applies To
The position property can be applied to all elements.
CSS position Property with static Value
The position property for the div element in this example is set to static. The left, right, top, and bottom properties will have no effect on the div element.
Example
The following example sets the position property of the div element to static.
}
</style></head><body><div class="container"><h2>Normal Box</h2><p>This is a normal box.</p></div><div class="box"><h2>Position: static</h2><p>This is a box with static position.</p></div></body></html>
CSS position Property with relative Value
The following example sets the position property of the div element to relative. This allows you to set the top, bottom, left, and right positioning of the div element.
Example
In this example, we have used position: relative; to set the positioning of the child element to relative.
}
</style></head><body><div class="container"><h2>Normal Box</h2><p>This is a Normal box.</p><div class="box"><h2>Position: Absolute</h2><p>This is a box with absolute position.</p></div></div></body></html>
CSS position Property with absolute Value
You can use absolute value to set the position of an element relative to its nearest ancestor element.
Example
In this example, we have used position: absolute; to position the child element relative to its nearest positioned container.
}
</style></head><body><div class="container"><h2>Normal Box</h2><p>This is a Normal box.</p><div class="box"><h2>Position: Absolute</h2><p>This is a box with absolute position.</p></div></div></body></html>
CSS position Property with fixed Value
To make an element stay in the same place on the screen even when the user scrolls, you can set the position property to fixed. You can then use the left, right, top, and bottom properties to position the element where you want it.
Example
In this example, we have used position: fixed; to create a fixed position of paragraph on the div.
}
</style></head><body><div class="container"><p>This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.</p><p class="box">Tutorials point CSS Position Fixed</p><p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p></div></body></html>
CSS position Property with sticky Value
You can set the position property to sticky to create an element that sticks to the top of the viewport when the user scrolls through a page. It is a combination of the position: relative and position: fixed properties.
Example
In this example, we have applied position: sticky; on a paragraph element that scrolls until a specified position then sticks at one place.
}
</style></head><body><div class="container"><p>This CSS tutorial covers everything from basic styling concepts and selectors to advanced techniques, such as flexbox, grid, animations, and CSS variables. This CSS tutorial is designed to help both beginners and experienced designers to make them masters in creating visually appealing, responsive, and modern web designs.</p><p class="box">Tutorials point CSS Position Sticky</p><p>CSS is the acronym for "Cascading Style Sheet". It's a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS helps the web developers to control the layout and other visual aspects of the web pages. CSS plays a crucial role in modern web development by providing the tools necessary to create visually appealing, accessible, and responsive websites.</p><p>Each version of CSS builds upon the previous ones, adding new features and refining existing capabilities to meet the evolving needs of web developers and designers. CSS is referred as just CSS now, without a version number.</p></div></body></html>
Positioning Text In an Image Using CSS
To position the text in different directions, you can use the position: absolute property.
Example
In this example, we have used the absolute value to position the text elements in different directions on the image. The text elements are positioned at the center, top left, top right, bottom left, and bottom right corners.
}
</style></head><body><div class="container"><img src="/css/images/pink-flower.jpg" alt="Pink flower" width="1000px" height="350px"><h3 class="center">Text at Centered</h3><h3 class="top-left">Text at Top Left</h3><h3 class="top-right">Text at Top Right</h3><h3 class="bottom-left">Text at Bottom Left</h3><h3 class="bottom-right">Text at Bottom Right</h3></div></body></html>
CSS Position – Related Properties
Following is the list of all the CSS properties related to the position:
Property
Description
bottom
Used with the position property to place the bottom edge of an element.
clip
Sets the clipping mask for an element.
left
Used with the position property to place the left edge of an element.
overflow
Determines how overflow content is rendered.
position
Sets the positioning model for an element.
right
Used with the position property to place the right edge of an element.
CSS order property is used to specify the order in which flex items appear within a flex container. The order of the flex items is determined by the values of their order property. The flex items with the lower order value will be displayed first.
Syntax
order: number | initial | inherit;
Property Values
Value
Description
number
Order of flex items is specified using numeric values – positive or negative values. With positive values, the element with smaller positive value appears first. With negative values, the element with larger negative value appears first.
initial
It sets the property to its default value.
inherit
It inherits the property from the parent element.
Examples of CSS Order Property
The following examples explain the order property with different elements.
Order Property with Positive Numeric Values
The order of the flex-items can be set by specifying positive numeric values to the order property. With positive values, the element will smaller value appears first. This is shown in the following example.
order: 2-4-1-3 (first element- second position,
second element- fourth position, third element-
first position, fourth element- third position)
</h4><div class="container"><div class="box1">
One
</div><div class="box2">
Two
</div><div class="box3">
Three
</div><div class="box4">
Four
</div></div></body></html></pre>
Order Property with Negative Numeric Values
The order of the flex-items can be set by specifying negative numeric values to the order property. With negative values, the element will larger value appears first. This is shown in the following example.
order: -2 / -1 / -3 / -4 (first element- third position,
second element- fourth position, third element- second
position, fourth element- first position)
</h4><div class="container"><div class="box1">
One
</div><div class="box2">
Two
</div><div class="box3">
Three
</div><div class="box4">
Four
</div></div></body></html></pre>
Order Property with Images
The order property can also be used with images as flex-items. The positions of the images depend on the values provided - positive or negative. This is shown in the following example.