text-indent
text-indent
defines indention in a block of text.
Values
The value is usually a number which can be negative or positive. Having a negative indention will make the text go overboard and a positive one will push it backwards.
The value can sometimes be a percent value. A percent value will to the containing block’s width.
Example
<p style="text-indent:100;">Cras id dolor eu elit pulvinar bibendum ut ac neque. Praesent mollis ante ac urna varius aliquet. Cras vitae hendrerit elit, eget accumsan orci. Vivamus rhoncus, libero non porta semper, odio odio fringilla felis, a luctus ipsum orci a ipsum. Curabitur quis aliquam arcu. Fusce quis lorem eu massa lobortis tempus. Nulla cursus purus at sagittis tempus. Duis augue est, laoreet quis turpis quis, gravida vestibulum justo.</p>
<p style="text-indent:20%;">Cras id dolor eu elit pulvinar bibendum ut ac neque. Praesent mollis ante ac urna varius aliquet. Cras vitae hendrerit elit, eget accumsan orci. Vivamus rhoncus, libero non porta semper, odio odio fringilla felis, a luctus ipsum orci a ipsum. Curabitur quis aliquam arcu. Fusce quis lorem eu massa lobortis tempus. Nulla cursus purus at sagittis tempus. Duis augue est, laoreet quis turpis quis, gravida vestibulum justo.</p>
font-weight
The font-weight
property defines the weight that will be given to the text inside an element.
Values
- bold
- The text will have be bold.
- normal
- The text will be normal.
- bolder
- The text will be bolder than the ancestor element.
- lighter
- The text will be lighter than the ancestor element.
- inherit
- The text will inherit the property from the ancestor element.
Example
<p style='font-weight:bold;'>Bold</p>
<p style='font-weight:normal;'>Normal</p>
<p style='font-weight:lighter;'>Lighter</p>
<p style='font-weight:inherit;'>Inherit</p>
<p style='font-weight:bolder;'>Bolder</p>
text-decoration
text-decoration
defines how text will be decorated. Decoration usually means how a line will drawn on top of the element.
Values
- underline
- A line will be drawn underneath the element.
- overline
- A line will be drawn over the element.
- none
- No line will be drawn. This will not undo anything set by an ancestor element.
- line-through
- A line will be drawn across the element.
Example
<p style='text-decoration:underline;'>Underline</p>
<p style='text-decoration:overline;'>Overline</p>
<p style='text-decoration:none;'>None</p>
<p style='text-decoration:line-through;'>Line Through</p>
text-transform
text-transform
controls capitalization of text. When writing HTML, you have a choice to do capitalization in the HTML itself or using CSS.
Values
- capitalize
- Capitalizes the first character of each word. Take note that other characters that are not the first characters in each word will not be affected in any way.
- uppercase
- All characters will be transformed to uppercase counterparts.
- lowercase
- All characters will be transformed to lowercase counterparts.
- none
- No changes will be made.
Example
<p style="text-transform:uppercase;">Everything here will be capitalized.</p>
<p style="text-transform:lowercase;">Everything here will be changed to lowercase.</p>
<p style="text-transform:capitalize;">Only The First Letters of Each word will be Capitalized.</p>
Browse Internet Slangs
A | B | C | D | E | F | G | H |
I | J | K | L | M | N | O | P |
Q | R | S | T | U | V | W | X |
Y | Z |
Categories
- Web Development (166)
- Freebies (3)
- Applications (29)
- Linux (37)
- Database (4)
- Command Line (16)
- Releases (23)
- Meta (20)
Recent Posts
- Git: Could not read from remote repository error
- Javascript: Find an object by the value of a property
- Create Migrations for HStore, JSON and JSONB with Rails
- Rails ActiveRecord: Get last records
- Heroku: How to Restore Database dump
- Sass Cheatsheet
- ReactJS: JSX Patterns for New React Developers
- ActiveModel::ForbiddenAttributesError in ActiveAdmin
- How to center text in HTML
- Add Index on Rails Active Record
- CSS: Using Inline-block
- How to Delete a Git Branch Locally and Remotely
- How to Add Custom Labels to Active Admin Filters
- How to Modify the Width of a Column in Google Spreadsheet
- How to Add a Dropdown to a Google Spreadsheet
- React: Passing Props from one Component to another
- Linux: See the available disk space
- Global Regex Replace
- Basic Linux Commands
- How to Backup a Heroku Database