Reset elements & containers

Reset elements

AskaCSS provides a reset for all elements. This reset is useful for creating a clean and consistent look and feel for all elements. The box-sizing is set to border-box, so all elements are sized to their content. Reset all padding and margin values to 0. Declare the Roboto regular font with style and weight at normal.

Containers

AskaCSS provides a containers for define the size of window :

container : 100% width, auto height, word-wrap at break-word
container-margin : 90% width, auto height, word-wrap at break-word

The difference between container and container-margin, is the container-margin decrease to 90% of the width of the window and center elements.

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <link rel="stylesheet" href="askacss.css">
                    <title>Title</title>
                </head>
                <body>
                    <main class="container">
                        <p>Content with width 100%</p>
                    </main>
 
                    <script src="../js/askacss.js"></script>
                </body>
                </html>

                <!DOCTYPE html>
                <html lang="en">
                <head>
                    <meta charset="UTF-8">
                    <link rel="stylesheet" href="askacss.css">
                    <title>Title</title>
                </head>
                <body>
                    <main class="container-margin">
                        <p>Content with width fixed to 90% and center</p>
                    </main>
 
                    <script src="../js/askacss.js"></script>
                </body>
                </html>