×
Night mode
Sign up
Login
Results: 1578
Notes
  • Newest first
  • Oldest first
  • Newest first(All)
  • Oldest first(All)
@media queries 
@media query
is used for special devices. In the example below 
@media query
is for devices with width less than or equal to 
600px
#main {
    width: 70%;
    float: left;
    padding: 0 30px;
    box-sizing: border-box;
}
#sidebar {
    width: 30%;
    float: right;
    padding: 0 30px;
    box-sizing: border-box;
}
@media(max-width:600px) {
    #main {
        width: 100%;
        float: none;
    }
    #sidebar {
        width: 100%;
        float: none;
    }
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
min-height 
div.mydiv {
  min-height: 100px;
}
The div will start at 100px, if the content pushes the div beyond 100px it will continue growing. However if you have content that takes less than 100px it will still take 100px in space.
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
display:inline
Displays an element as an inline element (like 
<span>
). Any height and width properties will have no effect
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
first-child, last-child, nth-child(), nth-child(even)
We can use 
first-child
to select only the first child element:
.my-list li:first-child {
    background-color: red;
}
last-child
is used to select the last member from the list:
my-list li:last-child {
    background-color: blue;
}
nth-child(5)
is used to select 
nth
element. In the example we select 5th element
.my-list li:nth-child(5) {
    background-color: yellow;
}
We can also use 
nth-child(even)
to select even members from the list
.my-list li:nth-child(even) {
    background-color: grey;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
position:fixed
The element is positioned relative to the browser window
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
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
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS
2
top
The top property affects the vertical position of a positioned element. This property has no effect on non-positioned elements (If position is 
static
)
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS
1
position:absolute CODE
The element is positioned relative to its first positioned (not static) ancestor element
.parent {
    position: relative;
}
.parent h1 {
    position: absolute;
    top: 10px;
}
https://youtu.be/aFtByxWjfLY?t=200
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
2
attribute in CSS selector
We can make CSS selector more specific using attribute's certain value
.my-form input[type="text"]{
    padding: 8px;
    width: 100%;
}
In this example, only inputs will be selected with types 
text
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
2
display
We can convert inline 
label
element to block level element using the code below. So they will take the full width of the container
.my-form label {
    display: block;
}
by Valeri Tandilashvili
5 years ago
0
CSS
properties
CSS Crash Course For Absolute Beginners
1
Results: 1578