CSS
1. Need for CSS:
Theory:
1. Separation of Concerns: CSS allows for the separation of presentation from
content, making websites more maintainable.
2. Consistency: By using a single CSS file, styles can be consistent across multiple
pages of a website.
3. Accessibility: CSS can be used to improve website accessibility for users with
disabilities.
4. Flexibility: CSS provides flexibility in presenting content differently on varied
devices.
5. Efficiency: Instead of defining styles for each element individually, CSS lets you
define styles once and apply them to multiple elements.
6. Interactivity: With pseudo-classes, CSS can change styles based on user
interaction.
7. Animations & Transitions: Modern CSS offers powerful animation and transition
capabilities.
8. Customization: Websites can easily be customized for themes or branding using
CSS.
9. Reduced Bandwidth: By using external stylesheets, browser caching can reduce
the load time of subsequent pages.
Example:
Without CSS:
<p style="font-size:16px; color:red;">This is a red colored text.</p>
With CSS:
CSS 1
p {
font-size: 16px;
color: red;
}
2. Basic Syntax and Structure:
Theory:
1. Selectors: Target the HTML elements you want to style.
2. Properties: Define what aspect of the element you want to style.
3. Values: Specify the settings you want to apply for the chosen property.
4. Declaration Block: Contains one or more declarations enclosed in curly braces.
5. Semicolons: Separate each declaration in a block.
6. Comments: Use /* Your comment here */ to add comments to your CSS.
7. External Stylesheets: Use <link rel="stylesheet" href="styles.css"> to link an
external stylesheet.
8. Internal Styles: Defined within the <head> section of an HTML page using the
<style> element.
9. Inline Styles: Apply styles directly to individual HTML elements using the style
attribute.
Syntax:
selector {
property: value;
another-property: another-value;
}
3. Backgrounds:
Theory:
1. Color Control: The background-color property sets the background color of an
element.
CSS 2
2. Image Backgrounds: The background-image property allows you to place an image
as the background.
3. Image Repetition: background-repeat specifies if/how a background image will
repeat.
4. Positioning: background-position sets the starting position of a background image.
5. Size Control: With background-size , you can scale the size of background images.
6. Multiple Backgrounds: CSS allows multiple background images for an element,
separated by commas.
7. Attachment: The background-attachment property sets whether a background image
is fixed or scrolls with the rest of the page.
8. Shorthand Property: The background property is a shorthand for all the background
properties.
9. Transparency: Use RGBA, HSLA, or gradient techniques to create transparent
backgrounds.
Example:
div {
background: yellow url('image.jpg') no-repeat center center / cover;
}
4. Colors and Properties:
Theory:
1. Color Formats: Colors can be defined in various ways including named colors,
HEX, RGB, RGBA, HSL, and HSLA.
2. Transparency with RGBA & HSLA: RGBA and HSLA allow for defining colors with
alpha transparency.
3. color Property: Determines the color of text.
4. opacity Property: Sets the opacity level for an element.
5. currentColor Keyword: Refers to the current color value of an element, useful for
properties like border-color .
CSS 3
6. Web Safe Colors: A collection of colors that display consistently across web
browsers and devices.
7. System Colors: Colors derived from a user's operating system or browser settings.
8. Contrast: Ensuring text colors contrast well with background colors is crucial for
readability.
9. Consistency: Using consistent colors enhances the user experience and brand
recognition.
Example:
p {
color: rgba(255, 0, 0, 0.5);
}
5. Manipulating Texts:
Theory:
1. Color Control: The color property sets the text color.
2. Alignment: text-align determines the horizontal alignment of text.
3. Decoration: text-decoration is used for underlining, overlining, and strikethrough
text.
4. Spacing: line-height and letter-spacing control the space between lines and
characters.
5. Transformations: text-transform controls text capitalization.
6. Indentation: text-indent indents the first line of text.
7. Overflow Control: text-overflow specifies how overflowed content is signaled to
users.
8. Shadowing: text-shadow adds shadows to text.
9. Whitespace Control: The white-space property controls how whitespace inside an
element is handled.
Example:
CSS 4
p {
text-align: justify;
text-transform: capitalize;
text-shadow: 2px 2px #FF0000;
}
6. Fonts:
Theory:
1. Font Families: font-family defines which font should be used, with fallback
options.
2. Font Size: font-size determines how large the text will appear.
3. Font Weight: font-weight controls the thickness of characters.
4. Font Style: font-style specifies if the text should be rendered normally, in italics, or
oblique.
5. Font Variants: font-variant can turn text into small caps.
6. Line Height: line-height adjusts the space between lines of text.
7. Custom Fonts: Use @font-face to define and use custom fonts.
8. Font Shorthand: The font property is a shorthand for several font-related
properties.
9. Font Stretch: font-stretch allows for condensed or expanded faces of a font family.
Example:
body {
font: italic bold 16px/1.5 "Arial", sans-serif;
}
7. Borders and Boxes:
Theory:
1. Border Styles: border-style defines the style of the border (solid, dashed, dotted,
etc.).
CSS 5
2. Border Width: border-width sets the thickness of the border.
3. Border Color: border-color defines the color of the border.
4. Individual Borders: Set styles for individual borders using border-top , border-
right , etc.
5. Rounded Corners: border-radius can create rounded borders.
6. Box Shadow: box-shadow adds shadows to elements.
7. Box Sizing: box-sizing controls the sizing properties (like width and height ) of an
element.
8. Outline: The outline property is similar to border but doesn't affect layout.
9. Border Image: border-image allows you to use images as borders.
Example:
div {
border: 3px solid #333;
border-radius: 10px;
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
8. Margins and Padding:
Theory:
1. Margin: Defines space outside the element, pushing other elements away.
2. Padding: Defines space inside the border, between the content and the border.
3. Collapsing Margins: Adjacent vertical margins can collapse into a single margin.
4. Individual Control: margin-top , margin-right , padding-left , etc. allow individual side
control.
5. Shorthand Properties: margin and padding can set values for all sides at once.
6. Auto Margins: Horizontal centering can be achieved with margin: auto .
7. Box Model: The combination of margins, borders, padding, and content.
8. Negative Margins: Can be used to pull elements in certain directions.
CSS 6
9. Percentage Values: Margins and padding can be set using percentages, based on
the parent element's width.
Example:
div {
margin: 20px 15px;
padding: 10px 5px;
}
9. Lists:
Theory:
1. List Style Type: list-style-type determines the type of list marker.
2. List Style Image: list-style-image uses an image as the list item marker.
3. List Style Position: list-style-position controls if the marker is inside or outside
the content flow.
4. Shorthand Property: list-style is a shorthand for all list styling properties.
5. Unstyled Lists: Commonly used to create navigation menus by setting list-style-
type: none .
6. Nested Lists: Lists can be nested inside other lists, each potentially having its own
style.
7. Ordered vs. Unordered: <ol> is an ordered list with numbers, while <ul> is
unordered with bullets.
8. Custom Counters: With CSS counters, you can create custom numbering for
ordered lists.
9. Vertical Spacing: Control space between list items using margin and padding .
Example:
ul {
list-style-type: square;
}
li.special {
CSS 7
list-style-image: url('special-marker.jpg');
}
10. CSS2 and CSS3:
Theory:
1. Evolution: CSS2 was a revision of the original specification, while CSS3 introduced
modularization.
2. Modules: CSS3's modular approach allows for faster development and
standardization of individual components.
3. New Features: CSS3 brought new features like rounded corners, shadows,
gradients, transitions, and animations.
4. Media Queries: CSS3 introduced media queries for responsive design.
5. Selectors: CSS3 brought more powerful selectors.
6. Browser Prefixes: To use experimental features, browser-specific prefixes like
webkit- or moz- were often required.
7. Compatibility: CSS3 features might not be supported in older browsers.
8. Performance: Some CSS3 properties, especially animations, might be resource-
intensive.
9. Progressive Enhancement: A methodology where basic web functions are
supported in all browsers, but advanced features are only available in modern ones.
11. Animations:
Theory:
1. Keyframes: Use @keyframes to define the sequence of frames in the animation.
2. Animation Name: Reference the name of the keyframes when defining an
animation.
3. Duration: animation-duration specifies how long the animation will take.
4. Timing Function: animation-timing-function controls the speed curve of the
animation.
CSS 8
5. Delay: animation-delay sets a delay before the animation starts.
6. Iteration: animation-iteration-count determines how many times the animation will
play.
7. Direction: animation-direction specifies whether the animation should play in
reverse on alternate cycles.
8. Fill Mode: animation-fill-mode controls the values applied by the animation outside
the time it's executing.
9. Shorthand: The animation property is a shorthand for all animation-related
properties.
Example:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
div {
animation: fadeIn 2s ease-in-out 1s forwards;
}
12. Tool-Tips:
Theory:
1. Purpose: Tooltips provide additional information about an item when hovered.
2. Content Property: Use the content property to set the tooltip's text.
3. Visibility: Typically, tooltips are hidden by default and displayed on hover or focus.
4. Positioning: Absolute or relative positioning can control tooltip placement.
5. Transitions: Smooth tooltip appearances with CSS transitions.
6. Accessibility: Ensure tooltips are accessible for screen reader users.
7. Custom Styling: Tooltips can be styled with any combination of CSS properties.
8. Arrow Pointers: Use pseudo-elements to create "arrows" pointing to the relevant
content.
9. Responsiveness: Ensure tooltips adapt to various screen sizes and devices.
CSS 9
Example:
[data-tooltip]:hover:after {
content: attr(data-tooltip);
position: absolute;
background-color: #333;
color: #fff;
padding: 5px;
border-radius: 5px;
top: 25px;
left: 50%;
transform: translateX(-50%);
}
13. Style Images:
Theory:
1. Responsive Images: Ensure images scale correctly for different devices.
2. Round Images: border-radius can be used to create rounded or circular images.
3. Shadows: box-shadow adds shadows to images.
4. Filters: The filter property applies graphical effects like blurring or color shifting.
5. Object Fit: object-fit specifies how an image should fit within its box.
6. Transformations: transform can rotate, scale, skew, or translate the image.
7. Hover Effects: Change image styles dynamically with hover states.
8. Overlay: Use pseudo-elements to add color or gradient overlays.
9. Caption Styling: Style image captions distinctively using various CSS properties.
Example:
img.rounded {
border-radius: 50%;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
filter: grayscale(50%);
}
14. Variables:
CSS 10
Theory:
1. Definition: Use the - syntax to define a variable, often in the :root selector for
global scope.
2. Usage: Use the var() function to utilize the variable.
3. Scope: Variables can be globally or locally scoped.
4. Fallbacks: Provide a fallback value in case the variable isn't set.
5. Dynamic Changes: Variables allow for dynamic theme changes using JavaScript.
6. Reusability: Reduce repetition by reusing variables across multiple properties.
7. Readability: Named variables can make stylesheets more readable.
8. Overriding: Variables in local scope can override global ones.
9. Browser Support: Modern browsers support CSS variables, but older ones might
not.
Example:
:root {
--primary-color: #4CAF50;
}
button {
background-color: var(--primary-color);
}
15. Flex Box:
Theory:
1. Purpose: Flexbox is designed for one-dimensional layouts, either in a row or a
column.
2. Container: Use display: flex or display: inline-flex on the parent element to
initiate Flexbox.
3. Direction: flex-direction determines the primary axis of layout, either row or
column.
4. Wrapping: flex-wrap controls if items should wrap onto multiple lines or columns.
CSS 11
5. Alignment: justify-content , align-items , and align-content control alignment of flex
items.
6. Ordering: The order property on flex items can control their visual order.
7. Growing & Shrinking: flex-grow and flex-shrink define how items grow or shrink
relative to each other.
8. Flex Basis: flex-basis sets the default size of an item before space distribution.
9. Shorthand: The flex property is a shorthand for flex-grow , flex-shrink , and flex-
basis .
Example:
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
.item {
flex: 1 1 auto;
}
16. Media Queries:
Theory:
1. Purpose: Media queries allow styles to be conditionally applied based on device
characteristics.
2. Breakpoints: Determine points where the website's content will respond to provide
the user with the best possible layout.
3. Types: Common media features include width , height , orientation , and
resolution .
4. Logical Operators: Use and , not , and only to create more complex media
queries.
5. Mobile First: A design strategy where mobile styles are default, and desktop styles
are added via media queries.
CSS 12
6. Viewport Meta Tag: Essential for responsive design, ensuring the page scales
correctly on different devices.
7. Cross-Browser Consistency: Ensure media queries work consistently across
browsers.
8. Performance: Avoid overly complex media queries that can decrease performance.
9. Testing: Always test responsive designs on actual devices and screen sizes.
Example:
@media (min-width: 768px) {
body {
background-color: lightblue;
}
}
17. Wildcard Selectors (*, ^, $) in CSS:
Theory:
1. Universal Selector: selects all elements.
2. Attribute Selectors: Use [] to style elements based on their attributes.
3. Starts With: [attr^=value] matches elements whose attribute starts with the
specified value.
4. Ends With: [attr$=value] matches elements whose attribute ends with the
specified value.
5. Sub-string Match: [attr*=value] matches elements whose attribute contains the
specified substring.
6. Performance: Use wildcard selectors judiciously as they can be slow.
7. Specificity: Wildcard selectors have lower specificity compared to other selectors.
8. Use Cases: Useful for styling elements based on data attributes or URI schemes.
9. Combinations: Combine with other selectors for more refined selections.
Example:
CSS 13
* {
box-sizing: border-box;
}
a[href^="https://"] {
color: green;
}
18. Working with Gradients:
Theory:
1. Types: Gradients can be linear (straight line) or radial (radiate from a center
point).
2. Colors: Specify multiple color stops for the gradient.
3. Direction: For linear gradients, define the direction using angles or keywords.
4. Shape & Size: For radial gradients, control the shape (circle or ellipse) and size.
5. Fallback: Provide a solid color as a fallback for browsers that don't support
gradients.
6. Use Cases: Gradients can be backgrounds, image overlays, or used with text.
7. Performance: Gradients use GPU rendering, making them performant.
8. Transparency: Gradients can transition between colors and transparency using
rgba or hsla .
9. Complexity: Combine multiple gradients for more complex effects.
Example:
div {
background: linear-gradient(45deg, red, yellow);
}
19. Pseudo Classes:
Theory:
1. Definition: Pseudo-classes allow styling elements based on their state or position.
CSS 14
2. Interaction: :hover , :focus , and :active target user interaction states.
3. Structure: :first-child , :last-child , :nth-child() target elements based on their
position in the DOM.
4. Form States: :valid , :invalid , :required , and :optional target form element
validation states.
5. Negation: :not() negates another selector.
6. Links: :link and :visited target link states.
7. Full-page Styling: :root represents the highest-level parent element, useful for
defining CSS variables.
8. Case-insensitivity: Use :is() and :where() for more flexible and case-insensitive
matching.
9. Future-proofing: As CSS evolves, more pseudo-classes get added, offering more
styling capabilities.
Example:
a:hover {
color: red;
}
p:nth-child(odd) {
background-color: lightgray;
}
20. Pseudo Elements:
Theory:
1. Definition: Pseudo-elements allow you to style specific parts of an element.
2. Content Insertion: ::before and ::after insert content before or after an element's
content.
3. Styling Lines: ::first-line and ::first-letter target the first line or letter of block
elements.
4. Content Property: Always use the content property with ::before and ::after .
CSS 15
5. Decorative Uses: Pseudo-elements are often used for decorative purposes, like
custom bullets or underlines.
6. Clearfix Hack: ::after can be used to clear floats in a container.
7. Generated Content: Pseudo-elements create "generated content" which is visible
but not in the DOM.
8. Limitations: Pseudo-elements can't be completely controlled with JavaScript since
they don't exist in the DOM.
9. Specificity: Pseudo-elements have lower specificity than classes but higher than
element selectors.
Example:
p::first-line {
font-weight: bold;
}
div::after {
content: "";
display: table;
clear: both;
}
21. Basic of Frameworks like Bootstrap:
Theory:
1. Definition: Bootstrap is an open-source CSS framework for developing responsive
and mobile-first web projects.
2. Components: Bootstrap provides ready-to-use components like modals, carousels,
and dropdowns.
3. Grid System: Bootstrap's 12-column grid system helps in creating responsive
layouts.
4. Utilities: Bootstrap offers utility classes for spacing, coloring,
typography, and more.
5. Customization: Bootstrap themes can be customized to match brand colors and
styles.
6. JavaScript: Bootstrap includes JavaScript plugins to enhance components'
CSS 16
functionality.
7. Performance: Bootstrap is optimized for performance but can be heavy if many
unused components are included.
8. Browser Compatibility: Bootstrap ensures consistent rendering across different
browsers.
9. Community: A large community supports Bootstrap, leading to many plugins,
themes, and resources.
Example:
<!-- Bootstrap Button -->
<button class="btn btn-primary">Click me</button>
22. Responsive Web Design and Media Query:
Theory:
1. Purpose: Ensure websites look and function well on all devices, from desktops to
mobiles.
2. Fluid Grids: Use relative units like percentages instead of fixed units like pixels.
3. Flexible Images: Ensure images resize within their containing elements.
4. Media Queries: Conditionally apply styles based on device characteristics.
5. Viewport Meta Tag: <meta name="viewport" content="width=device-width, initial-
scale=1"> ensures proper scaling on mobile devices.
6. Mobile First: Design for mobile devices first and then scale up for larger screens.
7. Testing: Use device emulators and real devices to test responsive designs.
8. Performance: Optimize for performance, especially on mobile networks.
9. Frameworks: Many CSS frameworks, like Bootstrap, come with built-in responsive
design features.
Example:
@media only screen and (max-width: 600px) {
body {
font-size: 16px;
CSS 17
}
}
23. CSS Variables:
(Already covered in point #14. Please refer to that for detailed theory and example.)
CSS 18
