-
Hajipur, Bihar, 844101
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
CSS Lists
🔹 What Are CSS Lists?
HTML lists like <ul>, <ol>, and <li> can be styled using CSS to change:
-
Bullet styles
-
List spacing
-
Positioning
-
Custom icons
-
List layout (horizontal/vertical)
🔸 1. Types of HTML Lists
-
Unordered List (
<ul>) – Bulleted list -
Ordered List (
<ol>) – Numbered list -
List Item (
<li>) – List item inside ul/ol
🔸 2. Styling List Type
Use list-style-type to change bullets or numbering.
ul {
list-style-type: square;
}
ol {
list-style-type: upper-roman;
}
🔹 Common Values:
-
disc,circle,square,none(for<ul>) -
decimal,lower-alpha,upper-roman,lower-greek(for<ol>)
🔸 3. Removing List Markers
ul {
list-style-type: none;
}
This is often used in nav menus.
🔸 4. Changing List Position
ul {
list-style-position: inside;
}
Values:
-
outside(default) -
inside(bullets/number appear inside content box)
🔸 5. Custom List Icons with Images
ul {
list-style-image: url('checkmark.png');
}
🔸 6. Horizontal Lists (Inline Navigation)
ul li {
display: inline;
margin-right: 20px;
}
Great for nav menus or toolbars.
🔸 7. Shorthand Property: list-style
ul {
list-style: square inside;
}
Same as:
list-style-type: square;
list-style-position: inside;
Practice Questions
Q1. Change bullet style of a <ul> to circle.
Q2. Change number style of an <ol> to uppercase Roman.
Q3. Remove bullets from a list.
Q4. Set list markers inside the list content.
Q5. Apply a custom image as bullet.
Q6. Style list items to appear inline with spacing.
Q7. Combine list-style-type and list-style-position using shorthand.
Q8. Set a different bullet style for two <ul> lists.
Q9. Use lower-alpha for an ordered list.
Q10. Make a vertical navigation menu without bullets.
CSS
CSS Basics
CSS Styling Properties
-
CSS Box Model
-
CSS Margin
-
CSS Padding
-
CSS Borders
-
CSS Outline
-
CSS Height/Width
-
CSS Max-width
-
CSS Display
-
CSS Position
-
CSS Z-index
-
CSS Overflow
-
CSS Float
-
CSS Inline-block
-
CSS Align
-
CSS Box Sizing
-
CSS Text
-
CSS Fonts
-
CSS Icons
-
CSS Text Effects
-
CSS Web Fonts
-
CSS Colors
-
CSS Backgrounds
-
CSS Color Keywords
-
CSS Gradients
-
CSS Shadows
-
CSS Links
-
CSS Lists
-
CSS Tables
CSS Advanced Selectors & Features
-
CSS Combinators
-
CSS Pseudo-classes
-
CSS Pseudo-elements
-
CSS Attribute Selectors
-
CSS Specificity
-
CSS !important
-
CSS Units
-
CSS Variables
-
CSS @property
-
CSS Math Functions
CSS Media and Image Styling
-
CSS Image Styling
-
CSS Image Centering
-
CSS Image Filters
-
CSS Image Shapes
-
CSS object-fit
-
CSS object-position
-
CSS Masking
CSS Layout Techniques
-
CSS Website Layout
-
CSS Navigation Bar
-
CSS Dropdowns
-
CSS Image Gallery
-
CSS Counters
-
CSS Pagination
-
CSS Multiple Columns
-
CSS User Interface
CSS Flexbox
CSS Grid
CSS Responsive Design (RWD)
