Now in our stylesheet (or in a codepen\u00a0use the CSS section and enter your CSS code) we select this specific div with the\u00a0.\u00a0<\/strong>selector for class:<\/p>\n Inside the curly brackets, we can enter a new declaration on each line. Here is a nice overview of the possible properties you can specify:<\/p>\n Now let’s combine all these declarations inside our CSS selector:<\/p>\n Great, now the result should look like this:<\/p>\n If we simply add a couple more div’s with the same name the result would be:<\/p>\n This is thanks to the power of an inline-block element which gets the benefits of block (padding\/margin) and inline by showing multiple elements on the same line!<\/p>\n An alternative way to accomplish the same result without using display inline-block is to use flex. We need to add a parent that wraps the three div’s\u00a0nameOfDiv\u00a0<\/strong>and make the parent display\u00a0flex<\/strong>. Like this:<\/p>\n And the CSS would be:<\/p>\n.nameOfDiv {\n \/* We'll enter our declarations here *\/ \n}<\/pre>\n\n\n
\n Declaration key<\/strong><\/td>\n Declaration values<\/strong><\/td>\n Explanation\u00a0of property<\/strong><\/td>\n<\/tr>\n \n background<\/span><\/td>\n black, red, orange, pink, tomato, green, white, etc<\/td>\n Sets the background color of our element. It takes in\u00a0a name of a color.<\/td>\n<\/tr>\n \n color<\/span><\/td>\n same as background, a named color<\/td>\n Set the text color of the element (all children of the element will inherit this color!)<\/td>\n<\/tr>\n \n width<\/span><\/td>\n % (of the page) or pixels using px. 30%<\/strong> or 300px<\/strong><\/td>\n Sets the horizontal size of our element<\/td>\n<\/tr>\n \n height<\/span><\/td>\n % (of the page) or pixels using px. 30%<\/strong> or 300px<\/strong><\/td>\n Sets the vertical height of our element<\/td>\n<\/tr>\n \n padding<\/span><\/td>\n Preferably use pixels, but can also take in %. 15px<\/strong><\/td>\n Sets the inner padding of an element<\/td>\n<\/tr>\n \n margin<\/span><\/td>\n Preferably use pixels, but can also take in %. 15px<\/strong><\/td>\n Sets the outer margin of an element<\/td>\n<\/tr>\n \n display<\/span><\/td>\n block, inline, inline-block, flex<\/td>\n Allows us to choose how we want our element to display on the page. Flex makes all immediate children into columns.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n .nameOfDiv {\n background: orange;\n color: white;\n width: 150px;\n height: 50px;\n padding: 15px;\n margin: 10px;\n display: inline-block;\n}<\/pre>\n![\"\"](\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/10\/img_5bd8de273c672.png\")
<\/p>\n![\"\"](\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/10\/img_5bd8de5781ff6.png\")
<\/p>\n<div class=\"flex\">\n <div class=\"nameOfDiv\">Some text<\/div>\t\n <div class=\"nameOfDiv\">Some text<\/div>\t\n <div class=\"nameOfDiv\">Some text<\/div>\t\n<\/div><\/pre>\n
.flex {\n display: flex;\n}\n.nameOfDiv {\n background: orange;\n color: white;\n width: 150px;\n height: 50px;\n padding: 15px;\n margin: 10px;\n}<\/pre>\n
![\"\"](\"http:\/\/ucsbwebdev.local\/wp-content\/uploads\/2018\/10\/img_5bd8df0ab2189.png\")
<\/p>\n