- CSS Basics
- CSS Tutorial
- CSS Where to Write
- CSS Syntax
- CSS Selectors
- CSS Combinators
- CSS Attribute Selectors
- CSS Pseudo Classes
- CSS Pseudo-Classes
- CSS :link :hover :active
- CSS :first-child
- CSS :first-of-type
- CSS :last-child
- CSS :last-of-type
- CSS :only-child
- CSS :only-of-type
- CSS :nth-child()
- CSS :nth-of-type()
- CSS :nth-last-child()
- CSS :nth-last-of-type()
- CSS :focus
- CSS :not()
- CSS :root
- CSS :empty
- CSS :target
- CSS :lang()
- CSS :valid
- CSS :invalid
- CSS :optional
- CSS :required
- CSS :in-range
- CSS :out-of-range
- CSS :enabled :disabled
- CSS :read-only
- CSS :read-write
- CSS Pseudo Elements
- CSS Pseudo-Elements
- CSS ::before
- CSS ::after
- CSS ::first-letter
- CSS ::first-line
- CSS ::marker
- CSS ::selection
- CSS Colors
- CSS Colors
- CSS rgb() and rgba()
- CSS hsl() and hsla()
- CSS Background
- CSS background
- CSS background-color
- CSS background-image
- CSS linear-gradient()
- CSS radial-gradient()
- CSS conic-gradient()
- CSS repeating-linear-gradient()
- CSS repeating-radial-gradient()
- CSS repeating-conic-gradient()
- CSS background-position
- CSS background-size
- CSS background-repeat
- CSS background-origin
- CSS background-clip
- CSS background-attachment
- CSS background-blend-mode
- CSS Border
- CSS border
- CSS border-style
- CSS border-style Values
- CSS border-width
- CSS border-color
- CSS border-top
- CSS border-top-style
- CSS border-top-width
- CSS border-top-color
- CSS border-bottom
- CSS border-bottom-style
- CSS border-bottom-width
- CSS border-bottom-color
- CSS border-left
- CSS border-left-style
- CSS border-left-width
- CSS border-left-color
- CSS border-right
- CSS border-right-style
- CSS border-right-width
- CSS border-right-color
- CSS border-top-left-radius
- CSS border-top-right-radius
- CSS border-bottom-left-radius
- CSS border-bottom-right-radius
- CSS border-radius
- CSS border-collapse
- CSS empty-cells
- CSS border-spacing
- CSS border-image
- CSS border-image-source
- CSS border-image-slice
- CSS border-image-width
- CSS border-image-outset
- CSS border-image-repeat
- CSS Fonts
- CSS font
- CSS font-style
- CSS font-variant
- CSS font-variant-caps
- CSS font-weight
- CSS font-size
- CSS line-height
- CSS font-family
- CSS font-stretch
- CSS font-kerning
- CSS font-face
- CSS font-feature-settings
- CSS Text
- CSS Text
- CSS color
- CSS text-decoration
- CSS text-decoration-line
- CSS text-decoration-color
- CSS text-decoration-style
- CSS text-underline-position
- CSS text-align
- CSS text-align-last
- CSS text-justify
- CSS letter-spacing
- CSS word-spacing
- CSS text-shadow
- CSS text-transform
- CSS white-space
- CSS text-indent
- CSS word-wrap
- CSS overflow-wrap
- CSS word-break
- CSS text-overflow
- CSS hyphens
- CSS direction
- CSS unicode-bidi
- CSS writing-mode
- CSS Padding & Margin
- CSS Box Model
- CSS padding
- CSS padding-top
- CSS padding-right
- CSS padding-bottom
- CSS padding-left
- CSS margin
- CSS margin-top
- CSS margin-right
- CSS margin-bottom
- CSS margin-left
- CSS Padding Vs Margin
- CSS Dimensions
- CSS Dimensions
- CSS height
- CSS max-height
- CSS min-height
- CSS width
- CSS max-width
- CSS min-width
- CSS overflow
- CSS overflow-x
- CSS overflow-y
- CSS Multi-Column Layout
- CSS Multi-Column Layout
- CSS columns
- CSS column-width
- CSS column-count
- CSS column-rule
- CSS column-rule-width
- CSS column-rule-style
- CSS column-rule-color
- CSS column-span
- CSS column-fill
- CSS Display
- CSS display
- CSS inline Vs block
- CSS inline Vs inline-block
- CSS flex Vs inline-flex
- CSS inline-flex Vs inline-block
- CSS flex Vs grid
- CSS grid Vs inline-grid
- CSS Float and Position
- CSS float
- CSS clear
- CSS Align
- CSS position
- CSS left
- CSS right
- CSS top
- CSS bottom
- CSS Style List Marker
- CSS Style List Marker
- CSS list-style
- CSS list-style-type
- CSS list-style-position
- CSS list-style-image
- CSS Outline
- CSS outline
- CSS outline-width
- CSS outline-style
- CSS outline-color
- CSS outline-offset
- CSS Effects
- CSS Effects
- CSS Gradients
- CSS Shadows
- CSS box-shadow
- CSS opacity
- CSS Transforms
- CSS transform
- CSS translateX()
- CSS translateY()
- CSS translateZ()
- CSS translate()
- CSS translate3d()
- CSS scaleX()
- CSS scaleY()
- CSS scaleZ()
- CSS scale()
- CSS scale3d()
- CSS rotateX()
- CSS rotateY()
- CSS rotateZ()
- CSS rotate()
- CSS rotate3d()
- CSS skewX()
- CSS skewY()
- CSS skew()
- CSS matrix()
- CSS matrix3d()
- CSS perspective() Function
- CSS perspective Property
- CSS perspective-origin
- CSS transform-style
- CSS transform-origin
- CSS 2D Transform
- CSS 3D Transform
- CSS Transition
- CSS transition
- CSS transition-property
- CSS transition-duration
- CSS transition-timing-function
- CSS transition-delay
- CSS Animation
- CSS animation
- CSS @keyframes
- CSS animation-name
- CSS animation-duration
- CSS animation-timing-function
- CSS animation-delay
- CSS animation-iteration-count
- CSS animation-direction
- CSS animation-fill-mode
- CSS animation-play-state
- CSS Grid Layout
- CSS Grid Layout
- CSS gap
- CSS column-gap
- CSS row-gap
- CSS grid-area
- CSS grid-column-start
- CSS grid-column-end
- CSS grid-row-start
- CSS grid-row-end
- CSS grid-template
- CSS grid-template-columns
- CSS grid-template-rows
- CSS grid-template-areas
- CSS grid-auto-columns
- CSS grid-auto-rows
- CSS grid-auto-flow
- CSS grid-column
- CSS grid-row
- CSS Template Layout
- CSS Flex Layout
- CSS FlexBox
- CSS flex-direction
- CSS flex-wrap
- CSS flex-flow
- CSS justify-content
- CSS align-content
- CSS align-items
- CSS flex-grow
- CSS flex-shrink
- CSS flex-basis
- CSS flex
- CSS align-self
- CSS order
- CSS Misc
- CSS Length Units
- CSS Style Link
- CSS Navigation Bar
- CSS Style Image
- CSS Style Tables
- CSS table-layout
- CSS caption-side
- CSS Create Frames
CSS Style Text
This article is created to cover one of the important topic of CSS, that is, styling the text. To provide good user or reading experience, style and/or decorate the text that suits best for your website or web application.
There are a lot of ways, that we can choose to style the text. Some of them are necessary, whereas others are depending on the website UI/UX (User Interface/User Experience) requirement. For example:
<!DOCTYPE html> <html> <head> <style> p{text-align: center; letter-spacing: 2px; word-spacing: 4px;} .del{text-decoration: line-through red;} .true{text-decoration: underline green;} .green{color: rgb(0, 255, 0);} </style> </head> <body> <p>CSS was first released in <span class="true">1996</span>, not in <span class="del">1994</span>.</p> <p>The date when CSS was released: <span class="green">17<sup>th</sup> of December</span>.</p> </body> </html>
CSS was first released in 1996, not in 1994.
The date when CSS was released: 17th of December.
In above example, I've created a line through the text 1994 with red color, to make sure, user who are in hurry, doesn't remember this date as the release date of CSS. Because, sometime due to lack of text decoration, users are not able pay attention to the important information available on the website. Let me create another example.
CSS Style Texts on Web Example
<!DOCTYPE html> <html> <head> <style> div{background: chocolate; color: white; padding: 18px 12px;} h2{text-align: center; text-shadow: 2px 8px 8px wheat; margin-bottom: 32px;} p{line-height: 1.6; font-family: "Lucida Console", "Courier New", monospace;} </style> </head> <body> <div> <h2>CSS Text Styling</h2> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur ratione consectetur, accusamus, nam repellat adipisci amet iste fugit officiis sequi unde eius eum nulla magni itaque voluptatem, ullam dolores reprehenderit tempore eligendi laudantium molestias voluptates dolorum.</p> <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure enim autem hic omnis ab! Nisi in impedit cumque!</p> </div> </body> </html>
CSS Text Styling
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Consequatur ratione consectetur, accusamus, nam repellat adipisci amet iste fugit officiis sequi unde eius eum nulla magni itaque voluptatem, ullam dolores reprehenderit tempore eligendi laudantium molestias voluptates dolorum.
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure enim autem hic omnis ab! Nisi in impedit cumque!
Even you can improve the style used in above example. I don't know about your requirement and like. Therefore, using above example, my purpose is to only show the demo about, how the text can be styled.
One more thing, since there are multiple properties that can be used to style the text, and it will of course becomes a weird idea, if I cover all those properties in single article. Therefore I've created equal number of articles, as of total number of properties, used to style the text, using CSS. List are given below.
List of CSS Properties Used to Style Texts
- color - color the text
- text-decoration - decorate the text
- text-decoration-line - decorate the text using some kind of lines
- text-decoration-color - color the text-decoration-line
- text-decoration-style - style the text-decoration-line
- text-underline-position - define the position of text-decoration-line
- text-align - align the text horizontally
- text-align-last - align only the last line of text horizontally
- text-justify - justify the text whose text-align property is set to justify
- letter-spacing - define the length of white space between letters/characters
- word-spacing - define the length of white space between words
- text-shadow - define/add shadow behind the text
- text-transform - transform the text to uppercase, lowercase, or capitalize the first letter of each word
- white-space - handle white space inside an element
- text-indent - define the indentation (basically the starting position) of first line of text
- word-wrap - wrap the long word(s) to the new line
- overflow-wrap - define whether to wrap the overflowed long word to the new line or not
- word-break - define whether the word should break or not, and in what way the word should break, when overflow the container
- text-overflow - define how the hidden overflowed content should appear to the user
- hyphens - create a hyphen before the wrap of a word to the new line
- direction - define the direction of text
- unicode-bidi - set whether the text should be overridden or not
- writing-mode - lay the text horizontally or vertically, along with the direction
Note - Some other properties, that can also be used to style the text, are, but not limited to:
- background-color - used to change the background color of specified element
- font - used to define custom/required font to provide excellent reading experience for the website
« Previous Tutorial Next Tutorial »