CodeRunBox
Compiler
Glossary
Example
Course
HTML
CSS
JavaScript
Python
Swift
TypeScript
SQL
React
What is CSS?!importantAnimationBackground imageBlur() functionBorder colorBorder radiusBorder widthBordersBox modelBox shadowClass attributeClip pathColorCommentCursorDisplay propertyFirst-child selectorFlexboxFont familyFont sizeFont styleFont weightGapGradientGrid layoutHeightID selectorLetter spacingLinking a style sheetMarginMedia queryMinmax() functionN-th-child selectorObject fitOpacityOutlineOverflow propertyPaddingPixelsPointer eventsPosition propertyPseudo-classesPseudo-elementsRotateRounding an imageScale()SelectorsSpecificityText alignText shadowText wrapTransition propertyTranslate() propertyUnitsVariablewhite-spaceWidthZ-index

Linking a style sheet in CSS

To include a style sheet in an HTML file, we use the link element. <link> is a self-closing empty element and it goes inside the head element.


                  

                    html
                    
                  

                  

                       <head>
  <link>
 </head>
 <body>
  <h1>Water Puns</h1>
  <p> Why does water never laugh at jokes? It's not a fan of dry
   humor. </p>
 </body>

To know what kind of file to include, the opening link tag needs the rel attribute set using rel="stylesheet".


                  

                    css
                    
                  

                  

                     <head>
  <link rel="stylesheet">
 </head>
 <body>
  <h1>Water puns</h1>
  <p>Why are rivers amazing roommates? They go with the flow. </p>
 </body>

To specify the style sheet’s location, set the href attribute to "style.css".


                  

                    css
                    
                  

                  

                     <head>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <h1>Water Puns</h1>
  <p> Why are oceans so meticulous?<br> They like to be pacific. </p>
 </body>