It is possible with CSS to control how much vertical space exists between list elements. In this article, I will demonstrate how to control this. Here is a codepen example of a bulleted list with bullets that are styled as squares, but no control over spacing between list items: Now, to add space between the … Continue reading HTML & CSS: How to add space between list elements
HTML & CSS
HTML & CSS: How to skew an HTML entity
Looking through the available HTML entities, I found a flattened DOWN arrow that uses the code ▾ For example: ▾ However, I could not find a similar flattened UP arrow amongst the defined HTML entities, so I found this CSS technique that will turn a regular unflattened UP arrow ▴ ▴ into a flattened UP … Continue reading HTML & CSS: How to skew an HTML entity
HTML & CSS: Four different ways to expand a div to 100% width using Grid
Let’s say we set up a basic web page layout that has 5 sections: Title, Header, Sidebar, Content, and Footer. This can be easily laid out using Grid, where we have an overall container that has five child divs. For example: The HTML looks like this: Note that each div in the grid has … Continue reading HTML & CSS: Four different ways to expand a div to 100% width using Grid
HTML & CSS: How to use column-count to automatically divide text into columns
Let’s say I have a project where I want to print all numbers from 1 to 100 in a web page. For this example, I am using the the ZeroCool problem where I print “Zero” for all multiples of 3, “Cool” for all multiples of 5, and “ZeroCool” for all numbers that are a multiple … Continue reading HTML & CSS: How to use column-count to automatically divide text into columns
HTML & CSS: How to control uneven columns with Flexbox align-self
Building on the Flexbox foundation described in this previous article: HTML & CSS: How to understand the basics of Flexbox for responsive web design I am now going to describe how to control columns that may have varying amounts of data in them. Flexbox has an attribute for the child element called “align-self” which can … Continue reading HTML & CSS: How to control uneven columns with Flexbox align-self
HTML & CSS: How to understand the basics of Flexbox for responsive web design
The CSS3 Flexbox Grid system is based on the idea of a parent/child container relationship. The parent, if we call it “row” needs to have “display: flex;”. For example: /* Parent */ .row { display: flex; } The child, if we give it a class name of “col”, should have “flex: 1;”. The 1 here … Continue reading HTML & CSS: How to understand the basics of Flexbox for responsive web design
HTML: How to make a combo box using datalist
A combo box is a combination text box and select menu, rolled into one. It uses a little known HTML5 element called “datalist”, which is supported by all of the modern browsers, but was never supported by Safari or late versions of Internet Explorer. To set up an HTML5 combo box, start by creating a … Continue reading HTML: How to make a combo box using datalist
HTML & CSS: How to create a circular bio portrait between two divs
Let’s say you are creating a bio page and want to use a circular bio photo and place it between two divs with different color backgrounds on the page. For example: The technique to accomplish this is to use an outer div with a span and an inner div inside. The outer div is like … Continue reading HTML & CSS: How to create a circular bio portrait between two divs
HTML & CSS: How to change text color based on background color
Let’s say we have a progress bar with some text in it and the background is a light color. We want the font to be dark enough to contrast with the light background. Then as the progress bar or meter fills up with a darker color, we want the font color to adjust (lighter font … Continue reading HTML & CSS: How to change text color based on background color
HTML & CSS: How to set up a Bootstrap 3 modal
In this article I will show how to set up a modal using Bootstrap 3. This example looks like this at 800px width: To set up a Bootstrap 3 modal, we will need these three resources: bootstrap.min.css bootstrap.min.js jquery.min.js These can be called via CDN at the top of our HTML file. For example: <link … Continue reading HTML & CSS: How to set up a Bootstrap 3 modal