Which CSS property manipulates the amount of space between cell borders in a table?

Introduction to HTML/CSS If you are the content provider, read HTML. If you are the graphic designer, read CSS. If you are a programmer and want to add dynamic effects to your web page, read JavaScript. But if you operate in OMO (one-man-operated) and are expected to create a reasonably good-looking website, you need to understand HTML, CSS and JavaScript. This is the reason that I combine both the HTML and CSS in this article as they are inseparable. Nội dung chính Show Introduction to HTML/CSS Introduction to HTML HTML By Examples HTML Basics Introduction to CSS CSS By Examples CSS Style Properties What CSS property is used for space inside the border? Which CSS property indicates the amount of space between the border of the element and its contents? Which CSS property controls the spacing between elements? How can you increase the distance between a cell border and a table border? To create an OMO website, I suggest that: Understand HTML, CSS and JavaScript thoroughly. Pick an authoring tool: Use Dreamweaver if you can afford. Otherwise, find a free source-code editor (such as VS Code, Sublime Text, Sublime Text, NotePad++). For programmers, Eclipse/NetBeans/VSCode are good choice for HTML/CSS/JavaScript as they perform syntax checking and provide auto-code-complete. Design and organize your page. Decide on the look and feel of your website. How many columns? What are the major sections (e.g., header, navigation menu, main content, sidebar, table of content, footer)? Do you need a navigation menu or panel? What is your theme (colors, fonts)? And so on. Take a close look at your favorite websites!!! CSS is humongous and complex! You can't invent this wheel! Use F12 Debugger to inspect HTML/CSS of your favorite websites. Use a CSS framework, such as BootStrap, to jump-start your design. Start with an initial CSS design. Website design begins with CSS, NOT HTML?!. Work on your CSS: Partition your web page into logical section via (or HTML5' , Create sub-classes for common styles, such as layout out tables and images and special effects (e.g., ".highlight", ".underline", ".center"). They could be used in and . There are many good and free CSS templates (or web templates) available online (just google "CSS Templates" or "Web templates"). Pick one that meets your taste to model after. You can also look at the CSS of any website that you find interesting. Be aware of the Intellectual Property Right, do not use any images or graphics unless they are in the public domain. It is extremely easy to create one yourself with an imaging tool, such as PhotoShop, Element, Illustrator or even Paint. Use a CSS framework, such as BootStrap; and pick your favorite design from the samples. Write your HTML pages. You may need to modify the CSS as you go along. The most challenging thing for an OMO web author is that he has to be concerned about both the contents and appearances at the same time, and can lose focus at times! Repeat the previous steps until you are happy with your page's look and feel, layout, and most importantly, the contents - try not to create yet another insignificant website. I wrote the above many years ago while creating these web pages (You can check out my CSS). Today, I would recommend that you learn the basics of HTML/CSS, but quickly jump into a framework such as BootStrap to produce professional-looking web pages. You can't write better than these people! Introduction to HTML What is HTML (HyperText Markup Language)? HTML is the language for publishing web pages on the WWW (World-Wide Web, or World-Wide Wait?). HTML is a Document Description Language (aka Document Markup Language). HTML is the standard markup language for documents designed to be displayed in a web browser. HTML is NOT a programming language like C/C++/C#/Java, which is used to implement programming algorithm. An HTML document is a text document, and it is human-readable. Today, HTML works together with CSS (Cascading Style Sheets) (for layout) and JavaScript (for programming). HTML Versions HTML Draft (October 1991): Tim Bernes-Lee (of CERN) proposed the early HTML (with 18 tags) for sharing of document in a hypertext system. HTML 2.0 (November 24, 1995): Published as IETF RFC 1866. HTML 3.2 (January 14, 1997): Published as W3C HTML 3.2 Recommendation. HTML 4.0 (December 1997): Published as W3C HTML 4.0 Recommendation, with strict, transitional and frameset. In December 24, 1999, HTML 4.01 was published as the final HTML specification by W3C. In May 2000, HTML 4.01 Strict as published as ISO/IEC International Standard 15445:2000. XHTML 1.0 (January 2000): W3C considered HTML 4.01 as the final HTML, and moved on to develop XHTML 1.0 with stricter rules and syntaxes, followed by XHTML 2.0. XHTML 2.0, although theoretically elegant, is impractical as it is not backward compatible with HTML4/XHTML1.0. A rebel group called WHATWG (Web Hypertext Application Technology Working Group) continued to work on extending HTML with more features in a backward-compatible manner. In 2004, WHATWG released HTML5. By 2007, HTML5 has captured the attention of the developers. W3C decided to abandon the XHTML 2.0 and embraced the HTML5. HTML 5 (October 28, 2014): HTML 5 was published as W3C Recommendation, followed by HTML 5.1 on November 1, 2016, and HTML 5.2 in December 14, 2017. On 28 May 2019, the W3C announced that WHATWG would be the sole publisher of the HTML and DOM standards. Today, the prevailing specifications are HTML5 (@ https://html.spec.whatwg.org/multipage/). Nonetheless, the most interesting thing about standards is that nobody really follows them strictly. Every browser (Chrome, Firefox, Opera, Safari and Internet Explorer) has its own variations and support the standards to various extents (so as to out-do others). Markup Tags HTML uses markup tags, such as (for Paragraph), to (for Heading Level 1 to 6), There are two sections in the document: HEAD and BODY, marked by ... and ... tags, respectively. In the HEAD section: The element (Line 4) specifies the character encoding scheme of the document. Today, virtually all (English) HTML documents are encoded using the UTF-8 character encoding scheme, which is compatible with ASCII code for English alphabets and allow you to include other Unicode characters (such as Chinese, Japanese and Korean) efficiently. When saving your file, you need to choose "UTF-8 encoding" in the "save-as" dialog menu. The element (Line 5) provides a descriptive title to the page. The browser displays the title on the title-bar of the tab/window. In the BODY section: The ... container tags (Line 8) mark the enclosing texts as Level-1 Heading. There are six levels of heading in HTML, from ... (largest) to ... . Line 11 uses a ... (Heading Level-3). The standalone element (Line 9), which does not enclose text content, draws a horizontal rule (or line). The ... container tags (Line 10 and 12) mark the enclosing texts as a paragraph. ... is the most frequently-used tag in HTML. The ... tags (nested under the ... in Line 10) specify "strong emphasis" for its content - rendered in bold by the browser. Similarly, the nested ... tags (Line 12) specify "emphasis" rendered in italic; and ... (HTML 5) requests for highlight. View Page Source You can read the HTML source code by right-clicking on the page and select "View Source" (or "View Page Source", or "Show Page Source"). Try it out. Note: For macOS's Safari, you may need to enable "Show Page Source" via "Preferences" ⇒ Advanced ⇒ "Show Develop menu in menu bar". Don't Load the Cached Page (Ctrl-F5)! Most browsers cache web pages (and the associated images, style sheets, JavaScripts) to boost the speed for web surfing. When you modify and reload a page (via the refresh key F5), the browser might retrieve the un-modified cache copy. To force the browser to reload the page (and all its associated resources) from the source, hit Ctrl-F5. Most Frequently-Used HTML Elements The most frequently-used HTML elements are: block elements: (paragraph), (line break), to (heading level 1 to 6), (horizontal rule), (unordered list), (ordered list). inline elements: (bold), (italic),
2.	CSS3
3.	JavaScript

How it Works?

1. A table, consisting of rows of cells, can be marked via ....
2. A HTML table is row-centric. You shall first mark a row via ..., and then mark the cells of the row via ... (for header cell) or ... (for details cell).
3. The ... element can be nested under to provide a caption for the table.
   Image is marked via the

   External CSS and JavaScript are often used in an HTML document. Line 6 includes an external CSS file; and line 7 includes an external JavaScript file.

   HTML Document Validator

   You can submit your HTML document to the W3C Online Validator (@ https://validator.w3.org/) for validation.

   Debugging HTML

   F12 Debugger (Web Developer Tools)

   Recall that you can right-click ⇒ View Source (or View Page Source) to inspect the raw HTML markups.

   In most of the browsers, you can push F12 to get into Web Developer Tools, which support debugging HTML, CSS, JavaScript, DOM and more.

   To debug HTML:

   1. Choose the "Inspector" panel to view your HTML codes.
   2. To inspect an element, click on the "picker" and point to the HTML element of interest. You can check/modify the "Style", "Layout", "DOM" and "Events" (on the right panel) associated with the selected element.

   Try it out on the earlier examples.

   HTML Basics

   HTML Tags, Attributes and Elements

   HTML Tags

   An HTML opening tag is enclosed by a pair of angle brackets in the form of (e.g.,

   , ). The tag-name shall be in lowercase.

   Tag's Attributes

   Attributes, in the form of name="value" pairs can be included in the opening tag to provide additional information about the element.

   Example 1: In , the attribute lang="en" specifies the natural language for this document.

   Example 2: In , the attribute charset="utf-8" specifies the character encoding scheme.

   Example 3: An

   >

   The attribute "src" specifies the source-URL of the image; "alt" specifies an alternate text, if the image cannot be displayed; "width" and "height" specify the width and height of the image displayed area.

   Some of the attributes are mandatory (e.g., the "src" and "alt" attributes of the

   Alternatively, you can also close a standalone element with a matching closing tag. This is cumbersome but consistent in syntax to the container element. For example,

   HTML5 no longer enforces the above rules. Today, most developers omit the trailing '/' for brevity, e.g.,
,

   ---

   .
   HTML4 has these void elements: , ,
,
   ,

   ---

   ,

   Note: HTML4/XHTML1 require an additional attribute language="JavaScript" in the tag is needed, even though there is no content within . We usually place the JavaScript after CSS, as the JavaScript may use the CSS.

   The Element

   The ... element defines the BODY section of an HTML document, which encloses the content to be displayed on the browser's window.

   The tag has the following optional presentation attributes. All of these presentation attributes are concerned about the appearance instead of the content, and have been deprecated in HTML 4 in favor of style sheet. However, many older textbooks present them in Chapter 1. Hence, I shall list them here for completeness. BUT do not use these attributes. I shall describe how to control the appearance of using CSS very soon.

   • text="color": color of body text.
   • bgcolor="color": background color.
   • background="url": URL of an image to be used as the background.
   • link="color": color of un-visited links.
   • vlink="color": color of visited links.
   • alink="color": color of active (clicked) links.

   For example:

   
   
     
   Hello
     Google
   
   

   The foreground color (of the texts) is "blue", on background color of "lightblue". You can set different colors for the three types of links via attributes "link" (for un-visited links), "vlink" (for visited links), and "alink" (for active link - the "alink" color shows up when you click on the link).

   HTML Comment

   HTML comments are enclosed between . Comments are ignored by the browser. You need to look into the HTML codes (via "View Source" or "View Page Source") to read them. Comments are extremely important in programming to explain and document a section of programming codes and logic. HTML documents are textual and self-explanatory, comments are less important (but still nice to have) to describe the various part of the documents.

   Comments are also useful in temporarily disable a certain part of the HTML codes during development.

   You can comment out an entire elements, e.g.,

   But you cannot place comment inside a tag, e.g.,

   >hello, world

   Block Elements vs. Inline Elements

   Elements can be classified as:

   1. Block Elements: A block element (such as

      ,

      to

      and

      ) starts on a new line, takes the full width, and ends with a new line. It is rectangular in shape with a line-break before and after the element.

   2. Inline Elements (or Character Elements): An inline element (such as , , and ) takes up as much space as it needs. It does not force a line-break before and after the element, although it can span a few lines.

   In brief, a block element is always rectangular in shape, while an inline element spans a continuous run of characters.

   Block Elements

   Paragraph

   ...

   Function: When the browser reads a

   tag, it breaks to a new line, and skips some white spaces. For example,

   This is a paragraph of texts.

   Older HTML documents often omit the closing

   , which is a bad practice, not recommended, and disallowed in XML/XHTML.

   To create an empty paragraph, you need to use

    

   which encloses a non-breaking space. This is because browsers typically ignore
   .

   Line Break
(Standalone)

   Function: Instruct the browser to break to a new line, without skipping white spaces as in

   . Note that the line breaks in the HTML codes are treated as white spaces and do not translate to new lines in the display. Hence, you have to insert the
manually. For example,

   This
   paragraph
   with a
   line-break
   in between.

   This paragraph
   with a line-break in between.

   Heading Level 1 to 6

   ...

   to

   ...

   Function: Establish six levels of document headings.

   is the highest (with the largest font size) and

   is the lower. Headings are usually displayed in bold, have extra white spaces above and below. For example,

   This is Heading Level 1
   This is Heading Level 2
   This is Heading Level 3
   This is Heading Level 4
   This is Heading Level 5
   This is Heading Level 6
   This is a paragraph

   Horizontal Rule

   ---

   (Standalone)

   Function: Draw a horizontal line (or rule). By default, the rule is full width (100%) across the screen, 1 point in size, and has a shading effect for a 3D appearance. For example,

   Heading
   
   Discussion begins here...

   Pre-Formatted Text

   ...

   Function: Texts enclosed between

   ...

   container tags are treated as pre-formatted, i.e., white space, tabs, new-line will be preserved and not ignored. The text is usually displayed in a fixed-width (or monospace) font.

   ...

   is mainly used to display program codes. For example, my favorite Java's "Hello-world":

   public class Hello {
      public static void main(String[] args) {
         System.out.println("Hello");
      }
   }

   public class Hello {
      public static void main(String[] args) {
         System.out.println("Hello");
      }
   }

   Without the

    tag, the entire program will be shown in one single line.
    Quote 
   ...
   Function: Mark out a block of quote. Browsers typically indent the entire block to the right. For example,
   Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
   sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
   Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi 
   ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
   reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui 
   officia deserunt mollit anim id est laborum.
   Division
   ... and Span ...
   The 
    block elements, together with its inline counterpart , are extensively used in the modern web pages to mark out a rectangular block or inline span of text. The 
    and , by itself, does not do anything. Unlike elements such as 
   , 
    and , which possess certain visual properties, 
    and  do not have any inherent visual properties. They are simply markers and to be used together with CSS for
   applying custom formatting style. We shall describe them later in the CSS section.
   Best Practices:
   Notes: With the introduction of many new semantic block elements in HTML5, such as 
   , 
   Avoid deep nested container layouts using 
   . "should be not nested deeper than 6 layers".
   Use as little HTML elements as possible (to increase the content to tag ratio and reduce page load).
   HTML5's New Semantic Block Elements
   Before HTML5, we rely on the all-purpose generic container 
    elements to structure a document into various sections and apply the formatting style, For example,
   
     ......
   
    
   
     ......
   
    
   
     ......
   This is less than
   desirable, as 
    elements do not provide semantic information about the sections.
   HTML5 added many semantic block elements, which extends 
    to structure a document. They are: 
   , 

   Example:

   <img src="logo.gif" alt="Logo" title="Logo" width="200" height="100">

   Attributes:

   • src="imageUrl" (required): gives the URL of the image.
   • alt="text" (required): alternative text to be displayed if the image cannot be displayed.
   • width="n|n%", height="n|n%": specify the width and height of the image display area (in pixels or percentage). Browsers use these values to reserve space for the image (before the image is downloaded) and continue rendering the rest of the contents. You can also use the width and height to scale an image. This is not recommended because scaling-up results in a blur image and scaling-down is a waste of bandwidth.
I recommend that you use the width and height tags for images, so that the browser can reserve spaces for the images. This is more efficient and could avoid a jerky display if you page contains many images. You can find out the width and height of an image easily by checking the "Properties" of the image.
   • title="tooltip-text": the attribute title is applicable to most of the HTML elements for you to provide the tool-tip text.

   Many attributes were added in HTML5. Some of them will be discussed in the later sections.

   • crossorigin="anonymous|use-credentials":
   • referrerpolicy="no-referrer|no-referrer-when-downgrade|origin|origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url":
   • decoding="sync|async|auto":
   • fetchpriority="high|low|auto":
   • loading="eager|lazy":
   • sizes=list:
   • srcset=list:

   The following attributes were deprecated in HTML5: align="top|middle|bottom|left|right", border, hspace|vspace, longdesc, name.

   Using Image as Hyperlink

   To use an image as a hyperlink, put the image tag

   click the above image to visit us

   Image used as hyperlink anchor automatically gets a border. The color of the border is given in the link (unvisited), vlink (visited), alink (active) attributes of the tag (or the a:link, a:visited, a:hover, and a:active CSS properties - to be discussed later).

   Introduction to CSS

   Why Style Sheet?

   The original aim of HTML is to let the content providers concentrate on the contents of the document and leave the appearance to be handled by the browsers. Authors markup the document contents using markup tags (such as

   ,

   ,

   ,

   ,

   Inline, Internal and External Styles

   There are three places where you can define style rules:

   1. Inline Style: Included inside a particular HTML opening tag's via attribute style="style-rules". The rules are applicable to that particular HTML element only.
   2. Internal (Embedded) Style Sheet: Embedded inside the tags in the HEAD section of the HTML document. The styles are applicable to that entire document.
   3. External Style Sheet (Recommended): Stored in an external file, which is then linked to HTML documents via a element in the HEAD section. The same external style sheet can be applied to all HTML pages in your website to ensure uniformity in appearance.

   Inline Styles

   To apply inline style to an HTML element, include the list of style properties in the style attribute of the opening tag. For example,

   
   
   >
     
   style="font-size:16px; font-family:monospace">This paragraph uses 16px monospace font.
     
   This paragraph uses default font.
     
   This paragraph uses style="font-size:12px">12px inside this span
     but default font size here.
   
   

   This paragraph uses 16px monospace font.

   This paragraph uses default font.

   This paragraph uses 12px inside this span but default font size here.

   Take note that the name and value are separated by colon ':', and the name:value pair are separated by semicolon ';', as specified in the CSS syntax.

   The scope of an inline style is limited to that particular element. Inline style defeats the stated goal of style sheets, which is to separate the document’s content and presentation. Hence, inline style should be avoided and only be used sparsely for touching up a document, e.g., setting the column width of a particular table.

   Internal (Embedded) Styles

   Embedded styles are defined within the tags in the HEAD section. For example,

   
   
   
     
   
   
     
   H2 is white on black
     
   This paragraph is normal.
     
   class="monospace">This paragraph uses 16-px monospace font.
     
   class="f20px">This paragraph uses 20-px font.
   
   

   • The scope of the embedded styles is the current HTML document.
   • Embedded styles separate the presentation and content (in the HEAD and BODY sections) and can be used if page-to-page uniformity is not required. That is, this set of styles is used for only one single page!?

   NOTE: HTML4/XHTML1 require an additional attribute type="text/css" in

   @import is a CSS directive (part of CSS language). It can also be used in one CSS file to include rules from another CSS file, for example,

   @import '/css/more-styles.css';
   
   
   @import 'https://fonts.googleapis.com/css?family=Open+Sans';
   
   
   @import '/css/print-styles.css' print;
   @import '/css/landscape.css' screen and (orientation:landscape);

   Priority

   Inline styles have the highest priority, followed by internal styles, and followed by external styles.

   Inheritance

   Many (but not all) CSS properties, such as color and font-family, affect not only the elements selected by the selector, but also inherited by their descendants.

   Inheritance is a big time-saver for designing styles. For example, you set the default color and font-family in the element, which will then be inherited by all the elements. You then override the default properties for specific elements, if needed.

   Some properties (such as border, margin, padding, width, height, background-color) are not inherited. This is for good reason. For example, if border is defined for

   and is inherited, then all descendants (
   • ) will be drawn with border!

     Special Property Value: inherit

     You can use a special property-value called "inherit" to inherit the property from its ancestor. For example,

     
     
     
     
     
     
     The border property is not inherited.
     The border property is inherited.
     
     

     Although the first is nested under the

     tag, the border property is not inherited from the ancestor. That is, you will not see a border around the 's content. We can force the inheritance by assigning a special value "inherit" as shown in the Class Selector .inherit-border.

     Resolving Conflicting Rules

     Style Conflict

     Style conflict on an element arises:

     1. A property is inherited from multiple ancestors.
     2. More than one rules are applicable to the element. For example, Tag-selector p, Class-selector .red and ID-selector #comment are all applicable to element

        .

     Nearest Ancestor Wins

     If a property is not defined for an element and is inheritable, it will be inherited from the nearest ancestor.

     Specificity

     Specificity means that "the more specific the selector, the stronger the rule". For example,

     
     
     
     
     
     
     id="id1">Paragraph with id of "id1" (green)
     id="id2">Paragraph with id of "id2" (blue)
     class="red">Paragraph of class of "red" (red)
     id="id1" class="red">Paragraph with id of "id1" and class of "red" (green)
     Paragraph without id and class with default colors (black)
     
     

     The p Tag-selector is the most general, which selects all the

     elements; the p.red Class-selector selects a class of

     elements with attribute class="red"; the p#id1 and p#id2 ID-selectors select only one element each with a unique id value. The ID-selector is the most specific (and takes precedence); followed by Class-selector; and followed by the general Tag-selector.

     Locality

     If the "Law of Specificity" cannot resolve the conflict, apply the "Law of Locality". The style-rule that read in last by the browser takes effect. In the above example, there are two ID-selector for id1, the latter takes effect.

     The inline style (applied to a specific tag via style attribute) overrides the internal style (defined in

     • A for Apple
     • B for Boy
   • ::selection (CSS3): Select the user-selected-text on the screen. You are only allow to set the color and background-color properties in the selector. For example,

     p::selection {  
       color: red;
       background-color: black;
     }

   Attribute Selectors

   • T[att]: selects elements that possess the given attribute, regardless of value.
   • T[att="value"]: selects elements that possess the given attribute, with the given value.
   • T[att^="value"]: selects elements that possess the given attribute, beginning with the given value. (Symbol ^ represent beginning in regex.)
   • T[att$="value"]: selects elements that possess the given attribute, ending with the given value. (Symbol $ represent ending in regex.)
   • T[att*="value"]: selects elements that possess the given attribute, containing with the given value.

   Child Pseudo-Class Selectors (CSS3)

   CSS3 introduces these pseudo-class child selectors:

   • :first-child, :last-child: E.g., In td:first-child, td is the first child of the parent.
   • :nth-child(odd), :nth-child(even): E.g., table > tr:nth-child(even)
   • :nth-child(3), :nth-child(n+3) (3, 4, 5,...), :nth-child(3n) (3, 6, 9,...), :nth-child(3n+1) (4, 7, 10,...), etc.
   • :nth-last-child(3): last 3rd child

   Type Pseudo-class Selector (CSS3)

   • T:first-of-type, T:last-of-type: For example p:first-of-type select the first

     .

   • T:nth-of-type(odd), T:nth-of-type(even): E.g., table > tr:nth-of-type(odd)
   • T:nth-of-type(3), T:nth-of-type(n+3) (3, 4, 5,...), T:nth-of-type(3n) (3, 6, 9,...), T:nth-of-type(3n+1) (4, 7, 10,...), etc.

   :in-range Pseudo-class Selector

   Select elements whose value is in the permitted range, for giving positive feedback, e.g.,

   :not(...) Pseudo-class Selector

   The :not(S) selector lets you select elements not meeting the criterion in selector S. For example, :not(.highlight) select elements not belonging to class highlight. See above example.

   There are many more pseudo-class selector!

   CSS Style Properties

   For a complete list of the style properties, you may refer to the CSS specification (@ W3C), or online reference. I shall present the commonly-used properties such as color, font, text, margin, border, padding.

   CSS color and background-color Properties

   Specifying Color

   Color can be expressed as:

   1. RGB hexadecimal triplets in the form of #rrggbb, where rr, gg, bb are values of red, green and blue. The values are between 00 and FF, in hexadecimal. For example, #12ABFF. The color value #112233 can be shorthand as #123.
   2. RGB in the form of rgb(r, g, b). The r, g, b can be expressed in a decimal value between 0 and 255; or in percentage between 0% and 100%. I prefer the decimal form over the hex triplets as it is easier to visualize the values.
   3. RGBA in the form of rgba(r, g, b, a): RGB with an additional A (alpha channel). The A is used to control the transparency/opacity, with a=1 for opaque; and a=0 for totally transparent.
   4. HSL in the form hsl(hue, saturation, lightness): Hue is the color on the color wheel in degrees between 0 to 360. Saturation (purity of color) is expressed in percentage between 0% and 100% (pure color). Lightness (brightness or intensity) is also expressed in percentage between 0% (darkest) and 100% (brightest).
   5. HSLA in the form of hsla(hue, saturation, lightness, alpha).
   6. The 16 pre-defined English color names as follows. These 16 colors are numerically generated and are really really ugly. You should avoid using them!! Many browsers also support other color names such as lightblue, lightgreen, etc.

   CSS Color Properties

   The most important color properties are color and background-color:

   • color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name: Set the color of the text (or foreground). Color values are inherited by descendants.
   • background-color: #rrggbb|rgb(rrr,ggg,bbb)|rgba(r,g,b,a)|color-name|transparent|inherit|initial: Set the background color of an element. The default is transparent and NOT inherited, so as to create a see-through effect. The initial sets to its default value.

   CSS Length Measurements

   Many CSS properties, such as width, height, margin, border, padding, font-size and line-height, require a length measurement. For example,

   html {
     font-size: 16px;    
   }
   p {
     font-size: 1rem;    
     width: 80%;         
     margin: 0.5em 2em;  
     border: 5mm;        
     padding: 0;
     line-height: 140%;  
   }

   There are two types of length measurements: relative (to another length property) and absolute (e.g., inches, centimeters, millimeters).

   The absolute units are:

   • in (inch)
   • cm (centimeter)
   • mm (millimeter)
   • pt (point): 1 inch has 72 points. 1pt is 1/72 in ≈ 0.014in ≈ 0.35mm.
   • pc (pica): 1 pica is 12 points. 1 inch has 6 picas. 1pc ≈ 1/6 in ≈ 0.17in ≈ 4.2mm. pc is not commonly used.
   • px: px is a measurement unit created for the CSS, where the thinest line shall have width of 1px. Today, it is defined as 1px=1/96 inch. Since 1pt is 1/72 inch; 12pt = 16px = 1/6 inch = 0.42cm.

   The relative units are:

   • % (percent): in term of the percentage of a property of a referenced element, generally, the same property of the parent element.
     For example, table {width:80%} set the table's width to 80% of the width of the parent (probably a
     or ).
   • em: the width of the letter 'm' of a referenced font, generally, the current font.
     For example, margin:2em means that the margins are twice the current (referenced) font-size.
     However, if em is used to set the font-size property, it needs to find a reference. In this case, it is referenced to the parent's font-size. For example, p {font-size:1.2em} sets the font-size of

     to 1.2 times of the parent (possibly a

     or ).
   • rem (CSS3): relative to the font-size of the root or element.
   • vw, vh (CSS3): one percent of viewport width and height respectively.
   • vmin, vmax (CSS3): one percent of the viewport smaller dimension or larger dimension respectively, i.e., 1vmin is equal to the smaller of 1vh or 1vw; 1vmin is the larger of 1vh or 1vw.
   • ex (not commonly-used): the height of letter 'x' of the parent's font. ex is not commonly used.

   There shall be no space between the number and the unit, as space is used to separate multiple values.

   Take note that % and em measurement are relative to another element (percentage values are always relative, e.g., 50% of something). For example,

   h6 {
     font-size: 1.2rem;    
     width: 80%;           
     margin: 0.5em 1.2em;  
     padding: 10px;        
     border: 0;            
   }

   To add to the confusion, some properties, such as line-height, can also accept a bare number, without a unit. This bare number is treated as a factor to be multiplied by a reference. For example,

   line-height: 20px;   
   line-height: 150%;   
   line-height: 1.2em;  
   line-height: 1.5;    

   NOTE: In HTML tag attributes, such as width="400", the bare number is measured in pixels.

   Recommendation

   • Define a font-size for .
   • Use rem for font-size of other elements - relative to .
   • Use em for other properties such as margin and padding, which is relative to the current font-size.
   • Use other relative measurement such as % if appropriate. Avoid absolute measurements.

   For example,

   CSS Box Model and Properties margin, border, padding and Content Area

   Recall that HTML defines two kinds of elements: block element and inline element.

   A block element (such as

   ,

   ,

   to

   ) is always rectangular in shape and exhibits the so-called box model, with four virtual rectangles wrap around its "content area", representing the content area, padding, border, margin, as illustrated below.

   1. The content area contains the texts, image, or child elements.
   2. The padding is the space between the content area and the border. It clears an area outside the content area. It has the same background as the content area.
   3. The border goes between padding and margin. You can set a color and a style (such as solid, dash, dotted) to the border.
   4. The margin is the space outside the border (to another element). It clears an area outside the border. The margin does not have a background, and is totally transparent.

   As illustrated in the box model diagram, margin pushes its border (and content) away with a transparent background showing the parent (having the effect of pushing itself away from the parent); while padding pushes its content inwards with the same background. Margin and padding serve the same purpose if there is no border and background applied.

   Take note that the width and height that you set for the element specify its content area, exclude the margin, border and padding. To get the actual size of the element, you need to add the margin, border and padding to the width/height. For example, suppose that:

   #elm {
     width: 300px;
     margin: 10px;
     border: 5px solid black;
     padding: 20px;
   }

   The actual width of the element is 300+(10+5+20)x2 = 370px.

   Each of the rectangular bounds has four sides, and can be individually referred to as xxx-top, xxx-right, xxx-bottom, and xxx-left in a clockwise manner, where xxx could be margin, border or padding. The four sides can be controlled individually or as a group.

   Inspecting the Box Model via Web Developer Tools

   [TODO]

   CSS width and height Dimension Properties

   These properties allow you to set up the dimension, such as the width and height of an element.

   • width|height: auto|n|n%: The width and height are specified in units such as px (pixels), or percent (relative to the parent element).
   • max-width|max-height|min-width|min-height: none|n|n%: Set the minimum and maximum width and height.

   As mentioned earlier, CSS length measurement requires a proper unit, e.g., width:400px or width:80%. Take note that width:400 is meaningless in CSS (this is a very common error!) However, in HTML, width="400" means 400 pixels.

   The width and height properties are NOT inherited by its descendants. The default value is "auto", which lets the browser to compute a suitable value. We shall discuss "width:auto" value later.

   CSS margin, border and padding Properties

   The margin, border and padding related properties are:

   • margin-top|margin-right|margin-bottom|margin-Left: auto|n|n%: Set the four margins individually. The "n" shall be expressed in a proper unit (e.g. 10px and 1.2em). You could use a negative value to overlap two elements (e.g., margin-left:-100px). The value of "auto" lets the browser to compute an appropriate number. "n%" is relative to the same property (i.e. margin-xxx) of the parent.
   • (Shorthand) margin: top right bottom left
     (Shorthand) margin: top right-left bottom
     (Shorthand) margin: top-bottom right-left
     (Shorthand) margin: all
     These are one-line shorthand notations to set all the four margins. If four values are given, they are applied to top, right, bottom, left (in the clockwise manner). If two values are given, they are applied to top-and-bottom, left-and-right. If one value is given, it is applied to all the four borders.
     Take note that there is no commas between the items, as all items are considered to be one property value.
   • padding-top|padding-right|padding-bottom|padding-left: n|n%: Set the four paddings individually, similar to margin-xxx.
   • (Shorthand) padding: top right bottom left
     (Shorthand) padding: top left-right bottom
     (Shorthand) padding: top-bottom left-right
     (Shorthand) padding: all
     A one-line shorthand notation to set all the four paddings, similar to margin.
   • border-width: thin|medium|thick|n
     Set the width of the four borders. "n" can be used to set an absolute thickness. border-width is a shorthand notation, you can use border-width-top, border-width-right, border-width-bottom, and border-width-right to set the four borders individually.
   • border-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset
     Set the style of the 4 borders. Similarly, you can use border-style-top, border-style-right, border-style-bottom, and border-style-right to set the four borders individually.
   • border-color: #rrggbb|rgb(r,g,b)|rgba(r,g,b,a)|color-name
     Set the color of the 4 borders. Similarly, you can use border-color-top, border-color-right, border-color-bottom, border-color-right to set the four borders individually..
   • (Shorthand) border: width style color
     Shorthand notation to set all the properties of the borders, in the order shown. You can also use shorthands border-top, border-right, border-bottom, and border-left to set the four borders individually.

   Margin, border, padding, width are NOT inherited by its descendants.

   Example: [TODO]

   More Margin Properties

   • margin: 0 auto: set top and bottom margins to 0. Setting left and right margins to auto equally distribute the extra horizontal space, and hence, center the element horizontally.
   • Collapsed Margins: When margin of two elements touching each other vertically, they collapsed (with the larger margin). But when two margins touches horizontally, they do not collapse.
   • Negative Margin: margin is one of a few CSS properties that can be set to negative. This is used to overlap elements (without using absolute positioning). Padding and border cannot be negative.

   More Border Properties

   • border-radius: can be used to create a rounded border. You can also use it to convert a box to a circle (with border-radius: 50%).
   • border-image: can be used to create a multi-color border.

   Example [TODO]

   CSS outline Properties

   In addition to border, outline is a line that goes around the element, outside of the border, which does not take any space in the box model, and does not affect the position of the element.

   • outline-color:
   • outline-style: dotted|dashed|solid|double|groove|ridge|inset|outset: similar to border.
   • outline-width:

   width:auto

   For most of the block elements (e.g.,

   ,

   ), the default of width:auto sets the width to the width of the parent minus its own margin, border and padding. Images

   Example:

   Client-side Image Map Tags - and

   Function: To set up a client-side image map with hot regions.

   Syntax (map: Container tag, area: Standalone tag)

   's attributes:

   • id|name="map-name": declares a unique name for the map, to be targeted in attribute usemap="#map-name" of the
     Click on the image and observe the URL

     When the image is clicked, the (x, y) position of the click is send to the server as query parameters. For example,

     http://www.zzz.com/search.jsp?39,22
     

     It is up to the server to decide on how to process the (x, y) position received via a server-side program (such as CGI/ASP/JSP/PHP/Servlet).

     Client-Side vs. Server-Side Image Map

     Client-side image map is much more popular (and recommended) than server-side image map because:

     1. Mapping for client-side image map is processed by the browser locally with immediate response, without connecting to the server and waiting for server to response.
     2. No special server-side programs needed, relies solely on the browser to process the mapping of the hot regions.

     Frames

     You can divide the browser's window into multiple regions called frames. Each of the frames can contain a distinct and complete HTML document. Framed layout enables you to display several HTML document at once. Framed layout is popular for:

     • Dividing the window into a navigation frame (on the top or left-side of the window) and an actual content frame.
     • Dividing the window into a small summary frame and a detail frame. Java API documentation is a good example.

     However, use frames with extreme care! Frame (especially the "header" frame) occupied precious screen asset, as it does not scroll away! Framed layout have fallen out of favor over the years. Use

     and CSS to organize your web page instead.

     The tags involved are:

     • ...: to sub-divide the window.
     • : defines each of the frames in a frameset.
     • : for floating or inline or internal frame.
     • ...: alternative text if frame is not supported by browser.

     Frame Set ...

     Function: To divide the window into multiple frames, row-wise or column-wise. ... can be nested for complex layout. ... is to be used in place of ... tag. i.e., there should not have an tag in the document with .

     Syntax:

     
        ...frame-declarations...
     
      
     
        ...frame-declarations...
     
     

     Attributes:

     • rows|cols="n|n%|*, n|n%|*, ...": a list of frame sizes in pixels or percentage separated by commas. Wildcard "*" can be used to indicate the remaining space.

     Example:

     
       ...frame-declarations... 
     
     

     Divide the window into four rows of sizes: 100 pixels, 20% of the screen, 150 pixels, and the remaining space.

     Individual Frame

     Function: Declare each individual frame, and place the HTML document.

     Syntax:

     src="url"
       name="frame-name"
       noresize
       frameborder="0|1"
       scrolling="yes|no|auto" />
     

     Attributes:

     • src:="url": provides the URL of the document to be displayed inside this frame.
     • name: specifies an unique identifier, to be used as the target of other tags, such as ,
       .
     • noresize: suppresses resizing by dragging of border.
     • frameborder: sets to 1 to show the border, 0 to suppress.
     • scrolling: "yes" to show scrollbars and allow scrolling; "no" to suppress scrolling; and "auto" to let the browser to decide (e.g., auto-hide).

     Example: Divide the screen into 3 frames, top, left and right.

     Targeting Named Frame

     To control which frame to receive the content of a hyperlink, you could include the target attribute in the tag. Using the previous example, a hyperlink in the "navigation" frame targeting the "detail" frame is:

     target="detail">Chapter 5
     

     If all the links in the "navigation" frame are targeting the "detail" frame, you can use the tag (in the HEAD section) to set up a global target reference:

     As mentioned, frames has gone out of favor these day. The HTML5 introduced new elements such as

     ,
   , ,

   . grid: display in a grid, for example, Section 1 Section 2 Section 3 Section 4 visibility: hidden|visible: used to hide or show the element without removing the element from the normal flow of the page. That is, the space occupied by the element is preserved. CSS cursor Property cursor: auto|crosshair|default|help|move|wait|pointer|progress|text cursor: n-resize|ne-resize|nw-resize|s-resize|se-resize|sw-resize|w-resize|e-resize You can use property cursor to change the mouse pointer. Example: [TODO] Link To HTML/CSS References & Resources What CSS property is used for space inside the border? The border-spacing property sets the distance between the borders of adjacent cells. Note: This property works only when border-collapse is separate. Which CSS property indicates the amount of space between the border of the element and its contents? An element's padding is the space between its content and its border. The padding property is a shorthand property for: padding-top. padding-right. Which CSS property controls the spacing between elements? The CSS margin property controls the space between different HTML elements on a webpage. Use margin to bring page elements closer together or to move them further apart. How can you increase the distance between a cell border and a table border? Use the border-collapse property with its "separate" value for the table. Use the border-spacing property to set the distance between the borders of neighbouring table cells. For the first row, set the background color and the color of the text by using the background-color and color properties. Đọc tiếp

   Border-spacing tailwind Space between td Border-spacing not working Table css mozilla border-collapse Border-collapse not working
   Reply 0 0 Chia sẻ