How to Start With CSS Displaying Basic Elements in HTML

This article helps you to start in CSS3, explaining the basics of how to display elements in an HTML document. When I started to work as a software developer, it was boring for me to code the web user interfaces. My weakness always was CSS because it was hard for me to do good displaying of elements in an HTML document. I had some experience using CSS (version 2), but I felt frustrated because of the compatibility in browsers. When I had to have to work with web user interfaces, I only copied some layouts which could find on the Internet. Later it changed when I knew Bootstrap. 1. My previous experience A. What did I have? As I said before, I only copied some pretty layouts which I could find on the Internet, until the day I knew Bootstrap. With Bootstrap my job was easier, because of CSS classes were compatible with all browsers (even IE8), there were pretty templates and it could be used with JQuery to do a useful user interface. B. All was easy with a framework and “!important” I was working for a school as a software developer, meanwhile, I had some clients who wanted e-invoicing software for their companies. So, when I started these projects, I used Bootstrap for the user interfaces with some changes, and I always applied “!important” if a class not working. C. Consequences The projects of my clients were growing, so I was happy because I earned more. The disadvantage was I had to change my interfaces a lot upon customer request. Using Bootstrap and plugins my interfaces were too heavy, slow and many times with errors. 2. Practicing I did it! A. Grid With , we can assemble the layout (or skeleton, as I call this) of our template. We only need to put: Header, Footer, Main and a left Sidebar (Aside) as a puzzle. The key to using Grid is to know which element is the parent (as a container) and which elements are the children. So, the example below shows a father container and three children. Grid Document Row 1 - Col 1 Row 2 - Col 2 Row 3 - Col 3,4 html lang "en" head meta charset "UTF-8" meta name "viewport" content "width=device-width, initial-scale=1.0" title title style { : ; : ; } { : grid; : fr fr fr fr; : ; } { : ; : ; : green; : ; } { : ; : ; : orange; : ; } { : ; : / span ; : red; : ; } h1 margin 0 padding 0 .grid-father display grid-template-columns 1 1 1 1 gap 5px .grid-child-1 grid-row 1 grid-column 1 background-color height 150px .grid-child-2 grid-row 2 grid-column 2 background-color height 150px .grid-child-3 grid-row 3 grid-column 3 2 background-color height 150px style head body div class "grid-father" div class "grid-child-1" h1 h1 div div class "grid-child-2" h1 h1 div div class "grid-child-3" h1 h1 div div body html Running the previous example in our browser, we can see how the children display inside the father: The is a Grid with 4 columns (grid-template-columns: 1fr 1fr 1fr 1fr) where each represents an equitable fraction of the screen. The was displaying on the first column and the first row because its class has two explicit properties (grid-row: 1; grid-column: 1); also it applies for the second child and its properties (grid-row: 2; grid-column: 2). father "fr" first child The special case is in the third child, which is in the third row and the third column, but it occupies 2 columns because the property specifies with the number of columns to expand. grid-column span B. Flexbox Using it is possible to put some elements in different positions and displayings. It was important for me because many times I had problems with the vertical and horizontal positions of divs, spans, and images. Such as the Grid, with Flexbox the key is to know which is the parent and the child: Displaying effect , not to the child of its child. So, the next example shows three kinds of Flexbox displaying: . Flexbox only applies from parent to child row, wrap and column Flexbox Flex row Flex row Flex row Flex row Flex row Flex wrap Flex wrap Flex wrap Flex wrap Flex wrap Flex wrap Flex wrap Flex column Flex column Flex column html lang "en" head meta charset "UTF-8" meta name "viewport" content "width=device-width, initial-scale=1.0" title title style { : ; : ; } { : ; : ; : solid ; : center; : ; : ; } { : flex; : row; : gray; : ; : ; } { : flex; : row; : wrap; : cadetblue; : ; : ; } { : flex; : column; : darkgoldenrod; : ; : ; } h1 padding 0 margin 0 .square-container padding 5px margin 5px border 2px #000 text-align height 50px width 350px .flex-row display flex-direction background-color color #000 margin 5px .flex-wrap display flex-direction flex-wrap background-color color #000 margin 5px .flex-column display flex-direction background-color color #000 margin 5px style head body div class "flex-row" div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div div class "flex-wrap" div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div div class "flex-column" div class "square-container" h1 h1 div div class "square-container" h1 h1 div div class "square-container" h1 h1 div div body html If we run the previous code, can see the difference: Using the element property with as row , all the elements inside take a position in the same line. If the sum of elements sizes exceeds the container size, the elements inside will resize their widths. With as a wrapping row (adding ), all elements will take a position in the same line, but if the sum of elements sizes exceeds the container size, these will move to a new row without resizing any child. display flexbox (flex-direction: row) flexbox flex-wrap: wrap Finally, if we use as a ( ) all elements will take a vertical position, in the same column. flexbox column flex-direction: column Working with Media Queries the web pages can reconfigure all their elements. Also, the web pages can be parameterized with conditional screen sizes, considering the devices which the page will display on. In the example below, we can see how to use media queries and the effect when change the size of the screen. C. Media Queries Media Queries html lang "en" head meta charset "UTF-8" meta name "viewport" content "width=device-width, initial-scale=1.0" title title style { : ; } { : ; : ; : center; : ; } @ (max-width: ) { { : ; } { : ; } } @ (min-width: ) and (max-width: ) { { : ; } { : (204, 150, 1); : ; } } @ (min-width: ) and (max-width: ) { { : ; } { : (72, 82, 221); : ; } } .test-class :before content "Extra Large (normal,without media queries): from 1201px" .test-class background-color #ccc color #000 text-align font-size 24px media 767px .test-class :before content "Small: to 767px" .test-class background-color #06943c media 768px 991px .test-class :before content "Medium: from 768px to 991px" .test-class background-color rgb color #fff media 992px 1200px .test-class :before content "Large: from 992px to 1200px" .test-class background-color rgb color #fff style head body div class "test-class" div body html We can run the previous HTML code in our browser, resize the width of the screen and check "the magic": When we declare the class outside a media query, all the properties in the class are taken as default values, so if we redefine the class inside of a media query, it only overwrites the values that already exist and add the values that do not exist yet. .test-class { : ; } { : ; : ; : center; : ; } @ (max-width: ) { { : ; } { : ; } } .test-class :before content "Extra Large (normal,without media queries): from 1201px" .test-class background-color #ccc color #000 text-align font-size 24px media 767px .test-class :before content "Small: to 767px" .test-class background-color #06943c 3. Conclusion: My "relationship” with my favorite framework Nowadays, I know more about CSS and understand better Bootstrap, even I could use better this framework without modifying it. Mixing Bootstrap and own classes are too easy, we only need to put our class after the Bootstrap class inside the attribute “class” in the HTML tag. Bootstrap Hello World! html lang "en" head meta charset "UTF-8" meta name "viewport" content "width=device-width, initial-scale=1.0" title title link rel "stylesheet" href "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity "sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin "anonymous" style { : ; : ; } .background-eg background-color #f42 color #fff style head body div class "container" div class "row" div class "col-3 background-eg" h1 h1 div div div body html In the previous example, we work with a , a and a (with 3 spaces) from Bootstrap, and apply as a second class to add a red background and white font color. container row column background-eg To finish I would like to recommend if you start with CSS, visit , my favorite site to learn about CSS. CSS-Tricks