CSS introduction and all properties of css.
html tags in a different slide:
https://www.slideshare.net/slideshow/introduction-to-html-with-syntax-and-tagspptx/266989656
2. @neelotpal.dey
A. What is CSS?
- CSS (Cascading Style Sheets) is a stylesheet language used to
describe the presentation of a document written in HTML or XML.
- It allows developers to control the visual styling of web pages,
including layout, colors, fonts, and other design elements.
3. @neelotpal.dey
B. Importance of CSS in web
development
- Separates content (HTML) from presentation (CSS), enabling
better maintainability and reusability.
- Provides consistent styling across multiple web pages.
- Enhances the overall user experience by creating visually
appealing and accessible designs.
- Enables responsive design, allowing websites to adapt to
different devices and screen sizes.
4. @neelotpal.dey
C. Versions of CSS
- CSS 1 (1996): The initial version, providing basic styling
capabilities.
- CSS 2 (1998): Introduced advanced selectors, positioning, and
media types.
- CSS 2.1 (2004): A revision of CSS 2, fixing errors and adding a
few new features.
- CSS 3 (ongoing): Modularized and continuously evolving,
introducing new features and improvements.
6. @neelotpal.dey
A. Syntax structure (selector, property,
value)
- CSS rules consist of a selector, property, and value:
```css
selector {
property: value;
}
```
- Selectors define the HTML elements to be styled.
- Properties specify the styles to be applied.
- Values define the specific styling details.
7. @neelotpal.dey
B. CSS comments
- Comments in CSS are used to provide explanations or
temporarily disable code.
- Single-line comments start with `/*` and end with `*/`.
```css
/* This is a CSS comment */
```
8. @neelotpal.dey
I. Introduction to CSS Properties
A. What are CSS properties?
- CSS properties define the style and presentation of HTML elements
B. Importance of CSS properties in web design
- CSS properties enable separation of content and presentation
- They provide control over various aspects of web page design
13. @neelotpal.dey
3. font-weight
- Description: Specifies the weight (boldness) of the font
- Syntax: font-weight:
normal|bold|bolder|lighter|100|200|...|900;
14. @neelotpal.dey
4. font-style
- Description: Specifies the font style (normal, italic, or
oblique)
- Syntax: font-style: normal|italic|oblique;
15. @neelotpal.dey
5. font-variant
- Description: Specifies the variant of the font (small-caps or
normal)
- Syntax: font-variant: normal|small-caps;
17. @neelotpal.dey
1. text-align
- Description: Specifies the horizontal alignment of text
- Syntax: text-align: left|right|center|justify|start|end;
18. @neelotpal.dey
2. text-decoration
- Description: Adds decoration to text (underline, overline,
line-through)
- Syntax: text-decoration: none|underline|overline|line-through;
19. @neelotpal.dey
3. text-transform
- Description: Controls the capitalization of text
- Syntax: text-transform: none|capitalize|uppercase|lowercase;
20. @neelotpal.dey
4. text-indent
- Description: Specifies the indentation of the first line of text
- Syntax: text-indent: length-value;
21. @neelotpal.dey
5. line-height
- Description: Sets the height of a line of text
- Syntax: line-height: normal|number|length|percentage;
22. @neelotpal.dey
6. letter-spacing
- Description: Increases or decreases the space between
characters
- Syntax: letter-spacing: normal|length-value;
23. @neelotpal.dey
7. word-spacing
- Description: Increases or decreases the space between words
- Syntax: word-spacing: normal|length-value;
24. @neelotpal.dey
8. white-space
- Description: Specifies how white-space inside an element is
handled
- Syntax: white-space: normal|nowrap|pre|pre-line|pre-wrap;
25. @neelotpal.dey
9. text-shadow
- Description: Adds a shadow effect to text
- Syntax: text-shadow: h-shadow v-shadow blur-radius color;
27. @neelotpal.dey
A. Color Properties
1. color
- Description: Sets the foreground color of text
- Syntax: color: color-name|hex-value|rgb-value|rgba-value;
2. opacity
- Description: Specifies the opacity/transparency level of an element
- Syntax: opacity: value;
/* value from 0.0 (fully transparent) to 1.0 (fully opaque) */
29. @neelotpal.dey
1. background-color
- Description: Sets the background color of an element
- Syntax: background-color: color-name|hex-value|rgb-
value|rgba-value;
30. @neelotpal.dey
2. background-image
- Description: Specifies one or more background images for an
element
- Syntax: background-image: url("image-path")|linear-
gradient()|radial-gradient()|...;
31. @neelotpal.dey
3. background-repeat
- Description: Specifies how background images are repeated
- Syntax: background-repeat: repeat|repeat-x|repeat-y|no-
repeat;
32. @neelotpal.dey
4. background-position
- Description: Specifies the starting position of a background
image
- Syntax: background-position: x-value y-value|position-
keyword;
33. @neelotpal.dey
5. background-size
- Description: Specifies the size of the background image(s)
- Syntax: background-size: auto|length-
value|percentage|cover|contain;
34. @neelotpal.dey
6. background-attachment
- Description: Specifies whether the background image scrolls
with the content or is fixed
- Syntax: background-attachment: scroll|fixed|local;
35. @neelotpal.dey
7. background-clip
- Description: Specifies the painting area of the background
- Syntax: background-clip: border-box|padding-box|content-
box;
36. @neelotpal.dey
8. background-origin
- Description: Specifies the positioning area of the background
image(s)
- Syntax: background-origin: padding-box|border-box|content-
box;
37. @neelotpal.dey
9. background (shorthand)
- Description: A shorthand property for setting multiple
background properties at once
- Syntax: background: bg-color bg-image position/bg-size bg-
repeat bg-origin bg-clip bg-attachment;
40. @neelotpal.dey
1. margin
- Description: A shorthand property for setting all four margins
at once
- Syntax: margin: value; /* top, right, bottom, left */
46. @neelotpal.dey
1. padding
- Description: A shorthand property for setting all four
paddings at once
- Syntax: padding: value; /* top, right, bottom, left */
52. @neelotpal.dey
1. border
- Description: A shorthand property for setting all border
properties at once
- Syntax: border: border-width border-style border-color;
57. @neelotpal.dey
D. Box-sizing
- Description: Specifies how the total width and height of an
element are calculated
- Syntax: box-sizing: content-box|border-box;
60. @neelotpal.dey
1. display
- Description: Specifies the display behavior of an element
- Syntax: display: inline|block|inline-block|flex|inline-
flex|grid|inline-grid|none;
61. @neelotpal.dey
2. visibility
- Description: Specifies whether an element is visible or
hidden
- Syntax: visibility: visible|hidden|collapse;
62. @neelotpal.dey
3. overflow
- Description: Specifies how to handle content that overflows
its container
- Syntax: overflow: visible|hidden|scroll|auto;
64. @neelotpal.dey
1. position
- Description: Specifies the positioning method for an element
- Syntax: position: static|relative|absolute|fixed|sticky;
65. @neelotpal.dey
2. top, right, bottom, left
- Description: Used with position properties to specify the
position offset
- Syntax: top/right/bottom/left: auto|length-value|percentage;
66. @neelotpal.dey
3. z-index
- Description: Specifies the stack order of positioned elements
- Syntax: z-index: auto|integer;
67. @neelotpal.dey
4. float
- Description: Specifies how an element should float
- Syntax: float: none|left|right;
68. @neelotpal.dey
5. clear
- Description: Specifies which sides of an element should
allow floating elements
- Syntax: clear: none|left|right|both;
92. @neelotpal.dey
1. transform
- Description: Applies a 2D or 3D transformation to an element
- Syntax: transform: none|transform-functions;
93. @neelotpal.dey
2. transform-origin
- Description: Specifies the origin of transformation for an
element
- Syntax: transform-origin: x-value y-value z-value;
94. @neelotpal.dey
3. transform-style
- Description: Specifies how nested elements are rendered in
3D space
- Syntax: transform-style: flat|preserve-3d;
105. @neelotpal.dey
D. animation-timing-function
- Description: Specifies the timing function for the animation
- Syntax: animation-timing-function: ease|linear|ease-in|ease-
out|ease-in-out|cubic-bezier()|steps();
108. @neelotpal.dey
G. animation-direction
- Description: Specifies whether the animation should play
forwards, backwards, or alternate
- Syntax: animation-direction: normal|reverse|alternate|alternate-
reverse;
109. @neelotpal.dey
H. animation-fill-mode
- Description: Specifies how to apply styles before and after the
animation
- Syntax: animation-fill-mode: none|forwards|backwards|both;
117. @neelotpal.dey
1. border-collapse
- Description: Specifies whether table borders should be
collapsed into a single border
- Syntax: border-collapse: separate|collapse;
118. @neelotpal.dey
2. border-spacing
- Description: Specifies the distance between the borders of
adjacent cells
- Syntax: border-spacing: horizontal-value vertical-value;
119. @neelotpal.dey
3. caption-side
- Description: Specifies where the table caption should be
placed
- Syntax: caption-side: top|bottom;
120. @neelotpal.dey
4. empty-cells
- Description: Specifies how to display borders and
backgrounds of empty cells
- Syntax: empty-cells: show|hide;
121. @neelotpal.dey
5. table-layout
- Description: Specifies the layout algorithm for rendering
tables
- Syntax: table-layout: auto|fixed;