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
We take content rights seriously. If you suspect this is your content, claim it here.
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
We take content rights seriously. If you suspect this is your content, claim it here.
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