Properties

Chapter: 23

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:

The term "box model" is used when talking about design and layout.

The CSS Box Model

In what order do the properties work in the box?

left->right->top->bottom

left->top->right->bottom

top->right->bottom->left

top->bottom->left->right

Chapter: 23

Understanding the Box Model

More on Box Models

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.

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

More on Box Models

According to the box model, every element on a web page is a:

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, border, 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.

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

Total Width of an Element

The background color of the content also covers:

margins

padding and margins

body

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.

Visual Appearance

Specify some margins and paddings for your resume elements for a better layout.

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

Total Height of an Element

Enter the total width of an element in pixels, if its width=150px, left and right paddings=5px each, border width=2px and left and right margins=5px each.

px

Chapter: 25

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:

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

HTML

The CSS:

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

CSS

Result:

Run the code and see how it works!

Border Width

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

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>

HTML

The CSS:

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

CSS

Result:

Border Color

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

The HTML:

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

HTML

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

CSS

Result:

None of the border properties will have any effect unless the border-style property is set.

Border Width

Fill in the blank to set the border style:

solid;

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:

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

HTML

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

CSS

Result:

Tweaking The Layout

Define some vertical layout options for your intro and contact information sections.

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

The border-style Property

Drag and drop from the options below to set the border style of the element to solid and make it 5px:

p {

border-style

: solid;

border-size

: 5px;

border-color

: #FF6600;

}

The border-style Property

Drag and drop from the options below to set the border style of the element to solid and make it 5px:

p {

border-style

: solid;

border-width

: 5px;

border-color

: #FF6600;

}

Chapter: 26

Width and Height

CSS Width and Height

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

The HTML:

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

HTML

The CSS:

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

CSS

Result:

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

CSS Width and Height

Fill in the blanks to set the height of the div to 50px, the width to 100px:

div {

border: none;

: 100px;

:

px;

}

Width and Height Measurement

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

The HTML:

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

HTML

The CSS:

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

CSS

Result:

Run the code and see how it works!

Width and Height Measurement

Width and height are usually expressed in:

pixels and percents

inches and centimeters

points and picas

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:

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

HTML

The CSS:

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

CSS

Result:

Run the code and see how it works!

The Minimum and Maximum Sizes

Set the minimum allowable width of the div to 200px:

div {

width:

;

}

Chapter: 27

Background-color

The background-color Property

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

The HTML:

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

HTML

The CSS:

body {
background-color: #87CEFA;
}

CSS

Result:

Run the code and see how it works!

The background-color Property

What property is used to describe the background color?

color

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:

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

HTML

The CSS:

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

CSS

Result:

Define a Background Color

Add a background color for your contact information section to visually separate it from other sections.

Run the code and see how it works!

The Background Color Values

Fill in the blanks to make the background color of the element with id="mystyle" black using hexadecimal color definition.

{

:

000000;

}

Chapter: 28

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:

body {
background-image: url("css_logo.png");
background-color: #e9e9e9;
}

CSS

The url specifies the path to the image file. Both relative and absolute paths are supported.

Result:

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.

The background-image Property

What is the correct format for the image path of the background-image property:

url("pix/weave1.png")

"pix/weave1.png"

url:pix/weave1.png

The background-image Property

What is the correct format for the image path of the background-image property:

url("pix/weave1.png")

"pix/weave1.png"

url:pix/weave1.png

background-image Property

Fill in the blanks:

body

background-image:

('1.png');

Chapter: 29

Background-repeat

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.

The CSS:

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

CSS

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

The CSS:

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

CSS

Result:

If you want the image to be shown only once, use the no-repeat value.

The background-repeat Property

Fill in the blanks to make the background image repeat along the vertical axis:

body {

background-image:

("css_logo.png");

background-

: repeat

;

}

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:

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

CSS

Result:

Run the code and see how it works!

Setting the Value to Inherit

The values that the background-repeat property accepts are: repeat, no-repeat, repeat-x, repeat-y and:

Chapter: 30

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:

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

CSS

Result:

Run the code and see how it works!

 background-attachment Property

When setting a background image, which property is obligatory?

background-position

background-repeat

background-image

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:

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

CSS

Result:

Run the code and see how it works!

The background-attachment Values

The background-attachment property accepts the following values: inherit, fixed and:

Chapter: 31

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:

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

HTML

The CSS:

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

CSS

Result:

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:

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

HTML

The CSS:

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

CSS

Result:

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

ul {
list-style: square outside none;
}

CSS

This would be the same as the longhand version.

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

CSS

Result:

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

The list-style Property

Fill in the blanks:

ul {

list-style-

type

: square;

list-style-

position

: outside;

list-style-

image

: none;

}

Chapter: 32

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:

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

HTML

The CSS:

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

CSS

Result:

Run the code and see how it works!

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:

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

HTML

The CSS:

caption {
caption-side: top;
}

CSS

Result:

Run the code and see how it works!

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

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

HTML

The CSS:

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

CSS

Result:

Run the code and see how it works!

The empty-cells Property

Fill in the blanks to hide the empty cells of the table.

table

empty-cells:

;

}

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 table layout is set to auto by default.
The example below shows the difference between auto and fixed.

The HTML:

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

HTML

The CSS:

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

CSS

Result:

Run the code and see how it works!

The table-layout Property

What is the default value of the table-layout property?

Chapter: 33

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:

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

HTML

The CSS:

a:hover {
color: red;
}

CSS

The link from the above example would look like this:

But when we mouse over it, it becomes red, as we defined in our stylesheet.

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

Setting Styles to Links

Of what type are the :link, :visited, :active and :hover selectors?

universal

E type

pseudo

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:

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

HTML

The CSS:

a:link {
text-decoration: none;
}

CSS

Result:

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

Links' Text Decoration

What value is used to remove borders of images with links?

border:

;

Chapter: 34

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

<span style="cursor:help;">
Do you need help?
</span>

HTML

Result:

Run the code and see how it works!

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:

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

The cursor Property Values

What value of the cursor property displays a plus icon?

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 style can be misleading, as well.

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

Choose your mouse cursor styles carefully.

The default Value

Drag and drop from the options below to make the cursor appear as a pointer on paragraphs:

p {

cursor

:

pointer

;

}

Chapter: 35

Module 3 Quiz

Add the padding values, so that it has 10 pixels to the top, 15 pixels to the bottom, 5 pixels to the right, 10 pixels to the left:

padding:

px

px

px 10px;

How do you make a list not display bullet points?

list: none

bulletpoints: none

list-style-type: none

list-style-type: no-bullet