CSS - Properties

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

#mystyle { background-color: #000000; }

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.

174

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 term "box model" is used when talking about design and layout.

The background-image Property

Background-image can be set not only for the whole page, but for individual elements, as well. To specify more than one image, just separate the URLs with commas.

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

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.

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.

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

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 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 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 repeat-y will repeat a background-image only vertically. If you want the image to be shown only once, use the no-repeat value.

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 background-color Property

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

The background-image Property

The background-image property sets one or several background images in an element. The url specifies the path to the image file. Both relative and absolute paths are supported. 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.

Border Color

The border color of the element can be defined using a color name, RGB, or Hex values. None of the border properties will have any effect unless the border-style property is set.

The caption-side Property

The caption-side property specifies the position of a table caption. The values can be set as top or bottom.

The Background Color Values

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

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

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; } If one of the property values are missing, the default value for the missing property will be inserted, if any.

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.

Border Width

The properties for the border can be set separately. The border-width property specifies the width of the border. None of the border properties will have any effect unless the border-style property is set.

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.

Total Height of an Element

The total height of an element is calculated the same way as the width. To summarize, Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Width and Height Measurement

The width and height of an element can be also assigned using percents.

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

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

CSS Width and Height

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

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.

Total Width of an Element

When working with boxes, it is important to understand how the total width of an element is calculated. 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.

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.

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.

Make the cursor appear as a crosshair on all links of the web page:

a { cursor: crosshair; }

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

auto

When setting a background image, which property is obligatory?

background-image

Fill in the blanks:

body { background-image: url('1.png'); }

Fill in the blanks:

body { background-image:url("sample.png"); background-repeat :repeatx;} a:hover { text-decoration :underline; color: #000000; cursor: crosshair; }

The properties regarding table borders are:

border-spacing, border-collapse

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

border: none;

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

box

Fill in the blanks to position the caption of the table at the bottom:

caption { caption-side: bottom; }

What value of the cursor property displays a plus icon?

crosshair

Which property allows to change the style of the mouse cursor?

cursor

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

div { border: none; width: 100 px; height: 50 px; }

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

inherit

How do you make a list not display bullet points?

list-style-type: none

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

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

p { cursor: pointer; }

The background color of the content also covers:

padding

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: 10 px 5 px 15 px 10 px;

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

psuedo

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

scroll

The three properties describing the border are:

size, style, and color

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

table { empty-cells: hide; }

list-style-type applies to:

the bullets or numberings of the list

In what order do the properties work in the box?

top->right->bottom->left

Fill in the blanks:

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

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

url

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

url("pix/weave1.png")