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
Borders
Borders are found in between the margin and padding. It gives an outline all around the element. Three values are needed by the border property i.e., style, color, and width. For the 'border' property, the shorthand values are written in the order as width, style, and color. For the longhand one, all 3 of them can be broken up as
'border-width,' 'border-style,' and 'border-color' properties. In CSS, there are different appearances available for the border, but the most commonly used are double, dotted, solid, dashed, and none.
Given below is the code for 10 pixels wide, dotted, grey border.
div {
border: 10px dotted #949599;
}
Individual Border Sides
Like the padding and the margin property, borders can also be placed on one side of the element. For that, we need new properties like border-top, border-bottom, border-right, and border-left. The values are the same as that required alone for width, style, and color. If you want to apply the border at the top of an element, then follow the below example.
div {
border-bottom: 6px, solid #949599;
}
Borders can be controlled at a much finer level. Let's say if we want to change the width of the border at the bottom, then we can go with the below code.
div {
border-bottom-width: 12px;
}
Border Radius
The main functionality of border-radius is to give round corners to an element. The border-radius accepts length in pixels as well as in percentage. One value to this property will round all the corners of the element. Two values will round the top-right/bottom-left and top-left/bottom-right corners. Four values will round top-right, top-left, bottom-right, and bottom-left corners.
div {
border-radius: 5px;
}
Box Sizing
From the above discussion, we already know that the box model is an additive design. If you have the width of the element as 400 pixels, then you are providing 20-pixel padding and 10 pixels of border on all sides, the actual width of the element sums up to 460 pixels.
To support several calculations, the box model may be changed. CSS3 has provided us with the box-sizing property to help us with that. The property takes in 3 important values i.e., content-box, padding-box, and border-box. Let's see each one of them one by one.
Content Box
The content-box value serves as a default value if we are not using the box-sizing property.
div {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
Padding Box
The value as padding-box in box-sizing property changes the box model by including any property value of padding within the height and width of an element. Using this, if an element consists of a width of 400 pixels as well as padding of 20 pixels, the net width will be 400 pixels.
div {
box-sizing: padding-box;
}
Border Box
The border-box value helps in changing the box model such that any padding or border property values are included within the height and the width of an element. If the width of an element is 400 pixels, a border of 10 pixels, and a padding of 20 pixels around every side, then the net width will be as it is i.e., 400 pixels.
div {
box-sizing: border-box;
}
Don't miss out!
Study Material