SH1802

CSS Properties (Part 2)

I. CSS Box Model Property
A. The CSS Box Model
• All HTML elements can be considered as boxes. The CSS box model represents the design
and layout of the site. It consists of margins, borders, paddings, and the actual content.
• The properties work in the same order. top, right, bottom, and left.
• Every element on the webpage is a box.
• CSS uses the box model to determine how big the boxes are and how to place them.
B. Total Width of an Element
• It is important to understand how the total width of an element is calculated when working
with boxes.
• The total width of an element is the sum of left and right margins, left and right borders,
left and right paddings, and the actual width of the content.
C. Total Height of an Element
• The total height of an element is calculated the same way as the width.

II. Border Properties

A. The border Property
• The CSS border property allows you to customize the borders of HTML elements.
• In order to add a border to the element, you need to specify the size, style, and color of the
border.
• The example below shows how to add a solid green border to the paragraph.
o The HTML:
<P>This is an example of a solid border.</P>

o The CSS:
P {
padding:
10px;
border: 5px
solid green;
}
B. Border Width
• The properties for the border can be set separately. The border-width property specifies
the width of the border.
o The HTML:
<P CLASS="first">
Border width of this paragraph is set
to 2px.
</P>
<P CLASS="second">
Border width of this paragraph is set
to 5px.
</P>

08 Handout 1 *Property of STI

 [email protected] Page 1 of 10
 SH1802

o The CSS:
P.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
P.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}

C. Border Color
• The border color of the element can be defined using a color name, RGB, or Hex values.
o The HMTL:
<P CLASS="first">
Border color has been created using <strong>color name.</strong>
</P>
<P CLASS="second">
Border color has been created using <strong>Hex values.</strong>
</P>
<P CLASS="third">
Border color has been created using <strong>RGB values.</strong>
</P>
o The CSS:
P.first {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: blue;
}
P.second {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: #FF6600;
}
P.third {
padding: 10px;
border-style: solid;
border-width: 2px;
border-color: rgb(0, 153, 0);
}

D. The border-style Property

• The default value of border-style is none, which defines no border.
• There are various styles supported for the border-style property: dotted, dashed, double,
etc.
• The example below illustrates the differences between them.
o The HTML:
<P CLASS="none">This paragraph has no border.</P>
<P CLASS="dotted">This is a dotted border.</P>
<P CLASS="dashed">This is a dashed border.</P>

08 Handout 1 *Property of STI

 [email protected] Page 2 of 10
 SH1802

<P CLASS="double">This is a double border.</P>

<P CLASS="groove">This is a grooved border.</P>
<P CLASS="ridge">This is a ridged border.</P>
<P CLASS="inset">This is an inset border.</P>
<P CLASS="outset">This is an outset border.</P>
<P CLASS="hidden">This is a hidden border.</P>
o The CSS:
P.none {border-style: none;}
P.dotted {border-style: dotted;}
P.dashed {border-style: dashed;}
P.double {border-style: double;}
P.groove {border-style: groove;}
P.ridge {border-style: ridge;}
P.inset {border-style: inset;}
P.outset {border-style: outset;}
P.hidden {border-style: hidden;}

III. Width and Height

A. CSS Width and Height
• To style a <DIV> element to have a total width and height of 100px:
o The HTML:
<DIV>The total width and height of this element is 100px.</DIV>
o The CSS:
DIV {
border: 5px solid green;
width: 90px;
height: 90px;
}

B. Width and Height Measurement

• The width and height of an element can be also assigned using percent.
• In the example below the width of an element is assigned in percentages, the height is in
pixels.
o The HTML:
<DIV>The total width of this element is <strong>100%</strong>
and the total height is <strong>100px</strong> .</DIV>
o The CSS:
DIV {
border: 5px solid green;
width: 100%;
height: 90px;
}

C. The Minimum and Maximum Sizes

• To set the minimum and maximum height and width of an element, you can use the
following properties:
o min-width – the minimum width of an element
o min-height – the minimum height of an element
o max-width – the maximum width of an element
o max-height – the maximum width of an element

08 Handout 1 *Property of STI

 [email protected] Page 3 of 10
 SH1802

• In the example below, we set the minimum height and maximum width of different
paragraphs to 100px.
o The HTML:
<P CLASS="first">The <strong>minimum height </strong>
of this paragraph is set to 100px.</P>
<P class="second">The<strong> maximum width </strong>
of this paragraph is set to 100px.</P>
o The CSS:
P.first {
border: 5px solid green;
min-height: 100px;
}
P.second {
border: 5px solid green;
max-width: 100px;
}

IV. CSS Background Properties

A. The background-color Property
• For example:
o The HTML:
<P>The background color of this page is set to
LightSkyBlue.</P>
o The CSS:
BODY {
background-color:
#87CEFA;
}

B. The Background Color Values

• The color of the background can be defined using three (3) different formats: a color name,
hexadecimal values, and RGB.
• In the example below, the body, H1, and P elements are assigned different background
colors:
o The HTML:
<H1>This is a heading</H1>
<P>This is a paragraph</P>
o The CSS:
BODY {
background-color: #C0C0C0;
}
H1 {
background-color:
rgb(135,206,235);
}
P {
background-color: LightGreen;
}
C. The background-image Property
• The background-image property sets one (1) or several background images in an
element. Let us set a background-image for the <BODY> element.

08 Handout 1 *Property of STI

 [email protected] Page 4 of 10
 SH1802

o The CSS:
BODY {
background-image: url("CSS.png");
background-color: #e9e9e9;
}
• Background-image can be set not only for the whole page but for individual elements as
well.
• In the example below, we set a background image for the <P> element.
o The HTML:
<P>This paragraph has a background
image.</P>
o The CSS:
P {
padding: 30px;
background-image: url("green_photo.jpg");
color: white;
}

D. The background-repeat Property

• The background-repeat property specifies how background images are repeated. A
background image can be repeated along the horizontal axis, the vertical axis, both axes,
or not repeated at all.
• The repeat-x will repeat a background image only horizontally.
o The CSS:
BODY {
background-image: url("CSS.png");
background-repeat: repeat-x;
}

• The repeat-y will repeat a background image only vertically.

o The CSS:
BODY {
background-image: url("CSS.png");
background-repeat: repeat-y;
}

E. Setting the Value to Inherit

• When you set the background-repeat property to inherit, it will take the same specified
value as the property for the element's parent.
• For example, we set the body background-repeat only horizontally. If we set some
paragraph background-repeat values to be inherited, they will take the same property value
as the body element.
o The CSS:
BODY {
background-image: url("image.jpg");
background-repeat: repeat-x;
}
P {
background-image: url("image.jpg");
background-repeat: inherit;

08 Handout 1 *Property of STI

 [email protected] Page 5 of 10
 SH1802

margin-top: 200px;
padding: 100px;
}
o The HTML:
<P>This paragraph has a background
image.</P>

F. The background-attachment Property

• The background-attachment property sets whether a background image is fixed or scrolls
with the rest of the page.
• Even if an element has a scrolling mechanism, a "fixed" background does not move with
the element.
o The CSS:
BODY {
background-image: url("css_logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

G. The background-attachment Values

• You can also set the background-attachment to inherit or scroll.
• When you set the background-attachment to inherit, it will inherit the value from its parent
element.
• When you set the background-attachment to scroll, the background image will scroll with
the rest of the content.
o The CSS:
BODY {
background-image: url("css_logo.png");
background-repeat: no-repeat;
background-attachment: scroll;
}

V. CSS Styling Property

A. The list-style-type Property
• The CSS list properties allow us to set different list item markers. In HTML, there are two
(2) types of lists:
o unordered lists (<UL>) - the list items are marked with bullets.
o ordered lists (<OL>) - the list items are marked with numbers or letters.
• One of the ways is to use the list-style-type property, which can be set to circle, square,
decimal, disc, lower-alpha, etc.
o The HTML:
<OL CLASS="lower-alpha">
<LI>Red</LI>
<LI>Green</LI>
<LI>Blue</LI>
</OL>
<UL CLASS="circle">
<LI>Red</LI>
<LI>Green</LI>
<LI>Blue</li>

08 Handout 1 *Property of STI

 [email protected] Page 6 of 10
 SH1802

</UL>
<UL CLASS="square">
<LI>Red</LI>
<LI>Green</LI>
<LI>Blue</LI>
</UL>
o The CSS:
OL.lower-alpha {
list-style-type: lower-alpha;
}
UL.circle {
list-style-type: circle;
}
UL.square {
list-style-type: square;
}

B. The List Image and Position

• There are also other properties such as:
o list-style-image – this specifies an image to be used as the list item marker.
o list-style-position – this specifies the position of the marker box (inside, outside).
• For example:
o The HTML:
<P>The following list has list-style-
position: <strong>inside</strong>.</P>
<UL>
<LI>Red</LI>
<LI>Green</LI>
<LI>Blue</LI>
</UL>
o The CSS:
UL {
list-style-image: url("logo.jpg");
list-style-position: inside;
}

C. The list-style Property

• The list-style property is a shorthand property for setting list-style-type, list-style-image
and list-style-position. It is used to set all of the list properties in one declaration:
UL {
list-style: square outside none;
}

• This would be the same as the longhand version.

UL {
list-style-type: square;
list-style-position: outside;
list-style-image: none;
}

08 Handout 1 *Property of STI

 [email protected] Page 7 of 10
 SH1802

D. The Table Properties

• The border-collapse property specifies whether the table borders are collapsed into a
single border or separated as default. If the borders are separate, the border-spacing
property can be used to change the spacing.
o The HTML:
<TABLE BORDER="1">
<TR>
<TD>Red</TD>
<TD>Green</TD>
</TR>
<TR>
<TD>Blue</TD>
<TD>Yellow</TD>
</TR>
</TABLE>
o The CSS:
TABLE {
border-collapse: separate;
border-spacing: 20px 40px;
}

E. The caption-side Property

• The caption-side property specifies the position of a table caption. The values can be set
as top or bottom.
• In the example below, we specify the placement of a table caption on top.
o The HTML:
<TABLE BORDER="1">
<CAPTION>Some of Our Courses</CAPTION>
<TR>
<TH>Course name</TH>
<TH>Lessons</TH>
<TH>Quizzes</TH>
</TR>
<TR>
<TD>C++</TD>
<TD>81</TD>
<TD>363</TD>
</TR>
<TR>
<TD>JavaScript</TD>
<TD>48</TD>
<TD>144</TD>
</TR>
<TR>
<TD>HTML</TD>
<TD>38</TD>
<TD>119</TD>
</TR>
<TR>
<TD>CSS</TD>
<TD>70</TD>
<TD>174</TD>
</TR>
</TABLE>

08 Handout 1 *Property of STI

 [email protected] Page 8 of 10
 SH1802

o The CSS:
caption {
caption-side: top;
}

F. The empty-cells Property

• The empty-cells property specifies whether or not to display borders and background on
empty cells in a table. The possible values are:
o show: The borders of an empty cell are rendered.
o hide: The borders of an empty cell are not drawn.
• Here is the empty-cells property that is used to hide borders of empty cells in the <TABLE>
element.
o The HTML:
<TABLE BORDER="1">
<TR>
<TD>HTML</TD>
<TD>CSS</TD>
</TR>
<TR>
<TD>JavaScript</TD>
<TD></TD>
</TR>
</TABLE>
o The CSS:
TABLE {
border-collapse: separate;
empty-cells: hide;
}

G. Setting Styles to Links

• Links can be styled with any CSS property (e.g., color, font-family, background, etc.). In
addition, links can be styled differently, depending on what state they are in. The following
pseudo selectors are available:
o a:link - it defines the style for normal unvisited links.
o a:visited - it defines the style for visited links.
o a:activie - a link becomes active once you click on it.
o a:hover - a link is hovered when the mouse is over it.
• For example:
o The HTML:
<P><A HREF="http://www.sti.edu" target="_blank">
This link is hovered when we mouse over it.
</A></P>
o The CSS:
a:hover {
color: red;
}

H. Links' Text Decoration

• The text links are underlined by the browser by default.

08 Handout 1 *Property of STI

 [email protected] Page 9 of 10
 SH1802

• One of the most common uses of CSS with links is to remove the underline. In the
example below, the text-decoration property is used to remove the underline.
o The HTML:
<P><A HREF="http://www.sololearn.com"
target="_blank">
This link has no underline.
</A></P></A></P>
o The CSS:
A:link {
text-decoration: none;
}

I. Customizing the Mouse Cursor

• CSS allows you to set your desired cursor style when you mouse over an element. For
example, you can change your cursor into a hand icon, help icon, and much more, rather
than using the default pointer.
• In the example below, the mouse point is set to a help icon when we mouse over the span
element.
<SPAN STYLE="cursor:help;">
Do you need help?
</SPAN>

• There are numerous other possible values for the cursor property, such as:
o default - the default cursor
o crosshair - the cursor displays as crosshair.
o pointer - the cursor displays hand icon.

References:
SoloLearn. (n.d.). HTML. Retrieved on May 07, 2018 from https://www.sololearn.com/Play/HTML
Beaird, J. & George, J. (2014). The principles of beautiful web design. Collingwood, AU: SitePoint
Pty. Ltd.

08 Handout 1 *Property of STI

 [email protected] Page 10 of 10