CSS User Interface
Two CSS user interface properties are covered in this chapter:
resizeoutline-offset
CSS Resize
Whether users can resize an element, and along which direction, depends on the resize property.
You can give it any one of these values:
horizontal— only the width can be changed by the uservertical— only the height can be changed by the userboth— width and height can both be changed by the usernone— the element stays at its size, with no resizing allowed
Resize only width
Only the width of this <div> element can be resized by the user.
Prompt
Create a page with a div element that the user can resize only horizontally (width). The div should have a border, some padding, and sample text. Use the CSS resize property set to horizontal with overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Horizontal</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: horizontal;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Horizontal</h1>
<div>
<p>You can resize this div element horizontally. Click and drag the bottom-right corner to change the width.</p>
</div>
</body>
</html>
Resize only height
Only the height of this <div> element can be resized by the user.
Prompt
Create a page with a div element that the user can resize only vertically (height). The div should have a border, some padding, and sample text. Use the CSS resize property set to vertical with overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Vertical</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: vertical;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Vertical</h1>
<div>
<p>You can resize this div element vertically. Click and drag the bottom-right corner to change the height.</p>
</div>
</body>
</html>
Resize both width and height
The user is free to resize this <div> element in width and in height alike.
Prompt
Create a page with a div element that the user can resize both horizontally and vertically. The div should have a border, some padding, and sample text. Use the CSS resize property set to both with overflow auto.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Resize Both</title>
<style>
div {
border: 2px solid black;
padding: 20px;
width: 300px;
resize: both;
overflow: auto;
}
</style>
</head>
<body>
<h1>CSS Resize - Both</h1>
<div>
<p>You can resize this div element both horizontally and vertically. Click and drag the bottom-right corner.</p>
</div>
</body>
</html>
Disable resize in textarea
Browsers usually make a <textarea> resizable by default, and the resize property can switch that off.
Prompt
Create a page with a textarea element that has its default resizability disabled using the CSS resize property set to none. Include a label for the textarea.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Disable Textarea Resize</title>
<style>
textarea {
resize: none;
width: 300px;
height: 100px;
}
</style>
</head>
<body>
<h1>Disable Resize in Textarea</h1>
<label for="myTextarea">This textarea cannot be resized:</label><br>
<textarea id="myTextarea">This textarea has resize set to none. You cannot resize it.</textarea>
</body>
</html>
CSS Outline Offset
outline-offset puts a transparent gap between an outline and the edge or border of an element.
Note: Outlines and borders differ. An outline sits outside the border, may overlap other content, and does not count toward the element's size, so its total width and height stay the same.
Example
Here outline-offset opens up a gap between the border and the outline.
Prompt
Create a page with two div elements demonstrating the outline-offset property. The first div has a 1px solid black border, a 4px solid red outline, and an outline-offset of 15px. The second div has a 1px solid black border, a 5px dashed blue outline, and an outline-offset of 5px. Both have margins and some text content.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Outline Offset</title>
<style>
div.ex1 {
margin: 20px;
border: 1px solid black;
outline: 4px solid red;
outline-offset: 15px;
padding: 10px;
}
div.ex2 {
margin: 10px;
border: 1px solid black;
outline: 5px dashed blue;
outline-offset: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Outline Offset</h1>
<div class="ex1">This div has a 15px outline offset with a solid red outline.</div>
<br>
<div class="ex2">This div has a 5px outline offset with a dashed blue outline.</div>
</body>
</html>