Change Stylesheet Example

Main Content

This is the main content area. Without css file applied it will layout in the normal flow.

Layouts

This one page HTML document allows the users to cycle through different CSS files. The HTML structure remains the same. Simply click on one of the buttons in the Sidebar to change the layout of the enture page.

When you click a button it called a simple JavaScript function called changeStylesheet() that dynamically changed what external CSS file to link to. The JavaScript function looks like:

 
    <script>
        function changeStylesheet(sheet) {
            document.getElementById('stylesheet').setAttribute('href', sheet);
        }
    </script>

CSS Techniques Used

Flex

CSS Flexbox is a layout model that makes it easier to design flexible and responsive layouts. Flexbox allows you to easily align and distribute space among items in a contain even when the size is unknown or dynamic.

Create a flex container on the parent element using display: flex;

For the flex-container:
- flex-direction: Sets the main axis (row, column, row-reverse, column-reverse).
- justify-content: Aligns items along the main axis.
- align-items: Aligns items along the cross axis.
For the flex-items:
- flex-grow: Determines how much an item can grow.
- flex-shrink: Determines how much an item can shrink.
- flex-basis: Sets the initial size of an item.

Grid

CSS Grid Layout is another powerful layout system for web design. Grid Layout allows you to create two-dimensional layouts (rows and columns). It's ideal for designing entire page layouts or complex components as grid items can be placed precisely in the grid.

Create a grid container on the parent element using display: grid;

For the grid container:
- grid-template-columns: defines the columns of the grid
- grid-template-rows: defines the rows of the grid
- gap: sets the spacing between grid cells
For the grid items:
- grid-column: specifies which column(s) an item should occupy
- grid-row: specifies which row(s) an item should occupy.