Bootstrap supports text alignment within the html. By adding references to the relevant bootstrap css classes the text within a div maybe aligned: left; right; centred or justified according to CSS. Ids and classes assigned to the relevant parts. Why not make use of the Bootstrap support for the alignment of text? Adding the relevant […]
Category: CSS
Using CSS Calculated Width to add a Fixed Width Object
Implementing a CSS calculated width to permit the incorporation of a fixed width object with a percentage variable section. As an example I was working on a design with a banner stretching across the page with a graphic flourish at the end. The banner was to be used for the page title, icon based links […]
Read More… from Using CSS Calculated Width to add a Fixed Width Object
Using a Counter in CSS
CSS supports the use of a counter which can be used as the content in the before and after pseudo elements. The counter can be used in both ordered and unordered lists. And with Divs. and a number of other HTML elements. Obvious purpose is a table of contents implemented with a list and text […]
What are Viewport Percentage Units?
Viewport percentage units are a CSS definition which allows a value, such as a div width or font size to be scaled according to the screen size. The values are: Where 1v is equivalent to 1% of the initial containing block The viewport percentage units can be used like this: .main-content{ height:80vh width:100vh; } or […]
Using CSS to Stop Element Scrolling out of View
The aim is to allow the content in the sidebar to scroll upwards, alongside the main content until it reaches the top of the screen. It will then hold position whilst the main body of content continues to scroll. This is like setting a fixed position, but it is allowed to scroll when there is […]
Read More… from Using CSS to Stop Element Scrolling out of View
Using CSS to Display a List in Columns
Here’s a simple list of items which is short across the page: If the content area width is much wider than the content of the list items, for example a list of words, or as in the above example a list of items, breaking the list into multiple columns would make better use of the […]
What is Image Cover?
The issue is getting an image to fill a rectangular area on a web page. Image cover allows for an image to be scaled in both the horizontal and vertical axes to cover the rectangular area without distortion. Consider a rectangular image area, perhaps at the top of the page. It has a set height […]
Adding a Fixed Side Tab to a Website
A static side tab, either on the left or right hand side of a web page, can be used to provide fixed information related to the content or links to social media websites. I’ve seen travel and holiday booking websites include a static summary area with a summary of the trip details: flights; insurance; dates; […]
Important! in CSS
Looking at CSS entries there’s sometimes an additional parameter at the end labelled as !important – what does it mean? For example in this class definition: .menu-footer li{color:red !important;} Website CSS is a part of the website rendering. The code can be included: inline, appended to an HTML element added as a style section on […]
Using CSS to Style Selection
CSS has a reference which can be used to customise the styling when an element is selected. With the CSS selection the styling of the selected content can be set. For example the background colour and font colour can be changed when highlighting a section of text. In CSS the configuration is shown as ::selection{}. […]
