What Do You Mean By HTML and CSS?
Common HTML Terms
Creating HTML Document Structure
Common CSS Terms
Selectors
Referencing CSS
CSS Resets
Getting to Know HTML And Semantics Overview
Identifying Divisions and Spans
Using Text Based Element
Building Structure
Creating Hyperlinks
Getting to Know CSS :The Cascade
Calculating Specificity
Combining Selectors
Layering Styles With Multiple Classes
Common CSS Properties
CSS Aural Media/Style Sheets
CSS Pagination
CSS Overflow
CSS White Space
CSS Word Wrap
CSS Outline
CSS Visibility
CSS Counters
CSS Animation
CSS Transition
CSS Tooltips
CSS Tooltip Animation
CSS Arrow
CSS Flexbox
CSS Media Queries
CSS 2D Transforms
CSS 3D Transforms
How are Elements Displayed?
Display Property Controls And Box Model?
Working With Box Model
Width and Height
Margins and Padding
Borders, Individual Border Sides, Border Radius, Box Sizing, Content Box and Padding Box
Developer Tools
Removing Spaces between Inline-Block Elements
Positioning With Floats
Floats in Practice
Positioning With Inline-Block
Clearing and Containing Floats
Creating Reusable Layouts
Uniquely Positioning Layouts
Adding Colour To Text
Changing Font Properties
Font Family
Font Size, Font Style, Font Variant, Font Weight And Line Height
Shorthand Font Properties
Applying Text Properties
Text Properties All Together
Using Web-Safe Fonts
Including Citation And Quotes
Adding A Background Colour
Adding a Background Image and Background Repeat
Background Position and Shorthand Background Image Values
Designing Gradient Backgrounds
Changing the Direction of a Gradient Background
Using Multiple Background Images
Exploring New Background Properties
Unordered Lists
Ordered Lists
Description Lists
Nested Lists
List Item Styling
List Style Type Values
List Style Position Property
Adding Media And Adding Images
Sizing Images
Positioning Images, Inline Positioning Images, Blocking Positioning Images , Positioning Images Flush Left or Right
Adding Audio
Adding Videos
Adding Inline Frames
Semantically Identifying Figures And Captions
Building Forms And Initializing a Form
Text Fields And Text Areas
Multiple Choice Inputs And Menus
Form Buttons
Other Inputs
Organizing Form Element
Form And Input Attributes
Login Form Example
Organizing Data with Tables
Creating A Table
Table Header
Table Structure
Table Head, Body and Foot
Combining Multiple Cells
Table Borders
Table Striping
Aligning Text
Completely Styled Table
HTML Coding Practices
Use the Proper Document Structure
Keeping the Syntax Organized
Use Practical ID and Class Values
CSS Coding Practices
Write CSS Using Multiple Lines and Spaces
Use Proper Class Names
Build Proficient Selectors
Use Desired Classes When Needed
Use Shorthand Hexadecimal Color Values
Drop Units Zero Values
HTML abbr tag
HTML acronym tag (Not for HTML 5)
HTML area tag
HTML basefont tag
HTML blockquote tag
HTML datalist tag
HTML Description List
HTML ins tag
Marquee HTML Tag
HTML object tag
HTML picture tag
HTML SVG
Getting accustomed with ways to set the font's size, family, weight, style, and line-height is half the way. In addition to that, we can decide ways to decorate, align, transform, indent, and space text. Let's get started with text alignment.
Text Align
Aligning text is one of the most popular ways of setting up a flow and rhythm on a web page. To do this, use the text-align property. This property takes in 5 values i.e., right, left, justify, inherit, and center.
p {
text-align: center;
}
This property should not be confused with the ‘float’ property. The ‘float’ property moves the entire element to its desired value while the ‘text-align’ property aligns the text present inside the element.
Text Decoration
The property of text-decoration offers several ways to spruce up your text. The keywords that it takes in are underline, inherit, line-through, and none.
.note {
text-decoration: underline;
}
Text Indent
This property helps in providing indentation to the 1st line of text inside the element. You can use length values like points, pixels, percentages, etc. A negative value will indent the text outward, while a positive one will indent it inward.
p {
text-indent: 20px;
}
Text Shadow
The property of text-shadow offers us the ability to add a shadow or multiple shadows to text. This property takes in 3 values. All of them are written from left to right. The 1st three are lengths, and the last one is color.
The 1st value defines the horizontal offset of the shadow, the 2nd one says about the vertical offset of the shadow, and the 3rd defines the blur radius of the shadow.
p {
text-shadow: 5px 6px 2px rgba(0, 0, 0, .3);
}
Text Transform
Just like the font-variant property, we have the text-transform property. The property of ‘text-transform’ helps in changing the text inline without the requirement for a substitute typeface. This property takes in 5 values i.e., uppercase, lowercase, none, capitalize, and none.
p {
text-transform: uppercase;
}
Letter Spacing
With the help of the 'letter-spacing' property, one can modify the space between the letters on a web page. A negative value will make the letters to come closer to each other, while a positive value of length will push them far apart. When the value of the keyword is provided as 'none,' the space between the letters is returned to its normal size.
Providing a relative value of length with the ‘letter-spacing’ property ensures us that we keep up the right dispersing between letters as the font-size of the text is altered.
p {
letter-spacing: -.5em;
}
Word Spacing
Just like the 'letter-spacing' property, we can also modify the words present inside an element using the property of 'word-spacing.' This property takes in the same values of length as taken by the 'letter-spacing' property. Rather than dispersing letters away, however, this property applies those values between words.
p {
word-spacing: .25em;
}
Don't miss out!
Study Material