***** On Monday, 9/3/18, I started learning the fundamentals of CSS on sololearn.com. *****

***** On Tuesday, 1/15/19, I completed the CSS Fundamentals course and was issued the certificate. *****

TAKE NOTE THAT THIS IS NOT A .CSS FILE BECAUSE IT WILL BE A PLAIN TEXT FILE. INSTEAD, CSS WILL BE IMPLEMENTED INTO A .HTML FILE. THIS CAN BE DONE VIA A LINK, EMBED, IMPORT AND/OR INLINE STYLES.

Module 3: Properties

I. Introducing the Box Model

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.

The image below illustrates the box model:

Take note that the term "box model" is used when talking about design and layout.

II. Understanding the Box Model

More on Box Model

Every element of the webpage is a box.

CSS uses the box model to determine how big the boxes are and how to place them.

Take note that the box model is also used to calculate the actual width and height of the HTML elements.

Total Width of an Element

When working with boxes, it is important to understand how the total width of an element is calculated.
For example, the total width of the box with paddings will be the sum of width plus padding left and padding right.

Here is another box with margins, borders, and paddings.
The total width is the sum of left and right margins, left and right borders, left and right paddings, and the actual width of the content.

Take note that when you set the width and height properties of an element with CSS, you set the widrh and height of the content area.
When setting background-color to a box, it covers the content area, as well as the padding.

Total Height of an Element

The total height of an element is calculated the same way as the width.
The example below is the same box from the previous lesson with padding, border, and margin.

To summarize, Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin =

200 + 10 + 10 + 2 + 2 + 15 + 15 = 254

III. Borders

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.

The HTML: (Code)

<p>This is an example of a solid border.</p>

The CSS: (Code)

p {
padding: 10px;
border: 5px solid green;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.1! ←

Border Width

The properties for the border can be set separately. The border-width property specifies the width of the border.

The HTML: (Code)

<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>

The CSS: (Code)

p.first {
padding: 10px;
border-style: solid;
border-width: 2px;
}
p.second {
padding: 10px;
border-style: solid;
border-width: 5px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.2! ←

Border Color

The border color of the element can be defined using a color name, RGB, or Hex values.

The HTML: (Code)

<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>

The CSS: (Code)

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);
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.3! ←

Take note that none of the border properties will have any effect unless the border-style property is set.

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.

The HTML: (Code)

<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>
<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>

The CSS: (Code)

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;}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.4! ←

Take note that in CSS, it is possible to specify different borders for different sides, using the following properties: border-top-style, border-right-style, border-bottom-style, and border-left-style for the corresponding sides.

IV. Width and Height

CSS Width and Height

To style a <div> element to have a total width and height of 100px:

The HTML: (Code)

<div>The total width and height of this element is 100px.</div>

The CSS: (Code)

div {
border: 5px solid green;
width: 90px;
height: 90px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.5! ←

Take note that the total width and height of the box will be the 90px+5px (border)+5px (border) = 100px;

Width and Height Measurement

The width and height of an element can also be assigned using percents.
In the example below, the width of an element is assigned in percentages and the height is in pixels.

The HTML: (Code)

<div>The total width of this element is <strong>100px</strong> and the total height is <strong>100px</strong>.</div>

The CSS: (Code)

div {
border: 5px solid green;
width: 100%;
height: 90px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.6! ←

The Minimum and Maximum Sizes

To set the minimum and maximum height and width of an element, you can use the following properties:

min-width - the minimum width of an element
min-height - the minimum height of an element
max-width - the maximum width of an element
max-height - the maximum height of an element

In the example below, we set the minimum height and maximum width of different paragraphs to 100px.

The HTML: (Code)

<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>

The CSS: (Code)

p.first {
border: 5px solid green;
min-height: 100px;
}
p.second {
border: 5px solid green;
max-width: 100px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.7! ←

V. background-color

The background-color Property

The background-color property is used to specify the background color of an element.

The HTML: (Code)

<p>The background color of this page is set to LightSkyBlue.</p>

The CSS: (Code)

body {
background-color: #87CEFA;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.8! ←

The Background Color Values

The color of the background can be defined using three different formats: a color name, hexadecimal values, and RGB.

In the example below, the body, h1, and p elements are assigned different background colors.

The HTML: (Code)

<h1>This is a heading</h1>
<p>This is a paragraph</p>

The CSS: (Code)

body {
background-color: #C0C0C0;
} h1 {
background-color: rgb(135,206,235);
} p {
background-color: LightGreen;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.9! ←

VI. background-image

The background-image Property

The background-image property sets one or several background images in an element. Let's set a background-image for the <body> element.

The CSS: (Code)

body {
background-image: url("http://www.sololearn.com/uploads/css_logo.png");
background-color: #e9e9e9;
}

Take note that the url specifies the path to the image file. Both relative and absolute paths are supported.

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.10! ←

Take note by default, a background-image is placed at the top-left corner of an element, and is repeated both vertically and horizontally to cover the entire element.

Background-image can be set not only for the whole page, but for individual elements, as well.
Below, we set a background image for the <p> element.

The HTML: (Code)

<p>This paragraph has a background image.</p>

The CSS: (Code)

p {
padding: 30px;
background-image: url(http://www.sololearn.com/images/tree.jpg);
color: red;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.11! ←

To specify more than one image, just separate the URLs with commas

VII. background-repeat

The background-repeat Property

The background repeat property specifies how background image 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.

The CSS: (Code)

body {
background-image: url("css_logo.png");
background-repeat: repeat-x;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.12! ←

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

The CSS: (Code)

body {
background-image: url("css_logo.png");
background-repeat: repeat-y;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.13! ←

Take note that if you want the image to be shown only once, use the no-repeat value.

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.

The CSS: (Code)

body {
background-image: url("css_logo.png");
background-repeat: repeat-x;
}
p {
background-image: url("css_logo.png");
background-repeat: inherit;
margin-top: 100px;
padding: 40px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.14! ←

VIII. background-attachment

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 doesn't move with the element.

The CSS: (Code)

body {
background-image: url("css_logo.png");
background-repeat: no-repeat;
background-attachment: fixed;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.15! ←

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.

The CSS: (Code)

body {
background-image: url("css_logo.png");
background-repeat: no-repeat;
background-attachment: scroll;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.16! ←

IX. Styling the Lists

The list-style-type Property

The CSS list properties allow us to set different list item markers. In HTML, there are two types of lists:
unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as the list item marker.
One of the ways is to use the list-style-type property, which can be set to circle, square, decimal, disc, lower-alpha, etc.

The HTML: (Code)

<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>
</ul>
<ul class="square">
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

The CSS: (Code)

ol.lower-alpha {
list-style-type: lower-alpha;
}
ul.circle {
list-style-type: circle;
}
ul.square {
list-style-type: square;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.17! ←

Take note that some of the values are for unordered lists, and some for ordered lists.

The List Image and Position

There are also other list properties, such as:
list-style-image - specifies an image to be used as the list item marker
list-style-position - specifies the position of the marker box (inside, outside).

In the example below, we use an image as the list item marker, and specify the position to be inside of the content flow.

The HTML: (Code)

<p>The following list has list-style-position: <strong>inside</strong>.</p>
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ul>

The CSS: (Code)

ul {
list-style-image: url("logo.jpg");
list-style-position: inside;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.18! ←

Take note that the "list-style-position: outside" is the default value.

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:

Example Syntax:

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;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.19! ←

Take note that if one of the property values are missing, the default value for the missing property will be inserted, if any.

X. Styling the Tables

The Table Properties

The look of an HTML table can be greatly improved with CSS.

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.

The HTML: (Code)

<table border="1">
<tr>
<td>Red</td>
<td>Green</td>
</tr>
<tr>
<td>Blue</td>
<td>Yellow</td>
</tr>
</table>

The CSS: (Code)

table {
border-collapse: separate;
border-spacing: 20px 40px;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.20! ←

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 to top.

The HTML: (Code)

<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>

The CSS: (Code)

caption {
caption-side: top;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.21! ←

The empty-cells Property

The empty-cells property specifies whether or not to display borders and background on empty cells in a table.

Possible values:
show: the borders of an empty cell are rendered
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.

The HTML: (Code)

<table border="1">
<tr>
<td>HTML</td>
<td>CSS</td>
</tr>
<tr>
<td>JavaScript</td>
<td></td>
</tr>
</table>

The CSS: (Code)

table {
border-collapse: separate;
empty-cells: hide;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.22! ←

The table-layout Property

The table-layout specifies how the width of table columns is calculated. The possible values are:

auto - when column or cell width are not explicitly set, the column width will be in proportion to the amount of content in the cells that make up the column.
fixed - when column or cell width are not explicitly set, the column width will not be affected by the amount of content in the cells that make up the column.

The HTML: (Code)

<p>Table-layout is set to <strong>auto</strong>
<table class="auto">
<tr>
<td width="10%">500.000.000.000.000</td>
<td width="90%">20.000</td>
</tr>
</table>

<p>Table-layout is set to <strong>fixed</strong>
<table class="fixed">
<tr>
<td width="10%">500.000.000.000.000</td>
<td width="90%">20.000</td>
</tr>
</table>

The CSS: (Code)

table {
border-collapse: separate;
width: 100%;
border: 1px solid gray;
} td {
border: 1px solid gray;
}
table.auto {
table-layout: auto;
}
table.fixed {
table-layout: fixed;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.23! ←

XI. Styling the Links

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:

a:link - defines the style for normal unvisited links
a:visited - defines the style for visited links
a:active - a link becomes active once you click on it
a:hover - a link is hovered when the mouse is over it

The example below creates a link that will change the style when the mouse is moved over it.

The HTML: (Code)

<p><a href="http://www.sololearn.com" target="_blank">
This link is hovered when we mouse over it.
</a></p>

The CSS: (Code)

a:hover {
color: red;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.24! ←

Take note when setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Links' Text Decoration

By default, text links are underlined by the browser.
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.

The HTML: (Code)

<p><a href="http://www.sololearn.com" target="_blank">
This link has no underline.
</a></p>

The CSS: (Code)

a:link {
text-decoration: none;
}

Result with HTML and CSS:

→ CLICK HERE FOR RESULT OF EXAMPLE_3.25! ←

Take note the following properties are used to control the look and feel of links:
border:none - removes border from images with links
outline:none - removes the dotted border on clicked lines in IE

XII. Customizing the Mouse Cursor

Setting the Mouse Cursor Style

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 pointer is set to a help icon when we mouse over the span element:

Syntax:

Result:

Do you need help?

The cursor Property Values

There are numerous other possible values for the cursor property, such as:

default - default cursor
crosshair - cursor displays as crosshair
pointer - cursor displays hand icon

The list of possible values is quite long. The image below demonstrates the various available styles:

Take note that CSS allows you to set your desired cursor style when you mouse over an element.

The default Value

Usually, the appearance of the mouse cursor is altered to provide a more interesting experience for website visitors. However, choosing the wrong cursor can be misleading, as well.

For example, if the cursor value is set to default, users may not "see" the links.

Take note to choose your mouse cursor styles carefully.

Go to top
« Previous 1 2 3 4 5 6 7 8 Next »