Department:
Computer Science
CSS (Cascading Style Sheets) properties are the building
blocks used to style HTML
INTRODUCTION to CSS
elements on a webpage. They define how elements
should look in terms of layout, color, size, spacing, and
more.
CSS properties are the foundation of styling web pages. They allow you to
1. CSS Properties
CSS properties are the foundation of styling web pages. They allow you to
Hexadecimal: #ff0000 (red).
RGB: rgb(255, 0, 0) (red).
HSL: hsl(0, 100%, 50%) (red).
2. Font-size : Adjusts the size of text.
Relative units: em, rem, % (e.g., 1.5em scales based on
parent element).
Absolute units: px, pt.
3. Font-wei ght: Controls the thickness of text:
Keywords: normal, bold, bolder.
Numerical values: 100 (thin) to 900 (extra bold).
4. Line-height: Sets the space between lines of text:
Example: line-height: 1.5;.
The box model represents the structure of HTML elements, affecting layout and spacing:
1.Content: The main content inside an element.
Box Model
2.Padding: Space between the content and the border.
3. Border: A line surrounding the element.
4.Margin: Space outside the border, separating elements.
width: 200px; padding:
width: 200px; padding:
Box Model
Example:
div {
border: 5px solid black;
Actual Width = width + padding + border + margin.
3. background-repeat: Controls repetition of the background image:
repeat, no-repeat, repeat-x (horizontal), repeat-y (vertical).
4. background-position: Positions the background image:
2.relative: Positioned relative to its normal position.
3.absolute: Positionedbackground-position: center; ancestor.
relative to the nearest positioned
Positioning
Positioning defines how elements are placed in relation to the document or other elements:
1. static: Default position; follows normal flow.
4.fixed: Stays fixed relative to the viewport.
5.sticky: Toggles between relative and fixed.
Example:
div {
position: absolute;
top: 50px;
left: 100px;
}
2. CSS Browser Support
Understanding Compatibility Issues:
Each browser has its rendering engine:
1. Chrome: Blink.
2.Firefox: Gecko.
4. Edge: Blink (formerly EdgeHTML).
How to Ensure Compatibility:
Browsers evolve at different paces, so newer CSS features might not be
supported by all.
3.Safari: WebKit.
1.Graceful Degradation: Build advanced features with fallbacks for unsupported browsers.
border-radius: 0; /* Fallback */
border-radius: 10px; /* Modern browsers */
2. Progressive Enhancement: Use basic styles first, then add modern features.
Polyfills:JavaScriptlibrariesthat mimicCSS featuresin unsupported
browsers.
3. Testing Tools:
Can I Use for feature support.
Online tools like BrowserStack.
Vendor Prefixes
Browsers sometimes require prefixes for experimental features:
-webkit-: Chrome, Safari.
-moz-: Firefox.
-ms-: Internet Explorer.
-o-: Opera.
Example:
-webkit-box-shadow: 5px 5px 10px grey; /* Chrome, Safari */
-moz-box-shadow: 5px 5px 10px grey; /* Firefox */
box-shadow: 5px 5px 10px grey; /* Standard */
3. CSS Selectors
CSS selectors are patterns used to target and style specific elements in HTML.
Types of Selectors:
1. Universal Selector:
Targets all elements:
*{
margin: 0;
padding: 0;
}
3. CSS Selectors
Type Selector:
2. Targets specific HTML tags:
p{
color: green;
}
3. CSS Selectors
3. Class Selector:
Targets elements with a specific class:
.classname {
font-size: 14px;
}
Example in HTML:
<div class="classname">Hello World</div>
3. CSS Selectors
4. ID Selector:
Targets a single element with a specific ID:
#uniqueID {
background-color: yellow;
}
Example in HTML:
<div id="uniqueID">This is unique</div>
3. CSS Selectors
5. Group Selector:
Targets multiple elements:
h1, h2, p {
font-family: Arial;
}
3. CSS Selectors
6. Descendant Selector:
Targets elements inside other elements:
div p {
color: red;
}
3. CSS Selectors
7. Child Selector:
Targets direct children
div > p {
margin: 10px;
}
3. CSS Selectors
8. Pseudo-classes:
Targets elements in a specific state:
a:hover {
color: blue;
}
3. CSS Selectors
Attribute Selectors:
Targets elements with specific attributes:
input[type="text"] {
border: 1px solid black;
}
Thank You
