CodeLab
Tutorials For Everyone
Run
Learn CSS
<!DOCTYPE html> <html> <head> <style> #container { width: 70%; padding: 20px; border: 2px solid #00f; margin: auto; box-shadow: 0 0 10px 0 #aaa; } #container h2{animation: anim-h 5s infinite;} #container p{animation: anim-p 5s infinite;} @keyframes anim-h {50% {font-weight: 100;}} @keyframes anim-p {50% {font-weight: 900;}} </style> </head> <body> <h1>Animatable 'font-weight' Property</h1> <hr> <p>Experience the changing font weight of the heading and paragraph using font-weight property.</p> <div id="container"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</p> </div> </body> </html>
Editor Commands
Ctrl
F
Find
Ctrl
G
Find Next
Ctrl
⇧
G
Find Previous
Ctrl
⇧
F
Find & Replace
Ctrl
]
Indent Code Right
Ctrl
[
Indent Code Left
⇧
Tab
Auto Indent Code
Ctrl
/
Line Comment
Ctrl
Alt
/
Block Comment
TutsInsider Actions
Alt
S
Run Code
Ctrl
C
Copy Editor Code
Ctrl
A
Select All Editor Code
Ctrl
S
Save/Download
Ctrl
Alt
X
Rotate
Ctrl
Alt
T
Switch Theme
Ctrl
⇧
C
Open Console
Esc
Close Console