\r\n\r\n<style>\r\n\r\np.one {<\/span>\r\n\r\nborder-style:solid;<\/span>\r\n\r\nborder-width:5px;<\/span>\r\n\r\n}<\/span>\r\n\r\np.two {<\/span>\r\n\r\nborder-style:groove;<\/span>\r\n\r\nborder-width:medium;<\/span>\r\n\r\n}<\/span>\r\n\r\np.three {<\/span>\r\n\r\nborder-style:dotted;<\/span>\r\n\r\nborder-width:1px;<\/span>\r\n\r\nborder-color:red;<\/span>\r\n\r\n}<\/span>\r\n\r\np {padding:10px;}<\/strong><\/span>\r\n\r\n<\/style>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n\r\n<p class=\"two\">Some more text.<\/p>\r\n\r\n<p class=\"three\">Even more text.<\/p><\/pre>\r\n<\/td>\r\n![\"Padding](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191350\/chap20_margins_fmt.png\") <\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nYou will notice that the paragraphs still have not moved relative to one another, they each simply take up more space. In order to move them further away from each other, we can add a margin:\r\n <\/colgroup>\r\n\r\n\r\n\r\n<style>\r\n\r\np.one {<\/span>\r\n\r\nborder-style:solid;<\/span>\r\n\r\nborder-width:5px;<\/span>\r\n\r\n}<\/span>\r\n\r\np.two {<\/span>\r\n\r\nborder-style:groove;<\/span>\r\n\r\nborder-width:medium;<\/span>\r\n\r\n}<\/span>\r\n\r\np.three {<\/span>\r\n\r\nborder-style:dotted;<\/span>\r\n\r\nborder-width:1px;<\/span>\r\n\r\nborder-color:red;<\/span>\r\n\r\n}<\/span>\r\n\r\np {padding:10px;}<\/span>\r\n\r\np {margin:50px;}<\/strong><\/span>\r\n\r\n<\/style>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n\r\n<p class=\"two\">Some more text.<\/p>\r\n\r\n<p class=\"three\">Even more text.<\/p><\/pre>\r\n<\/td>\r\n| \r\n ![\"Margins](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191351\/chap20_margins2_fmt.png\") <\/p>\r\n<\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nWith both examples, we can adjust our values by pixel or percent. We can also control the amount of change by each side of the object, by specifying top, bottom, left or right to our rules. To do this we need to edit our values to only pad the left side of our paragraphs, and only apply a margin to the bottom of each:\r\n
<\/colgroup>\r\n\r\n\r\n\r\n<style>\r\n\r\np.one {<\/span>\r\n\r\nborder-style:solid;<\/span>\r\n\r\nborder-width:5px;<\/span>\r\n\r\n}<\/span>\r\n\r\np.two {<\/span>\r\n\r\nborder-style:groove;<\/span>\r\n\r\nborder-width:medium;<\/span>\r\n\r\n}<\/span>\r\n\r\np.three{<\/span>\r\n\r\nborder-style:dotted;<\/span>\r\n\r\nborder-width:1px;<\/span>\r\n\r\nborder-color:red;<\/span>\r\n\r\n}<\/span>\r\n\r\np {padding-left:10px;}<\/strong><\/span>\r\n\r\np {margin-bottom:50px;}<\/strong><\/span>\r\n\r\n<\/style>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n\r\n<p class=\"two\">Some more text.<\/p>\r\n\r\n<p class=\"three\">Even more text.<\/p><\/pre>\r\n<\/td>\r\n![\"chap20_margins3.png\"](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191353\/chap20_margins3_fmt.png\") <\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nInstead of writing out multiple rules to adjust sides, we can combine them into one declaration by writing out our values clockwise, starting with top, as padding: top right bottom left or margin: top right bottom left, replacing the words with a fixed or relative value (they can be mixed) and by using zero as a place holder if we do not want the value changed from default:\r\n <\/colgroup>\r\n\r\n\r\n\r\n<style>\r\n\r\np.one {<\/span>\r\n\r\nborder-style:solid;<\/span>\r\n\r\nborder-width:5px;<\/span>\r\n\r\n}<\/span><\/span>\r\n\r\np.<\/span>two {<\/span>\r\n\r\nborder-style:groove;<\/span>\r\n\r\nborder-width:medium;<\/span>\r\n\r\n}<\/span>\r\n\r\np.three {<\/span>\r\n\r\nborder-style:dotted;<\/span>\r\n\r\nborder-width:1px;<\/span>\r\n\r\nborder-color:red;<\/span>\r\n\r\n}<\/span>\r\n\r\np {padding:50px 30px 50px 5px;}<\/strong><\/span>\r\n\r\np {margin:50px;}<\/span>\r\n\r\n<\/style>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n\r\n<p class=\"two\">Some more text.<\/p>\r\n\r\n<p class=\"three\">Even more text.<\/p><\/pre>\r\n<\/td>\r\n![\"Text](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191354\/chap20_margins4_fmt.png\") <\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\n <\/colgroup>\r\n\r\n\r\n\r\n<style>\r\n\r\np.one {<\/span>\r\n\r\nborder-style:solid;<\/span>\r\n\r\nborder-width:5px;<\/span>\r\n\r\nBackground-color: green;<\/strong><\/span>\r\n\r\n}<\/span>\r\n\r\np.two {<\/span>\r\n\r\nborder-style:groove;<\/span>\r\n\r\nborder-width:medium;<\/span>\r\n\r\nBackground-color:#ff3355;<\/strong><\/span>\r\n\r\n}<\/span>\r\n\r\np.three {<\/span>\r\n\r\nborder-style:dotted;<\/span>\r\n\r\nborder-width:1px;<\/span>\r\n\r\nborder-color:red;<\/span>\r\n\r\nbackground-color: rgb(33,66,99);<\/strong><\/span>\r\n\r\n}<\/span>\r\n\r\np {padding:50px 30px 50px 5px;}<\/span>\r\n\r\np {margin:50px;}<\/span>\r\n\r\n<\/style>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n\r\n<p class=\"two\">Some more text.<\/p>\r\n\r\n<p class=\"three\">Even more text.<\/p><\/pre>\r\n<\/td>\r\n![\"Text](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191356\/chap20_background_fmt.png\") <\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nTo use images instead of colors, we can specify the image\u2019s location in our files, and can also dictate where we want to place it on our page, whether or not it should repeat, and whether it should move or remain in place when the user scrolls the page. By default, images will repeat to fill the space they are placed in. To prevent this, we can add a no-repeat attribute to our definitions. This time, we will use the background attribute as opposed to the background-color attribute. The benefit of this is that you can include both in a set of rules on the same object (image first, color second), allowing you to have an image on top of a background color. Take note that in these examples, you will need to select your own images in place of those used below.\r\n<style>\r\n\r\np.one {<\/span>\r\n\r\nborder-style:solid;<\/span>\r\n\r\nborder-width:5px;<\/span>\r\n\r\nbackground:url(clouds.jpg);<\/strong><\/span>\r\n\r\n}<\/span>\r\n\r\np.two {<\/span>\r\n\r\nborder-style:groove;<\/span>\r\n\r\nborder-width:medium;<\/span>\r\n\r\nbackground:url(calendar.jpg) no-repeat;<\/strong><\/span>\r\n\r\nbackground-color:#ff3355;<\/span>\r\n\r\n}<\/span>\r\n\r\np.three {<\/span>\r\n\r\nborder-style:dotted;<\/span>\r\n\r\nborder-width:1px;<\/span>\r\n\r\nborder-color:red;<\/span>\r\n\r\nbackground:url(calendar.jpg);<\/strong><\/span>\r\n\r\n}<\/span>\r\n\r\np {padding:50px 30px 50px 5px;}<\/span>\r\n\r\np {margin:50px;}<\/span>\r\n\r\n<\/style>\r\n\r\n<p class=\"one\">Some text.<\/p>\r\n\r\n<p class=\"two\">Some more text.<\/p>\r\n\r\n<p class=\"three\">Even more text.<\/p><\/pre>\r\n![\"Textboxes](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191358\/chap20_background2_fmt.png\") <\/p>\r\nThere are two ways of achieving this affect. The first is by using advanced styling through CSS using WebKit<\/span> features supported by some browsers, and then adding style rules to create the effect as close as possible in other browsers. The second is by creating a repeatable gradient image. The first approach\u2019s reliance on WebKit provides support for Apple and Google products. For browsers that do not use WebKit, we have to add extra rules to achieve the same effect. This is a more advanced example as it requires knowledge of each browser\u2019s needs to create:\r\n<style>\r\n\r\n#ourBackground {<\/span>\r\n\r\nbackground-color: #1a82f7;<\/span>\r\n\r\nbackground: url(ourFallBackImage.png);<\/span>\r\n\r\nbackground-repeat: repeat-x;<\/span>\r\n\r\n\/* Safari 4-5, Chrome 1-9 *\/<\/span>\r\n\r\nbackground: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));<\/span>\r\n\r\n\/* Safari 5.1, Chrome 10+ *\/<\/span>\r\n\r\nbackground: -webkit-linear-gradient(top, #2F2727, #1a82f7);<\/span>\r\n\r\n\/* Firefox 3.6+ *\/<\/span>\r\n\r\nbackground: -moz-linear-gradient(top, #2F2727, #1a82f7);<\/span>\r\n\r\n\/* IE 10 *\/<\/span>\r\n\r\nbackground: -ms-linear-gradient(top, #2F2727, #1a82f7);<\/span>\r\n\r\n\/* Opera 11.10+ *\/<\/span>\r\n\r\nbackground: -o-linear-gradient(top, #2F2727, #1a82f7);<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style>\r\n\r\n<div id=\"ourBackground\" width=\"300px\" height=\"300px\">\r\n\r\n<br\/><\/span>\r\n\r\nSome <br\/><\/span>\r\n\r\nText <br\/><\/span>\r\n\r\nHere <br\/><\/span>\r\n\r\n<br\/><\/span>\r\n\r\n<\/div><\/pre>\r\nThis code should produce an almost identical image in every browser, depending on which rule(s) the browser is able to execute:\r\n\r\n![\"A](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191359\/chap20_background3_fmt.png\") <\/span>\r\n\r\nThe first three lines of this style script\u2014\r\nbackground-color: #1a82f7;\r\n\r\nbackground: url(ourFallBackImage.png);\r\n\r\nbackground-repeat: repeat-x;<\/pre>\r\ndemonstrate how we create the gradient effect through an image. In this example, ourFallBackImage.png would be a very skinny (1 pixel) wide image as tall as we want our gradient to be. By repeating this image across the X axis (moving horizontally) the image will fill the width of the parent object. By specifying the bottom-most pixel color from our image as the background, the gradient will appear to fill the page. The balance of our rules in this example achieve the same result through CSS, but also provides more control over the gradient without needing to create additional images.\r\nFloat<\/h1>\r\nFloating an object with CSS allows us to move it around within its parent object, ignoring (to some extent) the other items near it. Note that float is only for left\/right values, not top\/bottom, even though their movement may feel that way as windows resize.\r\n\r\nWhen multiple objects in the same container have the same float style, they will line up next to each other for as many as the container can fit. While this may sound confusing, we will look at it without the terminology: If you have a big box, and that box has small boxes in it, those boxes will fit as many of themselves left-to-right in a row as they can. Any boxes that do not fit will start a new \u201crow\u201d underneath.\r\n\r\nThe use of float is a big help to responsive styling. Boxes of content that normally fit side by side on a larger screen will automatically create more \u201crows,\u201d with less items in each, to accommodate screens with less width. Create a page with the following code, and then play around with the size of your browser window to see the resizing in action:\r\n<style>\r\n\r\n.thumbnail {<\/span>\r\n\r\nfloat:left;<\/span>\r\n\r\nwidth:80px;<\/span>\r\n\r\nheight:80px;<\/span>\r\n\r\nmargin:5px;<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style>\r\n\r\n<div>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<img class=\"thumbnail\" src=\"yourPictureHere.jpg\" ><\/span>\r\n\r\n<\/div><\/pre>\r\nContent before and after a floated element will attempt to wrap around it. When we do not want this to happen, we can add a rule to that element\u2019s style to clear the floating effect. To do this, we would add clear: left; clear: right; or clear:both depending which sides we are concerned with.\r\n\r\n Useful Feature<\/h3>\r\nSince relative refers to moving the position from where it would be based on all of the other elements and rules, we can use negative values to \u201cpull\u201d an element in that particular direction.<\/p>\r\n\r\n<\/div>\r\n Positioning<\/h1>\r\nWe can specify, with great control, exactly where our elements are ultimately located in our window. CSS allows us to modify location to such an extent that an items position on the page can have no relation to its location in your code. Just as we have seen in many of our other rules, there are two methods to declaring position, fixed and relative. Here fixed elements specify the offset of pixels from a side or corner of the window, and relative declares that our values are moving the content from where it would<\/em> have been if we had not changed it.\r\n\r\nHere is how we might take a heading and force it to an offset from the top left corner as an absolute, meaning it will sit there no matter what else is above, underneath, or around it:\r\n<style>\r\n\r\nh2 {<\/span>\r\n\r\nposition:absolute;<\/span>\r\n\r\nleft:50px;<\/span>\r\n\r\ntop:100px;<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style>\r\n\r\n<h2>This is a heading with an absolute position<\/h2>\r\n\r\n<p>With absolute positioning, an element can be placed anywhere on a page. The heading below is placed 50px from the left of the page and 100px from the top of the page. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there. As this text continues, you will see that the heading sits on top of the text as if it was not even there.<\/p><\/pre>\r\n![\"The](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191401\/chap20_positioning_fmt.png\") <\/span>\r\n\r\nIf we wanted to move our heading relative to where it would normally have been positioned (just above our paragraph) we change to relative and provide the offset values that we want. Here, we will move it to the right, move it to the left, and show it as it was:\r\n<style>\r\n\r\nh2.pos_left {<\/span>\r\n\r\nposition:relative;<\/span>\r\n\r\nleft:-20px;<\/span>\r\n\r\n}<\/span>\r\n\r\nh2.pos_right {<\/span>\r\n\r\nposition:relative;<\/span>\r\n\r\nleft:20px;<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style>\r\n\r\n<h2>This is a heading with no position<\/h2>\r\n\r\n<h2 class=\"pos_left\">This heading is moved left according to its normal position<\/h2>\r\n\r\n<h2 class=\"pos_right\">This heading is moved right according to its normal position<\/h2>\r\n\r\n<p>This is our paragraph that has a heading with relative positioning. Unless we put a negative bottom offset on our heading large enough to cover it, it will stay above the paragraph this time. <\/p><\/pre>\r\n![\"The](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191404\/chap20_positioning2_fmt.png\") <\/span><\/em><\/p>\r\n\r\nZ-index<\/h1>\r\nJust when you thought we had escaped the terrors of precedence and inheritance, we have another factor in our layering to consider. The z-index of an object determines its order in the stack of elements on a page. This is how we can control which items are depicted as on \u201ctop\u201d of another when they occupy the same portion of a page. While items are automatically layered according to their location on the page and in our code, these can be modified and overridden by a z-index to set the order we want. A larger value of a z-index forces an object \u201chigher\u201d on the page, or, puts it closer to the \u201ctop\u201d of all the elements you are looking at. A page background, for example, is usually the lowest level on your page. As such, other content on your page sits on top of your background layer, and becomes the next layer in the stack. A simple way to ensure important messages are never hidden behind something else is to assign them a z-index of an extremely large like 99999. You should only use such a method for one or two critical items in a site. In our first example, we will see an image with a negative index that ensures it is behind our text. Then we will change our index value to make it higher, putting it on top of the text instead:\r\n<style>\r\n\r\nimg {<\/span>\r\n\r\nposition:absolute;<\/span>\r\n\r\nleft:0px;<\/span>\r\n\r\ntop:0px;<\/span>\r\n\r\nz-index:-1;<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style>\r\n\r\n<h1>Here is some text<\/h1>\r\n\r\n<img src=\"http:\/\/bglabs.evade.netdna-cdn.com\/files\/clouds-seamless-background-824.jpg\" width=\"100\" height=\"100\" \/><\/pre>\r\n![\"A](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191406\/chap20_Zindex_fmt.png\") \r\n<style>\r\n\r\nimg {<\/span>\r\n\r\nposition:absolute;<\/span>\r\n\r\nleft:0px;<\/span>\r\n\r\ntop:0px;<\/span>\r\n\r\nz-index:-1;<\/span>\r\n\r\n}<\/span>\r\n\r\n<\/style>\r\n\r\n<h1>Here is some text<\/h1>\r\n\r\n<img src=\"http:\/\/bglabs.evade.netdna-cdn.com\/files\/clouds-seamless-background-824.jpg\" width=\"100\" height=\"100\" \/><\/pre>\r\n![\"A](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191407\/chap20_Zindex2_fmt.png\") \r\nMouse Cursor<\/h1>\r\nWhile this is not a regular feature in most sites, it can be an important player if you intend for your website to act as if it were an application.\r\n\r\nWe can add cursor rules to our selectors in order to change the appearance of the mouse cursor when that rule is active. Much the same as working in your operating system, we can select the regular icon, wait (also called working, busy, thinking, etc.), text insert, a pointer, a question mark, and a crosshair. While most of these have little use in the average web page, they come in handy when your end product is more application focused.\r\n\r\nI would strongly recommend judicious use of cursor changes, and be sure that your changes are reverted back as soon as it is appropriate (i.e. change your waiting\/busy back as soon as an event is compete) as forgetting to reset can leave your user thinking your site (or their system) is locked up or endlessly cycling. The full list of the available cursors is as follows:\r\nTable 5 Pointer Styles<\/a><\/em><\/p>\r\n\r\n <\/colgroup>\r\n\r\n\r\n| \r\n Value<\/p>\r\n<\/th>\r\n | \r\n Description<\/p>\r\n<\/th>\r\n<\/tr>\r\n | \r\n| \r\n auto<\/p>\r\n<\/td>\r\n | \r\n (default) let the browser choose<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n crosshair<\/p>\r\n<\/td>\r\n | \r\n Crosshair, or \u201cplus,\u201d symbol<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n default<\/p>\r\n<\/td>\r\n | \r\n The default cursor<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n e-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize to the right (note all resize values are compass combinations)<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n help<\/p>\r\n<\/td>\r\n | \r\n The help (question mark) icon<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n move<\/p>\r\n<\/td>\r\n | \r\n Item can be moved<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n n-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize up<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n ne-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize up and right<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n nw-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize up and left<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n pointer<\/p>\r\n<\/td>\r\n | \r\n A pointer (arrow)<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n progress<\/p>\r\n<\/td>\r\n | \r\n The busy symbol (be careful with this one!)<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n s-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize down<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n se-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize down and right<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n sw-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize down and left<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n text<\/p>\r\n<\/td>\r\n | \r\n Text line (flashing or steady \u201cI\u201d)<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n w-resize<\/p>\r\n<\/td>\r\n | \r\n Shows resize left<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n| \r\n wait<\/p>\r\n<\/td>\r\n | \r\n Shows busy, wait (be careful with this one!)<\/p>\r\n<\/td>\r\n<\/tr>\r\n | \r\n
| | | | | | | | | |
![\"A](\"https:\/\/s3-us-west-2.amazonaws.com\/courses-images\/wp-content\/uploads\/sites\/1755\/2017\/04\/21191348\/Boxmodell-detail_fmt.gif\")
By Matthias Apsel [CC0]<\/a>, via Wikimedia Commons. Figure 24 CSS Box Model[\/caption]\r\n![\"Borders](\"https:\/\/milnepublishing.geneseo.edu\/themissinglink\/wp-content\/uploads\/sites\/4\/2015\/07\/Chap20_Margins1_fmt.png\")
<\/a><\/td>\r\n<\/tr>\r\n<\/tbody>\r\n<\/table>\r\nThe full list of possible border styles is as follows:\r\n![By Matthias Apsel [CC0]<\/a>, via Wikimedia Commons. Figure 24 CSS Box Model[\/caption]\r\nBorders<\/h1>\r\nTo better identify where our content falls on a page, and to signify that it is different from the material around it, we can adjust the borders on our elements. Borders can be enabled or disabled by the top, bottom, left and right of the element and can also have different styles like solid, double, grooved, dotted and dashed lines, among others.<\/p>\r\nTo specify a full border, we simply use border, and can apply color, width, and style:\r\n](\"http:\/\/commons.wikimedia.org\/wiki\/File:Boxmodell-detail.gif\"){kind=link}