TIL; favicon| tables| difference between internal and external CSS styles| Lists

Keziah Devor — Thu, 15 Dec 2022 07:55:12 +0000

Favicon; the small image displayed next to the page title in the browser tab.

Example : <link rel="icon" type="image/jpeg" href="./Mavensey.jpeg"/>

Tables (<table>);

The table tag helps to insert tables in a document(data in rows and columns). Table values include:

<th> which define table headers
<tr> which define table rows, and
<td> which define the table data in a cell.
<thead>
<tbody>
<tfoot>
Table size

Styling the size of a single cell, affects the styling of all the cells in the column of that cell. The width of a cell <td> is specified in percentages.

The height of a row <tr> is specified in pixels.

Column span colspan

Row span rowspan

Table caption <caption>

Tables usually need styling(borders) to clearly separate the various cells.

Border-collapse: separate
Border-collapse
Border-spacing
Border-radius
Border-color
Border-style
Border-width
Internal CSS style is defined using a style tag in an html file.
External CSS style is defined in a separate css file and linked to the html file using the link tag.

Padding and spacing

Padding properties include; padding-left , right, top, bottom

Cell Spacing(border-spacing) is the space between the cells

Zebra stripes is a stylistic effect in a table that can easily be achieved using the ‘nth child’ selector.

The ‘nth child(even or odd)’; is a css selector that enables you to select an html element based on its position within its parent.

Colgroup (<colgroup>): this allows a user to efficiently style a number of cells in a column in a particular way. This tag is not always reliable.

NB: Rowgroups do not exist.

Lists

Unordered HTML lists (<ul>); Allows a user to add lists to an html document when there is no required order for the list items.

Ordered HTML lists(<ol>); Allows a user to add lists to an html document in an ordered manner.

List item(<li>;Allows the user to state the list data/particular list item

Description list <dl>; this is used to specify a list of items and their definitions.
Description term <dt>; specifies the specific term to be defined
Description definition <dd>; the definition of the term.

List-style-type; Helps the user to specify the list style in a list.

The list style types options include disc, circle, square and none, with disc being the default style type.

Nested lists; these are lists within a list.

The type attribute; allows the user to specify the type of numbering in an ordered list. Type attribute styles include <type="1">; which specifies numbers

                                    `<type="i">`; which specifies lowercase roman numerals

                                    `<type="I">`; which specifies uppercase roman numerals

                                    `<type="a">`; which specifies lowercase letters

                                    `<type="B">`; which specifies uppercase letters

TIL; background-repeat | background-size | margin & padding | p tag behavior

Keziah Devor — Mon, 05 Dec 2022 09:56:33 +0000

Background-Repeat

Background-Repeat is the feature where images in the background are repeated because these images do not stretch to cover the whole surface area of the text/paragraph.
To disable background repeat …(continue this)
here are the values that background-repeat accepts:
- no-repeat ; this disables background repeating completely
- repeat-x;this enables background repeating horizontally
- repeat-y;this enables background repeating vertically
- repeat ; this enables the background repeating both vertically and horizontally, this is the default background-repeat value.

Importance of single and double quotes around style values in an in-line style property

Single quotes are introduced in an in-line style property which already has double quotes to prevent the browser from misinterpreting the beginning of the second double quote as the end of the first. For instance;

    style="font-family:"verdana""

In the instance above, the browser considers the double quotes before ‘verdana’ as the closing quote.

style="font-family:'verdana'"

Introducing single quotes within the double quotes helps the browser to correctly interpret the value the way the programmer intends.

Background-size

The default value for background-size is ‘auto’.

Other values that can be used to resize a background image include;

Contain: This value spreads the background image in a way that, the full image is visible in the background.
Cover: This value spreads the background image to cover the whole background, irrespective of whether the full image is displayed or not.

Margin and Padding

The margin is the space around the border of a content.
Padding denotes the space around a content, within the border.

                                 margin
            |---------------------------------------------------|
            |                    padding                        |
margin      |   padding         text content       padding      |      margin
            |                    padding                        |
            |---------------------------------------------------|
                                  margin

Text decoration

Default value for a text decoration is ‘none’

Other values include ‘underline’, ‘strikethrough’, ‘overline’ , ‘line-through’.

Abbreviation tag ( )

This tag allows the full meaning of an abbreviation to pop up when the abbreviation is hovered over. The user specifies meaning using the title attribute.

p tag behavior when it has nested heading tags

the browser automatically closes the p tag, when you place nested h1 - h6 tags within it. strange behavior, but it’s good to keep in mind so your css doesn’t cause you to pull your hair out.

questions

what is the default value of the background repeat property in css?
list the possible values that the background-repeat CSS property accepts
what are the possible values for the background-size property? and what effect do they have on the background?
what is the default background-size value?

DEV Community: Keziah Devor