Scribd
Upload
2 views

HTML & CSS User Manual ThuyaCS(Xyzcloudy)

This document serves as a comprehensive user manual for HTML and CSS, detailing various HTML elements such as structural, text, list, table, form, multimedia, semantic, and scripting elements, along with self-closing elements. It also covers CSS properties including text, box model, background, layout, flexbox, grid, animation, transition properties, and pseudo-classes/elements for styling. The manual is designed to provide essential information for web development using HTML and CSS.

Uploaded by

thuyayeyint191
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

HTML & CSS User Manual ThuyaCS(Xyzcloudy)

This document serves as a comprehensive user manual for HTML and CSS, detailing various HTML elements such as structural, text, list, table, form, multimedia, semantic, and scripting elements, along with self-closing elements. It also covers CSS properties including text, box model, background, layout, flexbox, grid, animation, transition properties, and pseudo-classes/elements for styling. The manual is designed to provide essential information for web development using HTML and CSS.

Uploaded by

thuyayeyint191
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

HTML & CSS user manual assembled by ThuyaCS

HTML Elements
Structural Elements

 <html>: The root element of an HTML document.


 <head>: Contains meta-information about the document.
 <body>: Contains the content of the document.
 <header>: Defines a header for a document or section.
 <footer>: Defines a footer for a document or section.
 <main>: Specifies the main content of the document.
 <section>: Defines a section in a document.
 <article>: Defines an independent, self-contained content.
 <aside>: Defines content aside from the content it is placed in.
 <nav>: Defines navigation links.
 <div>: Defines a division or section.

Text Elements

 <h1> to <h6>: Headings from largest (<h1>) to smallest (<h6>).


 <p>: Paragraph.
 <span>: Inline container for text.
 <a>: Anchor/link.
 <strong>: Strong importance.
 <em>: Emphasized text.
 <b>: Bold text.
 <i>: Italic text.
 <u>: Underlined text.

List Elements

 <ul>: Unordered list.


 <ol>: Ordered list.
 <li>: List item.

Table Elements

 <table>: Table.
 <tr>: Table row.
 <th>: Table header cell.
 <td>: Table data cell.
 <thead>: Table head.
 <tbody>: Table body.
 <tfoot>: Table footer.

Form Elements

 <form>: Form.
 <input>: Input field.
o Types: text, password, submit, reset, radio, checkbox, button, number, email,
file, hidden, etc.
 <textarea>: Multi-line text input.
 <button>: Button.
 <select>: Drop-down list.
 <option>: Options within a <select>.
 <label>: Label for form elements.
 <fieldset>: Group related elements in a form.
 <legend>: Caption for a <fieldset>.

Multimedia Elements

 <img>: Image.
 <audio>: Audio content.
 <video>: Video content.
 <source>: Specifies multiple media resources.
 <track>: Text tracks for <video> and <audio>.

Semantic Elements

 <mark>: Marked/highlighted text.


 <small>: Smaller text.
 <del>: Deleted text.
 <ins>: Inserted text.
 <cite>: Citation.
 <q>: Short inline quotation.
 <blockquote>: Block quotation.

Scripting Elements

 <script>: JavaScript code.


 <noscript>: Content to display if scripts are not supported.
 <canvas>: Drawing graphics via scripting.

Self-closing elements (voids)

 <area>: Defines an area inside an image map.


 <base>: Specifies the base URL for all relative URLs in a document.
 <br>: Inserts a single line break.
 <col>: Specifies column properties for each column within a <colgroup> element.
 <embed>: Embeds external content, such as a plugin.
 <hr>: Defines a thematic break or horizontal rule.
 <img>: Embeds an image.
 <input>: Defines an input field.
 <link>: Defines the relationship between the document and an external resource,
typically used for linking to stylesheets.
 <meta>: Provides metadata about the HTML document.
 <param>: Defines a parameter for an object element.
 <source>: Specifies multiple media resources for media elements (<audio> and
<video>).
 <track>: Specifies text tracks for media elements (<audio> and <video>).
 <wbr>: Specifies a line break opportunity.
 <command>: Defines a command that the user can invoke (Note: this element is now
obsolete).

CSS Properties
Text Properties

 color: Text color.


 font-family: Font family.
 font-size: Font size.
 font-weight: Font weight.
 font-style: Font style.
 text-align: Horizontal alignment of text.
 text-decoration: Text decoration (e.g., underline, overline).
 text-transform: Transform text case (uppercase, lowercase).
 line-height: Line height.

Box Model Properties

 width: Width of an element.


 height: Height of an element.
 padding: Space inside the border of an element.
o padding-top
o padding-right
o padding-bottom
o padding-left
 margin: Space outside the border of an element.
o margin-top
o margin-right
o margin-bottom
o margin-left
 border: Border around an element.
o border-width
o border-style
o border-color
 box-sizing: Defines how the width and height of an element are calculated.

Background Properties

 background-color: Background color.


 background-image: Background image.
 background-repeat: How background image repeats.
 background-position: Position of background image.
 background-size: Size of background image.

Layout Properties

 display: Display type (e.g., block, inline, flex).


 position: Positioning method (e.g., static, relative, absolute, fixed, sticky).
 top, right, bottom, left: Offsets for positioned elements.
 float: Float an element to the left or right.
 clear: Control behavior of floating elements.
 z-index: Stacking order of elements.

Flexbox Properties

 display: flex: Defines a flex container.


 flex-direction: Direction of flex items (row, column).
 justify-content: Alignment along the main axis.
 align-items: Alignment along the cross axis.
 flex-wrap: Whether flex items should wrap.
 flex-grow: How much a flex item will grow relative to the rest.
 flex-shrink: How much a flex item will shrink relative to the rest.
 flex-basis: Initial main size of a flex item.

Grid Properties

 display: grid: Defines a grid container.


 grid-template-columns: Defines the columns of the grid.
 grid-template-rows: Defines the rows of the grid.
 grid-column-gap: Gap between columns.
 grid-row-gap: Gap between rows.
 grid-template-areas: Defines grid template areas.
 grid-area: Assigns an item to a named grid area.

Animation Properties

 animation-name: Name of the animation.


 animation-duration: Duration of the animation.
 animation-timing-function: Timing function of the animation.
 animation-delay: Delay before the animation starts.
 animation-iteration-count: Number of times the animation should play.
 animation-direction: Direction of the animation (normal, reverse, alternate).

Transition Properties

 transition-property: Property to transition.


 transition-duration: Duration of the transition.
 transition-timing-function: Timing function of the transition.
 transition-delay: Delay before the transition starts.

Pseudo-classes and Pseudo-elements

Pseudo-classes

 :hover: Style when an element is hovered over.


 :focus: Style when an element has focus.
 :active: Style when an element is activated.
 :nth-child(n): Style the nth child of a parent.
 :first-child: Style the first child of a parent.
 :last-child: Style the last child of a parent.

Pseudo-elements

 ::before: Insert content before an element.


 ::after: Insert content after an element.
 ::first-letter: Style the first letter of an element.
 ::first-line: Style the first line of an element.

CSS Properties for Precise Element Positioning and Styling

 Margin: margin-top, margin-bottom, margin-left, margin-right


 Padding: padding-top, padding-bottom, padding-left, padding-right
 Border width: border-top-width, border-bottom-width, border-left-width,
border-right-width
 Border color: border-top-color, border-bottom-color, border-left-color,
border-right-color
 Border style: border-top-style, border-bottom-style, border-left-style,
border-right-style
 Outline width: outline-width
 Outline color: outline-color
 Outline style: outline-style
 Position: top, bottom, left, right

You might also like