×
Clear all filters including search bar
Valeri Tandilashvili's CSS Notes
Results: 126
border-bottom shothand 
border-bottom: 3px dashed orange;
The above style is a shorthand property of the following three properties:
border-bottom-width: 20px; 
border-bottom-style: dotted; 
border-bottom-color: blue;
font shorthand 
font: bold italic 14px Tahoma;
The above style is a shorthand property of the following four properties: 
font-weight: bold; 
font-style:italic; 
font-size: 14px; 
font-family: Tahoma;
.class1 .class2 
.class1 .class2 h2{
    color: red;
}
Selects all 
<h2>
elements within 
.class2
that is a descendant of 
.class1
element
text-decoration, text-transform CODE
The text inside 
p
element will be all uppercase and underlined
p {
    text-decoration: underline;
    text-transform: uppercase;
}
position:sticky
An element with position: sticky; is positioned based on the user's scroll position
div.sticky {
  background-color: yellow;
  position: sticky;
  top: 0;
}
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place like 
position:fixed
child selectors
Selects all the 
p
elements that have 
div
element as a parent of any level
div p { 
    color: red; 
}
Selects all the 
p
elements that are children of the element with id 
#id1
#id1 p { 
    color: green; 
}
Selects all 
p
elements that have parent element with class 
.class1
.class1 p { 
    color: yellow; 
}
letter-spacing, word-spacing
We can style text using 
letter-spacing
and 
word-spacing
properties to have some space between letters and words
h1 {
    letter-spacing: 2px;
    word-spacing: 10px;
}
flex-grow property CODE
In this example, 
.logout
item will grow twice as quick as 
.home
item
.home {
    flex-grow: 1;
}
.logout{
    flex-grow: 2;
}
pseudo-element "first-letter"
We can style The first letter of the paragraph differently
p::first-letter {
    color: blue;  
    font-size: 20px;  
    font-weight: bold;  
    background-color: yellow;
}
pseudo-element "first-line"
We can style the first line of the paragraph text differently
p::first-line {
    color: blue;
    font-size: 20px;
    font-weight: bold;
    background-color: yellow;
}
Results: 126