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.
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.
Width and Height Measurement
The width and height of an element can be also assigned using percents.
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; }
Which property allows to change the style of the mouse cursor?
cursor
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
The background color of the content also covers:
padding
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
Of what type are the :link, :visited, :active and :hover selectors?
psuedo
What is the correct format for the image path of the background-image property:
url("pix/weave1.png")
The Background Color Values
The color of the background can be defined using three different formats: a color name, hexadecimal values, and RGB.
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.
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 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
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 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
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; }
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; }
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;
