Web Development Book (26) PDF

LISTS, TABLES AND FORMS Some CSS properties are designed specifically for certain HTML elements like lists, tables, and forms. LIST STYLES The list-style-type property sets the marker (e.g. disc) of a list item element in a ordered or unordered list. list-style-type: none;...

LISTS, TABLES AND FORMS Some CSS properties are designed specifically for certain HTML elements like lists, tables, and forms. LIST STYLES The list-style-type property sets the marker (e.g. disc) of a list item element in a ordered or unordered list. list-style-type: none; Item list-style-type: disc; Item unordered lists list-style-type: circle; Item list-style-type: square; Item list-style-type: decimal; 1. Item list-style-type: decimal-leading-zero; 01. Item list-style-type: lower-alpha; a. Item ordered lists list-style-type: upper-alpha; A. Item list-style-type: lower-roman; i. Item list-style-type: upper-roman; I. Item RRR list-style-type: “\1F44D”; 👍 Item Unicode escape sequence which lets you use special characters, like emojis, in CSS You can even specify an image to act as a bullet point for or using the list-style-image property: list-style-image: url(‘images/star.png’); HTML Bucket List Drink one million beer Climb the Zugspitze Visit Los Angeles CSS ul { list-style-image: url(“images/star.png”); } li { margin: 5px 0px 0px 0px } LLL Result POSITIONING THE MARKER The list-style-position property specifies the position of the list-item markers (bullet points). HTML Item One - The bullet aligns with the text. Item Two - Useful for tight layouts. Item One - The bullet stays outside the text block. Item Two - More spacing between bullets and text. RRR CSS.inside { list-style-position: inside; }.outside { list-style-position: outside; } Result LIST SHORTHAND The list-style shorthand property allows you to set all the list style properties at once. HTML SpaceX’s goals by 2026 Launch Starship rocket on uncrewed flights to Mars Keep growing the internet from space with Starlink. LLL CSS ul { list-style: inside circle; width: 200px; } li { margin: 10px 0px 0px 0px; } Result RRR STYLING TABLES Tables in HTML can be styled in many ways using CSS to make them more readable and visually appealing. We could add borders around a table: HTML Firstname Lastname Peter Griffin John Pork CSS table, th, td { border: 1px solid black; } Result Double border, because , and each have their own borders LLL To remove these double borders, use the border-collapse property which collapes borders down into one: CSS table { border-collapse: collapse; } table, th, td { border: 1px solid black; } Result Let’s add a “Networth” column and style everything: CSS body { font-family: Arial, sans-serif; } table { border-collapse: collapse; width: 100%; } RRR  th, td { text-align: left; padding: 8px; } th { background-color: #0080FE; color: white; } Result For zebra-striped tables, use the nth-child selector and add a background-color to all even (or odd ) table rows: CSS tr:nth-child(even) { background-color: #f2f2f2; } LLL Result STYLING FORMS Making forms attractive and easy to use encourages more people to complete them. That’s why we have to learn modern CSS design and the best practices. TEXT INPUTS Following example shows the CSS properties commonly used with text inputs, most of them you have already met. HTML In this case, we don’t want to have a label for the input, instead we will just use a placeholder. But we want to keep our website accessable even for visually impaired users. The aria-label attribute adds an invisible label for screen readers, ensuring accessibility for all users. RRR CSS input[type=text] { width: 100%; border: 2px solid #ccc; border-radius: 10px; outline: none; font-size: 16px; background-color: white; background-image: url('icons/search.svg'); background-position: 10px 10px; background-repeat: no-repeat; padding: 12px 20px 12px 40px; } input[type=text]:focus { border: 2px solid #999 } Result For vector graphics like icons, Font Awesome and Boxicons are excellent resources. They offer many SVG icons for modern web designs, without any cost. LLL STYLING BUTTONS Following example shows the CSS properties commonly used with buttons: HTML Sign up CSS.btn { margin: 10px; padding: 20px; text-align: center; background: linear-gradient(to right, #f6d365 0%, #fda085 51%, #f6d365 100%); background-size: 200% auto; color: white; box-shadow: 0 0 20px #eee; border-radius: 10px; border: none; }.btn:hover { background-position: right; } Result RRR STYLING TEXTAREA Here’s a example of how you can style textareas and make them have a minimum height when resizing: disables spellchecking HTML CSS textarea { width: 100%; max-width: 400px; min-height: 50px; resize: vertical; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } textarea:focus { outline: none; border-color: #007BFF; } LLL STYLING DROPDOWNs Styling a element can be tricky. Browsers handle elements differently, and they don’t offer much flexibility for customizing the dropdown or its options. We can still make it look quite nice: HTML Placeholder option, Select an option... selected by default Option 1 Option 2 Option 3 CSS.custom-select { padding: 8px 16px; border: 1px solid #ccc; border-radius: 6px; background-color: white; color: #333; cursor: pointer; } RRR.custom-select:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } Result placeholder option cannot be selected CURSOR STYLES The cursor property is used to control the type of mouse cursor that appears when hovering over an element. It shows how the element can be interacted with. cursor: default; cursor: pointer; cursor: not-allowed; cursor: help; ? cursor: wait; cursor: grab; LLL  POSITIONING ELEMENTS It's common to group multiple elements inside a or another block-level element. For example, you might group elements like the logo and main navigation into a single header section. The element that holds this group of elements is called the containing element. In the following structure the is the containing element for three elements (header, content, footer) Logo News Blog Contact Footer RRR So far, elements are placed on the page based on the flow of the document. The position property lets you move elements around, lock them in place, or make them float over others. NORMAL FLOW In normal flow, block-level elements stack vertically, one after the other. This is the default behavior in browsers, so no CSS is needed to make elements appear in normal flow, but the syntax would be: position: static; HTML This box uses position: static; This box also uses position: static; CSS.box { position: static; width: 200px; height: 100px; background-color: blue; color: white; margin: 10px; LLL } Result This box uses position: static; elements are positioned in the normal flow, one This box also uses below the other position: static; RELATIVE POSITIONING Relative positioning moves an element in relation to where it would have been in normal flow. The element still occupies space in the document flow, but you can adjust its position using the top, right, bottom, left properties. position: relative; HTML This is the first paragraph. This is the second paragraph. This is the third paragraph. RRR  CSS.second { position: relative; top: 30px; left: 20px; } Result This is the first paragraph. This is the second paragraph. This is the third paragraph. ABSOLUTE POSITIONING When the position property is set to absolute, the element is taken out from the normal flow and does not affect the layout of other elements. The box offset properties (top, bottom, left, right) position the element should appear in relation to its nearest ancestor (an element with a position other than static). If no such ancestor exists, the element will be positioned relative to the. LLL HTML CSS.container { width: 500px; height: 300px; background-color: lightgray; position: relative; }.box { width: 150px; height: 100px; background-color: coral; position: absolute; top: 150px; right: 30px; } Result RRR Without setting the position relative on the container, the box would be absolute positioned in relation to the body: Result 150px 30px We could also put the orange box in the bottom right corner: CSS.box { position: absolute; bottom: 0; right: 0;... } Result LLL Positioning elements can also be done with the % unit: CSS.box { position: absolute; top: 100%; left: 100%;... } Result 100% represents top: 100% of the width 100% or height of the containing element left: 100% Let’s try to position the box in the center of the container: CSS.box { position: absolute; top: 50%; left: 50%;... } RRR Result this only places the element's top-left corner at the center of its containing element. To truly center the element, you'll need to pull the box back by half of its width and height. This can be done with the transform: translate(-50%, -50%) declaration, it shifts the element up and left by 50% of its dimensions CSS.box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);... } Result LLL FIXED POSITIONING An element with the position set to fixed is positioned relative to the viewport (browser window), which means it always stays in the same place even if the page is scrolled. You can use offset properties to control where the element appears on the screen. This makes it useful for things like navigation bars. HTML I stay here Some long text, from a Lorem Ipsum Generator... CSS.fixed-box { position: fixed; top: 20px; right: 20px; background-color: orange; color: white; padding: 10px 20px; } RRR Result Lorem ipsum dolor sit amet, I stay here The box will stay consetetur sadipscing elitr, sed diam nonumy eirmod tempor where it is even invidunt ut labore et dolore magna when you scroll aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo down. dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus If any of the closest ancestors has transform, perspective or filter property set, then the closest ancestor becomes the containing block STICKY POSITIONING An element with the position set to sticky is positioned based on the user's scroll. It behaves like a relatively positioned element until a specified scroll threshold is reached, at which point it "sticks" like a fixed element. On the next page we will create a glossary of web dev terms organized alphabetically. When the page scrolls, the will "stick" to the top of the viewport until the next element comes into view or the parent container’s bottom is reached. LLL HTML CSS dt { A background: #333; API color: #fff; AJAX padding: 6px 0 6px 12px; position: sticky; C top: 0;... } dd { Result margin: 0; padding: 10px 0 10px 12px; border-top: 1px solid #ccc; } Scroll Once a new reaches the top, it takes over the sticky position, pushing the previous out of view RRR OVERLAPPING ELEMENTS When using relative, fixed, or absolute positioning, elements can overlap. elements that appear later in the HTML will be stacked on top of those that appear earlier. To control which element appears on top, you can use the z-index property. Its value is a number, and the higher the number the closer that element is to the front. HTML CSS.box {.box2 { width: 100px; z-index: 3; height: 100px; left: 100px; position: absolute; } top: 100px; background-color: green; }.box1 { z-index: 1;.box3 { left: 50px; z-index: 2; top: 50px; left: 150px; background-color: red; } top: 150px; background-color: blue; } LLL Result Box 2 (green) has the highest z-index so it will appear on top of the other two boxes z-index can be negative and only works on positioned elements (position: absolute, relative, fixed, or sticky) and flex items (explained later on) RRR  FLEXBOX The flexible box layout (flexbox) provides an easy method for arranging, aligning, and distributing space among items within a container. Flexbox is a whole module with many properties. Some of them are set on the container (flex container), while others are used on the children ( flex items). Flexbox deals in one dimension at a time, either as a row or as a column. We also need to think in terms of two axes: the main axis and the cross axis. The main axis is determined by the flex-direction property and defines the direction in which the flex items are placed in, while the cross axis runs perpendicular to it. The flex-direction property has four possible values: row main axis (default) 1 2 3 item item item LLL container cross axis  row-reverse main axis 3 2 1 cross axis column column-reverse main axis 1 3 cross axis 2 cross axis 2 3 1 main axis Choose row or row-reverse and your main axis will run along the row in the inline direction. Choose column or column-reverse and your main axis will run in the block direction. RRR To create a flex container, set the element’s display property to flex (container becomes a block element) or inline-flex (container becomes an inline element). HTML you can also put text One directly in the div element Two Three with a bit moretext CSS.box { border: 2px dotted black; display: flex; }.box > div { border: 2px solid orange; border-radius: 5px; background-color: yellow; } LLL  main axis cross axis The box will behave in the following way: Items display in a row (flex-direction is row by default) Items start from the start edge of the main axis Items do not stretch on the main axis but can shrink, this is because the flex-item’s flex-grow property is set to 0 and the flex-shrink property is set to 1 by default Items will stretch to fill the size of the cross-axis (align-items container property’s default is stretch) All Items will be in a single row, even if they have to overflow the container’s dimensions (the flex-wrap property's default value is nowrap) Let’s reverse the flex row direction: CSS.box { display: flex; flex-direction: row-reverse;... } RRR Or we could change the direction to column: CSS.box { display: flex; flex-direction: column; height: 200px; border: 2px dotted black; } cross axis main axis LLL MULTI-line flex containers The flex-wrap property makes it possible to wrap flex items across multiple lines. Possible values: nowrap the default. The items will stay on one line and shrink to fit the container. If they can't shrink enough, an overflow will occur. wrap items will wrap onto multiple lines, from top to bottom wrap-reverse items will wrap onto multiple lines, from bottom to top HTML One Two Three CSS.box { display: flex; flex-wrap: wrap; height: 150px; width: 300px; border: 2px dashed black; } RRR.box > div { border: 2px solid orange; border-radius: 5px; width: 120px; background-color: yellow; } LLL FLEX-BASIS The flex-basis property defines the initial size of an element before any extra space in the container is divided among the items. For example, three 100 pixel-wide items in a container which is 500 pixels wide, would leave 200 pixels of available space. Container width = 500px 1 2 3 Available space = 200px The flex-basis value can be a length (e.g. 69%, 5rem, etc.) or a keyword. The auto keyword (default value) is equal to the width of the flexible item or if not set, it’s content..item:nth-of-type(1) { flex-basis: auto; } Item One Item Two Item Three RRR.item:nth-of-type(1) { flex-basis: 0; } Item Item Two Item Three One.item:nth-of-type(1) { flex-basis: 200px; } Item Item Item One Two Three Let’s create an example in which we set the default size of the flex items to 50 pixels, except for the second item, which is set to 100 pixels: HTML 50px 100px 50px 50px 50px LLL CSS #demo { width: 300px; height: 100px; display: flex; } #demo div { flex-basis: 50px; } #demo div:nth-of-type(2) { flex-grow: 100px; } Result RRR FLEX-GROW The flex-grow property defines the ability for a flex item to grow. It accepts a unitless value that serves as a proportion, to what amount of the available space inside the flex container the item should take up. If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children. If one child has the value of 2, it would take up twice as much of the space as either one of the others. Let’s take the HTML from last example and modify the CSS: CSS #demo { width: 300px; height: 100px; display: flex; } #demo div { flex-grow: 1; } #demo div:nth-of-type(2) { flex-grow: 3; } Result LLL FLEX-SHRINK When the container lacks sufficient space, the flex-shrink property determines how much an item will reduce in size. It accepts a unitless value that serves as a proportion, determining how much the item should shrink relative to the other items in the container when space is tight. Let’s create a example where each flex item is 200px wide, making their total width 1000px — double the container's size. With flex-shrink set above 0, all items shrink to fit. The last two items shrink more due to higher flex-shrink values: CSS #demo { width: 300px; #demo div:nth-of-type(4) { display: flex; } flex-shrink: 1.5; } #demo div { #demo div:nth-of-type(5) { width: 200px; flex-shrink: 2; flex-shrink: 1; } padding: 10px 5px; } Result RRR FLEX SHORTHANDS flex-flow is a shorthand for the flex-direction and flex- wrap properties. The default value is row nowrap..container { flex-flow: column wrap; } flex is the shorthand for flex-grow, flex-shrink and flex- basis combined. The flex-shrink and flex-basis parameters are optional. The default is “0 1 auto”..item {.item { same as flex-grow: 5; flex: 5; flex-shrink: 1; } flex-basis: 0; } LLL ALIGNING, JUSTIFYING and spacing Flexbox allows you to align and justify items along the main and cross axes and distribute space between them. ALIGNING ON THE MAIN AXIS With justify-content we can define the alignment along the main axis. It also helps distribute extra free space. The property accepts the following values: flex-start flex-end center space-between RRR space-around space-evenly ALIGNING ON THE CROSS AXIS With align-items we can define how flex items are laid out along the cross axis (perpendicular to the main-axis). The property accepts the following values: flex-start flex-end LLL center stretch baseline some text some text some text some text (the text or content inside each flex item will line up as if they are part of the same line of text) RRR ALIGNING MULTIPLE FLEX LINES The align-content property aligns a flex container’s lines within when there is extra space in the cross-axis. The property accepts the following values: flex-start flex-end center stretch LLL space-between space-around ALIGN INDIVIDUAL FLEX ITEMS With align-self we can override the align-items alignment for specific flex items individually. align-items: flex-start align-self: flex-end If you are wondering if there is a flexbox justify-self property, there isn’t one. Flexbox alignment is only controlled at the container level using justify-items. RRR ADDING SPACE BETWEEN ITEMS The gap property controls the space between flex items. It applies that spacing only between items not on the outer edges (use padding for this purpose)..container { gap: 10px; }.container { gap: 10px 30px; }.container { row-gap: 10px; column-gap: 30px; } LLL ARRANGING ORDER OF FLEX ITEMS By default, flex items are laid out in the source order. However, the order property controls the order in which they appear in the flex container. The higher the value, the later it appears in the flex container's visual order..item { order: 5; } -1 1 1 2 3 5 1 2 2 5 RRR