Lesson 11 - Border, shadow and the boxmodel in CSS
In the previous lesson, Floating content in HTML, we learned how to work with floating content and how to position elements next to each other.
In today's lesson, we're going to finish the article area on our site and learn about a couple of new properties.
Border
We split the article area up into 2 elements - header
and
section
which we positioned next to each other. To add a bit more
style, let's give the section
a border.
In CSS, we set a border using the border
shorthand property. For the value, we are able to set the border width, line
style, and color. We already have a section
selector in style.css
set up where we set the float, width, and background. Let's add a border to our
section's style with these settings:
article section { width: 706px; float: left; background: white; border: 2px solid #006797; }
We have set the width to 2px, a solid line style and a color using
hexadecimal notation (dark blue) to the border
property. Maybe you
also noticed that we decreased the element width from 710px to 706px. That's
because the element is now 2px wider on each side because of the border (so the
element width was inherently increased by 4px and we want to keep the original
710px). The border width is not considered a part of element width.
Meaning that the element will always get a bit wider when you set a
border..
Here's what it looks like now:
Remember to always use colors that fit the design.
The same style can be also achieved by specifying each property separately:
border-style: solid; border-width: 2px; border-color: #006797;
There is no reason to set things up this way unless you only need to set a single property. The only reason I showed you was for completeness' sake and so you would understand what it is when you encounter it somewhere.
Border styles
We can use the following values as border styles:
- none - No border.
- hidden - Border is not rendered but it occupies space.
- dotted - Dotted.
- dashed - Dashed.
- solid - Solid line.
- double - Double.
- groove - 3D border with a groove effect.
- ridge - 3D border with a ridge effect.
- inset - 3D border with an inset effect.
- outset - 3D border with an outset effect.
- inherit - Inherits the border style from the parent element.
Try it out for yourself The 3D styles can be seen properly on wide borders.
Border radius
A rather interesting property included is
border-radius
, which allow us to make border
corners round. Add it to the section
style:
border-radius: 10px;
The result:
We usually don't use values greater than 10px because anything over it doesn't look good. If we set a very large value, the element becomes a circle. Which may possibly come in handy in some cases such as for circle buttons and such.
Another thing is that the border-radius
can also be applied to
images, making their corners round. Greater values also make the image looks
like a circle. Let's try it out and see what it actually looks like.
For test purposes, we can omit selectors and set the style straight in the
HTML. We are able to do this using HTML's style
attribute.
Obviously, we're messing the code up and are violating the key principle of
separating contents and styles. However, all we're doing is creating a design
and going with what looks good. For those specific intents and purposes, the
style attribute is quite useful (test purposes, just to be clear). Modify your
image's code in HTML to look like this:
<img src="images/avatar.png" alt="HoBi the programmer" style="border-radius: 500px;" />
The result:
Round corners don't fit this particular template's design, so go ahead and
remove it. If it so happens that you like them, just remove the
style
attribute and create a proper selector for them in style.css.
The style
attribute shouldn't occur anywhere in the HTML parts of a
finished web page.
Shadow
We have already gone over shadows using the text-shadow
CSS 3
property. However, we are able to set a shadow to any element on a webpage using
the box-shadow
property. Let's go ahead and style the
section
's shadow:
box-shadow: 2px 2px 7px #1c2228;
The first 2 values are the shadow's position, the next one is a blur radius, the last one is a color. The property styles a rectangular shadow around an element. Let's take a look at what it did:
Margin and padding
The section
contents are very close to the edge which doesn't
look very good. It's a good practice to keep a certain amount of spacing between
elements. We can set them using padding
and margin
properties. The difference between these 2 is often referred to as the boxmodel,
which looks like this:
In the image, we see an element (our section
) and a border
around it. The spacing between a border and an element's content is called
padding
. The spacing between a border and element surroundings is
called a margin
. Simply put: the padding is the inner
spacing and the margin is the outer spacing.
None of these spacings are part of the element's width! Now,
set the section
's padding to 20px and decrease the width by 40px
(20px for each side):
padding: 20px; width: 666px;
This way, we have set up a good amount of inner spacing on all sides:
The property can also be formatted like this:
padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px;
The syntax above would come in handy if we wanted to only set a single spacing or different widths for each individual spacing. We are able to set individual values in the shorthand syntax as well (the order is top, right, bottom, left):
padding: 20px 20px 20px 20px;
There is also a third possible syntax, which is sometimes put into use:
padding: 20px 20px;
The first value here sets the vertical spacing (top and bottom) and the second one sets the horizontal one (left and right). In the next lesson, Solved tasks for HTML and CSS lessons 10-11, we're going to code a navigation bar and add it to our website. The code we worked on in today's lesson is available for download below, as always.
In the following exercise, Solved tasks for HTML and CSS lessons 10-11, we're gonna practice our knowledge from previous lessons.
Did you have a problem with anything? Download the sample application below and compare it with your project, you will find the error easily.
Download
By downloading the following file, you agree to the license terms
Downloaded 42x (76.73 kB)
Application includes source codes in language HTML