CSS Educational Materials
- Week 3
  - Box model

CSS Borders

border-style

The border style properties specify the line style of a box's border.

[Syntax]

border-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

Example

[style.css]

p{
  width: 300px;
  height: 100px;
}
p#dot{ border-style: dotted; }
p#sol{ border-style: solid; }

[index.html]

<p id="dot">This is a paragraph(dotted)</p>
<p id="sol">This is a paragraph(solid)</p>

border-color

The border color properties specify the color of a box's border.

[Syntax]

border-color: <color> | transparent

color: Specifies a color value:
- color keywords
- color values

Example

[style.css]

p{
  width: 300px;
  height: 100px;
  border-style: solid;
  border-color: red;
}

[index.html]

<p>This is a paragraph</p>

border-width

The border width properties specify the width of the border area.

[Syntax]

border-width: thin | medium | thick | <length>

Example

[style.css]

p#thin{ border-width: thin; }
p#med{ border-width: medium; }
p#thick{ border-width: thick; }

[index.html]

<p id="thin">This is a paragraph(thin)</p>
<p id="med">This is a paragraph(medium)</p>
<p id="thick">This is a paragraph(thick)</p>

Challenge

1. Styles the side navigation by border.

[style.css]

nav ul li{
  font-size: 1.5em;
  padding-left: 10px;
  margin-bottom: 7px;
  border-left-width: 5px;
  border-left-color: #990066;
  border-left-style: solid;
}

2. Styles the news headers.

[style.css]

#main header{
  padding-left: 10px;
  margin-bottom: 10px;
  border-top-width: 1px;
  border-top-color: #A6A6A6;
  border-top-style: dashed;
  border-bottom-width: 1px;
  border-bottom-color: #A6A6A6;
  border-bottom-style: dashed;
}

3. Styles the table of recruit application page(recruit.html).

[style.css]

#main2 table{
  border-top-width: 1px;
  border-top-color: #A6A6A6;
  border-top-style: solid;
  border-left-width: 1px;
  border-left-color: #A6A6A6;
  border-left-style: solid;
  margin: 0px;
  padding: 0px;
  border-collapse: collapse;
}
#main2 th, #main2 td{
  border-right-width: 1px;
  border-right-color: #A6A6A6;
  border-right-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #A6A6A6;
  border-bottom-style: solid;
  margin: 0px;
  padding: 5px 10px;
}
#main2 th{
  width: 150px;
}
#main2 td{
  width: 410px;
}

In the next week, you will learn the layouting the HTML documents. "Floating"