CSS

1|Page | www.skyrims.com | 08030439843

 CSS Properties and Concepts
Basic Concepts
 Selectors
o element (e.g., p): Selects all <p> elements
o .class (e.g., .example): Selects all elements with
class="example"
o #id (e.g., #example): Selects the element with id="example"
o *: Universal selector, selects all elements
o [attribute=value] (e.g., [type="text"]): Selects elements with
the specified attribute and value
 Comments
o /* This is a comment */: CSS comments
Text and Font
 Font Family
o font-family: Specifies the font of an element (e.g., font-
family: Arial, sans-serif;)
 Font Size
o font-size: Specifies the size of the font (e.g., font-size: 16px;)
 Font Weight
o font-weight: Specifies the weight of the font (e.g., font-
weight: bold;)

2|Page | www.skyrims.com | 08030439843

  Font Style
o font-style: Specifies the style of the font (e.g., font-style:
italic;)
 Text Color
o color: Specifies the color of the text (e.g., color: #333;)
 Text Alignment
o text-align: Specifies the horizontal alignment of text (e.g.,
text-align: center;)
 Text Decoration
o text-decoration: Specifies the decoration added to text (e.g.,
text-decoration: underline;)
 Text Transform
o text-transform: Controls the capitalization of text (e.g., text-
transform: uppercase;)
 Line Height
o line-height: Specifies the height of a line (e.g., line-height:
1.5;)
Box Model
 Width and Height
o width: Specifies the width of an element (e.g., width:
100px;)
o height: Specifies the height of an element (e.g., height:
200px;)

3|Page | www.skyrims.com | 08030439843

  Padding
o padding: Specifies the padding inside an element (e.g.,
padding: 10px;)
 Margin
o margin: Specifies the margin outside an element (e.g.,
margin: 20px;)
 Border
o border: Specifies the border around an element (e.g.,
border: 1px solid #000;)
Background and Color
 Background Color
o background-color: Specifies the background color of an
element (e.g., background-color: #f0f0f0;)
 Background Image
o background-image: Specifies the background image of an
element (e.g., background-image: url('image.jpg');)
 Background Repeat
o background-repeat: Specifies if/how the background image
will repeat (e.g., background-repeat: no-repeat;)
 Background Position
o background-position: Specifies the starting position of a
background image (e.g., background-position: center;)
 Background Size

4|Page | www.skyrims.com | 08030439843

 o background-size: Specifies the size of the background image
(e.g., background-size: cover;)
Positioning and Display
 Display
o display: Specifies how an element is displayed (e.g., display:
block;, display: inline-block;, display: none;)
 Position
o position: Specifies the type of positioning for an element
(e.g., position: relative;, position: absolute;, position: fixed;)
 Top, Right, Bottom, Left
o top, right, bottom, left: Specifies the position of an element
(e.g., top: 10px;)
 Float
o float: Specifies whether or not an element should float (e.g.,
float: left;)
 Clear
o clear: Specifies what elements can float beside the cleared
element and on which side (e.g., clear: both;)
Flexbox
 Display Flex
o display: flex;: Specifies a flex container
 Flex Direction
o flex-direction: Specifies the direction of the flex items (e.g.,
flex-direction: row;, flex-direction: column;)

5|Page | www.skyrims.com | 08030439843

  Justify Content
o justify-content: Specifies the alignment along the main axis
(e.g., justify-content: center;)
 Align Items
o align-items: Specifies the alignment along the cross axis
(e.g., align-items: center;)
 Flex Wrap
o flex-wrap: Specifies whether the flex items should wrap or
not (e.g., flex-wrap: wrap;)
Animation and Transition
 Transition
o transition: Specifies the transition effect (e.g., transition: all
0.3s ease;)
 Transform
o transform: Applies a 2D or 3D transformation to an element
(e.g., transform: rotate(45deg);)
 Animation
o animation: Specifies the animation (e.g., animation: slide-in
2s ease-in-out;)
 Keyframes
o @keyframes: Defines the keyframes for the animation (e.g.,
@keyframes slide-in { from { transform: translateX(-100%); }
to { transform: translateX(0); } })
Responsive Design

6|Page | www.skyrims.com | 08030439843

  Media Queries
o @media: Applies styles based on the media type and/or
specific conditions (e.g., @media (max-width: 600px) { ... })
Pseudo-Classes and Pseudo-Elements
 Pseudo-Classes
o :hover: Applies styles when an element is hovered (e.g.,
a:hover { color: red; })
o :active: Applies styles when an element is activated
o :focus: Applies styles when an element is focused
o :nth-child(n): Selects elements based on their position in a
group of siblings
 Pseudo-Elements
o ::before: Inserts content before an element's content
o ::after: Inserts content after an element's content
Other Important Properties
 Opacity
o opacity: Specifies the transparency of an element (e.g.,
opacity: 0.5;)
 Visibility
o visibility: Specifies whether an element is visible or not (e.g.,
visibility: hidden;)
 Z-Index
o z-index: Specifies the stack order of an element (e.g., z-
index: 10;)
7|Page | www.skyrims.com | 08030439843
 Overflow
o overflow: Specifies what happens if the content overflows
an element's box (e.g., overflow: hidden;, overflow: auto;)
 Cursor
o cursor: Specifies the type of cursor to be displayed (e.g.,
cursor: pointer;)

8|Page | www.skyrims.com | 08030439843