4.4. CSS Layout Tutorial¶
Layout is not easy in CSS. Let’s go through some of the layout properties.
4.4.1. Inline vs. Block¶
One of the properties that can be set for a CSS element is the display
property.
The display property defaults to different values depending on what tag
is being used. For the <div>
tag, it defaults to block
. This is what a bunch of blocks
look like. Note that they take the whole width, and work their way down the
page.
Here is the code behind that web page. For simplicity, I’m putting the style in
the <head>
of the document. Normally styles would all go into a different
style sheet.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> .word_class { border-style: solid; border-width: 2px; margin: 3px; padding: 3px; /* display defaults to 'block' */ display: block; } </style> </head> <body> <section> <div class="word_class">This</div> <div class="word_class">is</div> <div class="word_class">a</div> <div class="word_class">test</div> <div class="word_class">document.</div> </section> </body> </html> |
Below we’ve switched from block
to inline
.
With inline
everything flows like text on a line.
For the <span>
tag, inline
is the default.
If you resize a window with several inline
elements, they will line-wrap.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> .word_class { border-style: solid; border-width: 2px; /* Note that top/bottom margin are ignored for 'inline' */ margin: 3px; padding: 3px; /* display defaults to 'block' */ display: inline; } </style> </head> <body> <section> <div class="word_class">This</div> <div class="word_class">is</div> <div class="word_class">a</div> <div class="word_class">test</div> <div class="word_class">document.</div> </section> </body> </html> |
There are several other options for the display
property. You can see them
here.
4.4.2. Inspect Elements¶
You can do some really amazing things with modern web browsers. Select an element on your page, and right-click on it. (Step 1 below.)
Then, select “inspect.” (Step 2 below.)
Next, see that you’ll get panels that open up with the page you see, the HTML, and the CSS that is applied. As you click on the HTML (Step 1 below.) Note that Chrome highlights the element on out page (Step 2 below.) It also shows you the applied style (Step 3 below.)
You can double click on the style information and change it! But the changes are not saved in your document. They are only temporary.
4.4.3. Position¶
Looking to center or right align a block? It isn’t intuitive. To center, use
the margin
property, and set it to auto
. You can also right-align by
setting the left margin to auto
and the right margin to zero.
Here is an example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> body { border-style: solid; border-width: 2px; border-color: red; } section { border-style: solid; border-width: 2px; border-color: blue; margin: 3px; padding: 3px; left: 30px; top: 30px; } .word_class { border-style: solid; border-width: 2px; margin: 3px; padding: 3px; /* display defaults to 'block' */ display: block; width: 200px; } #word_2 { /* Center a block */ margin: auto; } #word_3 { /* Right align a block */ margin-left:auto; margin-right:0; } </style> </head> <body> <section> <div class="word_class" id="word_1">This</div> <div class="word_class" id="word_2">is</div> <div class="word_class" id="word_3">a</div> <div class="word_class" id="word_4">test</div> <div class="word_class">document.</div> </section> </body> </html> |
You can also “float” items. Resize the window and see some odd things. Note
that floating objects are not contained in the section
tag, but float outside
of it.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> body { border-style: solid; border-width: 2px; border-color: red; } section { border-style: solid; border-width: 2px; border-color: blue; margin: 3px; padding: 3px; left: 30px; top: 30px; } .word_class { border-style: solid; border-width: 2px; margin: 3px; padding: 3px; /* display defaults to 'block' */ display: block; width: 100px; } .left_class { float: left; } .right_class { float: right; } </style> </head> <body> <section> <div class="word_class left_class">This</div> <div class="word_class left_class">is</div> <div class="word_class left_class">a</div> <div class="word_class left_class">test</div> <div class="word_class left_class">document.</div> <div class="word_class right_class">This</div> <div class="word_class right_class">is</div> <div class="word_class right_class">a</div> <div class="word_class right_class">test</div> <div class="word_class right_class">document.</div> </section> </body> </html> |
By default positions are static
and ignore top, bottom, left, right directives.
If instead you select relative
, then you can set top
and left
values to specify how many pixels relative to the last element should this
new element be.
Important: You can also specify negative numbers. Try it!
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> .word_class { border-style: solid; border-width: 2px; margin: 3px; padding: 3px; /* display defaults to 'block' */ display: inline; } #special { position: relative; left: 30px; top: 30px; } </style> </head> <body> <section> <div class="word_class">This</div> <div class="word_class">is</div> <div class="word_class">a</div> <div class="word_class">test</div> <div class="word_class">document.</div> <div id="special" class="word_class">I'm Special</div> </section> </body> </html> |
If you select absolute
, then the element is not relative to the lastprior
element. From the name, it would be reasonable to think that “absolute” positioning
means “absolutely place this here.” And that it would not be relative to anything.
Not so. Absolute positioning is relative to the element that contains it. Rather
than relative to the prior element. In the example below, the special element
is relative to the <section>
tag. Which you can’t see.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> .word_class { border-style: solid; border-width: 2px; margin: 3px; padding: 3px; /* display defaults to 'block' */ display: inline; } #special { position: absolute; left: 30px; top: 30px; } </style> </head> <body> <section> <div class="word_class">This</div> <div class="word_class">is</div> <div class="word_class">a</div> <div class="word_class">test</div> <div class="word_class">document.</div> <div id="special" class="word_class">I'm Special</div> </section> </body> </html> |
Here, we style the <section>
tag. This makes it a little easier to see
how the document is relative to the position of the <section>
tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <title>Sample document for CSS layout</title> <style> .word_class { border-style: solid; border-width: 2px; margin: 3px; padding: 3px; /* display defaults to 'block' */ display: inline; } #special { position: absolute; left: 30px; top: 30px; } </style> </head> <body> <section> <div class="word_class">This</div> <div class="word_class">is</div> <div class="word_class">a</div> <div class="word_class">test</div> <div class="word_class">document.</div> <div id="special" class="word_class">I'm Special</div> </section> </body> </html> |
There are many limitations to the original CSS’s layout options. Version 3 of CSS (CSS3) includes flex box which is supposed to help. There are other CSS libraries that have their own method of layout.
Flex-box playground: