This example applies a solid 3‑pixel green outline with a 5‑pixel offset from the button’s border.
In this example we applied a complete set of styles:
.button: Applies a solid 2‑pixel red outline around the button.
.button-dashed: Applies a 3‑pixel blue dashed outline around the button.
.button-offset: Applies a solid 3‑pixel green outline with a 5‑pixel offset around the button.
.input-focus: Applies a solid 5‑pixel blue outline with a 5‑pixel offset. When clicked, the border color changes to orange, with a thickness of 5px and offset 5px from the input. Clicking outside returns it to its original color.
This text is left aligned.
This text is right aligned.
This text is centered.
This text is justified. Justification ensures that the text aligns evenly on both sides, adding extra space between words as needed. This can make text blocks look more orderly and aligned.
The text-align property is used to set the horizontal alignment of text.
Text can be aligned left, right, centered, or justified.
The example shows the aligned texts with a 20px space between the div containers.
Left alignment is the default if the text direction is left‑to‑right, and right alignment is the default if the text direction is right‑to‑left.
Styles applied to links and the effects they create
When focusing on the first link, the text changes to orange and a dotted outline appears around the link box.
In the second link, when focused, the text changes to brown and becomes bold. When clicked, a red outline appears and the text changes to a greenish tone with italic letters.
In the third link, when hovering, the text becomes underlined. When clicked, the text changes to orange and dotted black lines appear around the button.
Link Style 1General Styles: A set of general styles is applied to all links to ensure smooth transitions and no default underline.
Specific Classes: Specific classes (.link-style1, .link-style2, .link-style3) are defined to apply different styles to links in their various states (:visited, :hover, :active, :focus).
Transitions: Smooth transitions for color and text decoration improve user experience.
Outline: Using outline for the :focus state helps improve accessibility by clearly indicating which link is focused.
| Column 1 | Column 2 |
|---|---|
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
| Row 3, Column 1 | Row 3, Column 2 |
This code creates a styled table with borders, alternating row background colors, and a highlight effect when hovering over the rows.
| Column 1 | Column 2 |
|---|---|
| Row 1, Column 1 | Row 1, Column 2 |
| Row 2, Column 1 | Row 2, Column 2 |
| Row 3, Column 1 | Row 3, Column 2 |
| Row 4, Column 1 | Row 4, Column 2 |
In this example, the table includes horizontal dividers, header background color, a bottom underline for each row, alternating row highlights on hover, and a zebra‑striped effect. The colors are intense to highlight the functionality of the code.
background-color: #f0f0f0;: Sets the dropdown background color to green.
You can adjust the hexadecimal value (#f0f0f0) to obtain a lighter or darker shade of green depending on your preferences.
padding: 10px;: Adds padding around the dropdown content, creating space between the border and the text. You can adjust the value (10px) to increase or decrease the padding.
border-radius: 5px;: Applies rounded corners to the dropdown, giving it a softer and more modern look. You can adjust the value (5px) for more or less rounded corners.
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2) Creates a shadow around the link box.
CSS selectors provide great flexibility and precision for applying styles to HTML elements. By using different types of selectors, you can design complex and specific layouts that respond to various design and functionality needs on a web page.
The CSS property determines the stacking order of positioned elements (those with position set to absolute, relative, fixed, or sticky) on a web page.
In this example, it shows how containers 1, 2, and 3 overlap using the z-index property.
Below are the CSS styles applied to the previous containers where we define the stacking order using the z-index property:
.bloque-z { position: relative; width: 200px; height: 200px; }
.box-z-1 { background-color: red; top: 20px; left: 20px; position: absolute; width: 100px;
height: 100px; color: white; text-align: center; line-height: 100px; z-index: 2; }
.box-z-2 { background-color:rgb(0, 128, 0, 0.6); top:80px; left:80px; position:absolute; width:100px;
height: 100px; color: white; text-align:center; line-height:100px; z-index:4; }
.box-z-3 { background-color: rgb(0, 0, 255,0.5); top: 160px; left: 160px; position: absolute; width: 100px;
height: 100px; color: white; text-align: center; line-height: 100px; z-index: 3; }
In this example, Box 1 will be at the back.
Box 3 in front of Box 1,
and finally Box 2, which will be in front of both Box 1 and Box 3.