2026-01-10 00:23:33 -05:00
import { _ as a , c as s , o as t , ah as n } from "./chunks/framework.j4Nev8bF.js" ; const g = JSON . parse ( '{"title":"HTML & CSS","description":"","frontmatter":{},"headers":[],"relativePath":"rebel_coding/step1.md","filePath":"rebel_coding/step1.md"}' ) , i = { name : "rebel_coding/step1.md" } ; function l ( o , e , p , r , h , d ) { return t ( ) , s ( "div" , null , [ ... e [ 0 ] || ( e [ 0 ] = [ n ( ` <h1 id="html-css" tabindex="-1">HTML & CSS <a class="header-anchor" href="#html-css" aria-label="Permalink to “HTML & CSS”">
2026-01-09 23:05:52 -05:00
< span class = "line" > < span > & lt ; head & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; title & gt ; Home & lt ; / t i t l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h e a d & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; body & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h1 & gt ; Welcome to Rebel Coding & lt ; / h 1 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / b o d y & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h t m l & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h a t & # 3 9 ; s i t ! I t ’ s o u r l i t t l e d o l l h o u s e o f a w e b p a g e ! < / p > < p > G r a n t e d . . . a l l t h e w e b p a g e h a s , i s a h e a d l i n e t h a t s a y s & q u o t ; W e l c o m e t o R e b e l C o d i n g & q u o t ; . < / p > < h 2 i d = " h t m l - p a g e - s t r u c t u r e " t a b i n d e x = " - 1 " > < a h r e f = " # h t m l - p a g e - s t r u c t u r e " > # < / a > H T M L P a g e S t r u c t u r e < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # h t m l - p a g e - s t r u c t u r e " a r i a - l a b e l = " P e r m a l i n k t o “ # H T M L P a g e S t r u c t u r e ” " > < / a > < / h 2 > < p > S o w h a t ’ s g o i n g o n w i t h t h e s e f i r s t H T M L t a g s ? < / p > < p > < c o d e > & l t ; h t m l & g t ; & l t ; h e a d & g t ; & l t ; / h e a d & g t ; & l t ; b o d y & g t ; & l t ; / b o d y & g t ; & l t ; / h t m l & g t ; < / c o d e > < / p > < p > < s t r o n g > H T M L : < / s t r o n g > D e c l a r a t i v e c o n t a i n e r s t o a n n o u n c e w h a t l a n g u a g e w e & # 3 9 ; r e u s i n g ; y o u m i g h t a l s o y o u s e e a D O C H T M L t a g . < / p > < p > < s t r o n g > H e a d : < / s t r o n g > U n s e e n i n f o r m a t i o n , p u l l i n g i n f i l e s . < / p > < p > L a t e r o n w e ’ l l b e g e t t i n g o u r o w n s e t o f f i l e s t o s t a r t w i t h ; a n d i n t h e < c o d e > & l t ; h e a d & g t ; < / c o d e > t a g y o u ’ l l s e e a b u n c h o f < c o d e > & l t ; l i n k & g t ; < / c o d e > t a g s t h a t h a v e l i n k s t o o t h e r f i l e s . T h i s i s l i k e t h e b r a i n g a t h e r i n g a l l t h e i n f o r m a t i o n t h e < c o d e > & l t ; b o d y & g t ; < / c o d e > b e l o w w i l l n e e d t o c a r r y o u t i t s p r e s c r i b e d o p e r a t i o n s . < / p > < p > < s t r o n g > B o d y : < / s t r o n g > W h e r e a l l t h e v i s i b l e a c t i o n h a p p e n s ! < / p > < h 2 i d = " n e s t e d - p r o p e r t i e s - a t t r i b u t e s " t a b i n d e x = " - 1 " > < a h r e f = " # n e s t e d - p r o p e r t i e s - a t t r i b u t e s " > # < / a > N e s t e d P r o p e r t i e s / A t t r i b u t e s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # n e s t e d - p r o p e r t i e s - a t t r i b u t e s " a r i a - l a b e l = " P e r m a l i n k t o “ # N e s t e d P r o p e r t i e s / A t t r i b u t e s ” " > < / a > < / h 2 > < p > < s t r o n g > B a s i c c o d i n g c o n c e p t # 2 : < / s t r o n g > n e s t e d p r o p e r t i e s , a t t r i b u t e s a n d o b j e c t s . < / p > < p > L e t ’ s i n t r o d u c e t h e < c o d e > & l t ; h 1 & g t ; < / c o d e > t a g s w i t h t h i s t o p i c . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; h 1 & g t ; H e a d e r 1 & l t ; / h 1 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h2 & gt ; Header 2 & lt ; / h 2 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h3 & gt ; Header 3 & lt ; / h 3 & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > B u t w h a t i f I w a n t H e a d e r 1 t o b e t h e c o l o r g r e e n ? ? < / p > < p > < c o d e > & l t ; h 1 s t y l e = ” c o l o r : g r e e n ; ” & g t ; H e a d e r 1 & l t ; / h 1 & g t ; < / c o d e > < / p > < p > I m p o r t a n t t o n o t i c e h o w d e e p l y n e s t e d s t r u c t u r e s c a n b e c o m e . < / p > < p > H e r e w e h a v e a p r o p e r t y < c o d e > c o l o r < / c o d e > w i t h i n a p r o p e r t y < c o d e > s t y l e < / c o d e > w i t h i n a t a g < c o d e > h 1 < / c o d e > ! ! < / p > < p > A n d t h i s i s j u s t t h e b e g i n n i n g o f t h e i d e a ; h o w o b j e c t s c a n c o n t a i n o t h e r o b j e c t s , b e t h e y v a r i a b l e s , f u n c t i o n s o r e n t i r e l y o t h e r o b j e c t s t h e m s e l v e s ~ i n J a v a S c r i p t e v e r y t h i n g i s a n o b j e c t t h o u g h ~ ~ e e k s , m o r e l a t e r ! < / p > < h 2 i d = " b a s i c - h t m l - t a g s " t a b i n d e x = " - 1 " > < a h r e f = " # b a s i c - h t m l - t a g s " > # < / a > B a s i c H T M L T a g s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # b a s i c - h t m l - t a g s " a r i a - l a b e l = " P e r m a l i n k t o “ # B a s i c H T M L T a g s ” " > < / a > < / h 2 > < p > A s w e ’ v e j u s t n o t e d , H T M L t a g s h a v e a b e g i n n i n g a n d a n e n d : < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; t i t l e & g t ; H o m e : R e b e l C o d i n g & l t ; / t i t l e & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h i s t i t l e t a g i s a n e x c e l l e n t e x a m p l e ; i t d e f i n e s t h e t i t l e o f o u r w e b p a g e . < / p > < p > H T M L t a g s a l s o h a v e p r o p e r t i e s , o r a t t r i b u t e s , o f t h e i r o w n . < / p > < p > A n o t h e r c o m m o n H T M L t a g i s t h e < c o d e > & l t ; a & g t ; < / c o d e > t a g , o r a n c h o r t a g . < / p > < p > T h e H T M L t a g i s w h a t c o n n e c t s t h e w e b , u s i n g i t s < e m > p r o p e r t y < / e m > ‘ h r e f ’ . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; a h r e f = ” h t t p : / / w w w . d u c k d u c k g o . c o m ” & g t ; D u c k D u c k G o & l t ; / a & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > A n d t a g s c a n h a v e m o r e t h a n o n e a t t r i b u t e , o r p r o p e r t y ; a n i m p o r t a n t o n e i s t h e c l a s s p r o p e r t y : < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; t a b l e c l a s s = ” t a b l e ” & g t ; & l t ; / t a b l e & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > A s w e ’ l l s e e l a t e r , c l a s s e s ( a n d i d ’ s ) c a n b e u s e d t o m o d i f y a g r o u p o f c o m p o n e n t s i n o u r w e b p a g e / a p p l i c a t i o n . < / p > < p > L i s t s a r e j u s t g o o d t o g o o v e r ; b o t h o r d e r e d , a n d u n o r d e r e d l i s t s ; c a n y o u t e l l t h e d i f f e r e n c e ? < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; u l & g t ; & l t ; l i & g t ; & l t ; / l i & g t ; & l t ; / u l & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; ol & gt ; & lt ; li & gt ; & lt ; / l i & g t ; & l t ; / o l & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h e s e H T M L t a g s d o n ’ t s e e m t o e n d , o r d o t h e y ? < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; i m g / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; br / & gt ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h a t ’ s b e c a u s e t h e e n d i n g i s e m b e d d e d a t t h e t a i l i n g s l a s h : 0 ) < / p > < p > S o m e t a g s h a v e n o i n f o r m a t i o n t o i n c l u d e b e t w e e n a s t a r t a n d e n d p o i n t , s u c h a s i m a g e s o r l i n e b r e a k s . A n d s o , t h e e x c e p t i o n i s m e n d e d b y p l a c i n g a n e n d s l a s h a s s u c h . < / p > < p > R e m e m b e r o u r < c o d e > & l t ; l i n k / & g t ; < / c o d e > t a g s w i t h i n t h e < c o d e > & l t ; h e a d & g t ; < / c o d e > t a g ? S a m e t h i n g ; n o i n f o n e e d e d t o b e i n c l u d e d b e t w e e n t h e t a g s ; a l l o f t h e i n f o i s g a t h e r e d t h r o u g h t h e t a g ’ s p r o p e r t i e s . < / p > < h 2 i d = " c s s - c a s c a d i n g - s t y l e - s h e e t s " t a b i n d e x = " - 1 " > < a h r e f = " # c s s - c a s c a d i n g - s t y l e - s h e e t s " > # < / a > C S S - C a s c a d i n g S t y l e S h e e t s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # c s s - c a s c a d i n g - s t y l e - s h e e t s " a r i a - l a b e l = " P e r m a l i n k t o “ # C S S - C a s c a d i n g S t y l e S h e e t s ” " > < / a > < / h 2 > < p > < s t r o n g > C a s c a d i n g S t y l e S c r i p t s < / s t r o n g > a r e < e m > s c r i p t s t h a t s t y l e o u r c o d e < / e m > ; w e & # 3 9 ; l l e x p l a i n t h e c a s c a d i n g p a r t i n a m o m e n t . < / p > < p > I f I w a n t t o c h a n g e t h e c o l o r o f a n i t e m , I w o u l d u s e C S S ; u t i l i z i n g t h e s t y l e a t t r i b u t e o f t h e h e a d e r H T M L t a g . W e s a w t h i s e a r l i e r . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; h 1 s t y l e = ” c o l o r : # F E 2 3 D D ; ” & g t ; R e b e l C o d i n g & l t ; / h 1 & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > T h e r e a r e m a n y d i f f e r e n t w a y s t o u s e C S S , a n d l i k e J a v a S c r i p t , t h e n u m b e r o f C S S l i b r a r i e s s e e m s t o a l w a y s b e g r o w i n g . < / p > < p > R e g a r d l e s s , t h e b a s i c s a r e a s f o l l o w s : < / p > < h 3 i d = " i n l i n e " t a b i n d e x = " - 1 " > < a h r e f = " # i n l i n e " > # < / a > I n l i n e < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # i n l i n e " a r i a - l a b e l = " P e r m a l i n k t o “ # I n l i n e ” " > < / a > < / h 3 > < p > H e r e w e a d d t h e s t y l i n g c o d e d i r e c t l y w i t h i n t h e t a g t o w h i c h i t i s t o b e a p p l i e d ; a s s h o w n a b o v e . < / p > < p > W e a d d a < e m > s t y l e < / e m > p r o p e r t y t o t h e t a g w e ’ r e m o d i f y i n g , a n d t h e n i n c l u d e o u r p r e f e r r e d a u g m e n t a t i o n . W e a r e c h a n g i n g t h e c o l o r , a n d s i z e o f o u r < c o d e > & l t ; h 1 & g t ; < / c o d e > t e x t . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; h t m l & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; head & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; title & gt ; Home & lt ; / t i t l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h e a d & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; body & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h1 style = & quot ; color : # 42 FD23 ; font - size : 5 em ; & quot ; & gt ; Welcome to SF & lt ; / h 1 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / b o d y & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h t m l & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 3 i d = " e m b e d d e d " t a b i n d e x = " - 1 " > < a h r e f = " # e m b e d d e d " > # < / a > E m b e d d e d < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # e m b e d d e d " a r i a - l a b e l = " P e r m a l i n k t o “ # E m b e d d e d ” " > < / a > < / h 3 > < p > A s w e a l l u d e d t o e a r l i e r , w h a t m a k e s C S S s o u s e f u l i s h o w w e c a n u s e i t t o m a k e a d j u s t m e n t s t o a w h o l e g r o u p s o f t a g s ! < / p > < p > I n s t e a d o f i n c l u d i n g a < e m > s t y l e < / e m > p r o p e r t y o n t h e < c o d e > & l t ; h 1 & g t ; < / c o d e > t a g , w e u s e t h e < c o d e > & l t ; s t y l e & g t ; < / c o d e > t a g u p i n t h e h e a d e r ! N o w w e a r e a b l e t o l i s t t h e t a g s w e w a n t t o a f f e c t , a n d d e f i n e o u r p r e f e r e n c e s . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; h t m l & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; head & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; title & gt ; Home & lt ; / t i t l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; style & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > h1 { < / s p a n > < / s p a n >
< span class = "line" > < span > color : # 42 FD23 ; < / s p a n > < / s p a n >
< span class = "line" > < span > } < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / s t y l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h e a d & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; body & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h1 & gt ; Welcome to Rebel Coding & lt ; / h 1 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / b o d y & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h t m l & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 3 i d = " e m b e d d e d - c l a s s " t a b i n d e x = " - 1 " > < a h r e f = " # e m b e d d e d - c l a s s " > # < / a > E m b e d d e d + C l a s s < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # e m b e d d e d - c l a s s " a r i a - l a b e l = " P e r m a l i n k t o “ # E m b e d d e d + C l a s s ” " > < / a > < / h 3 > < p > W h a t i f y o u d o n & # 3 9 ; t w a n t t o a f f e c t e v e r y < c o d e > & l t ; h 1 & g t ; < / c o d e > t a g ? < / p > < p > W e u s e c l a s s e s ! C l a s s e s a r e h e a v i l y u s e d i n C S S a n d s t y l i n g l i b r a r i e s . < / p > < p > N o t i c e h o w t h e < e m > c l a s s < / e m > a t t r i b u t e , i n a n H T M L t a g , a l l o w s f o r m o r e t h a n o n e p a r a m e t e r , s e p a r a t e d b y a s p a c e . N o t i c e t h a t t h e c l a s s a t t r i b u t e c a n c o n t a i n m o r e t h a n o n e c l a s s . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; h t m l & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; head & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; title & gt ; Home & lt ; / t i t l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; style & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > h1 { < / s p a n > < / s p a n >
< span class = "line" > < span > color : # 42 FD23 ; < / s p a n > < / s p a n >
< span class = "line" > < span > } < / s p a n > < / s p a n >
< span class = "line" > < span > . headline { < / s p a n > < / s p a n >
< span class = "line" > < span > text - decoration : underline ; < / s p a n > < / s p a n >
< span class = "line" > < span > } < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / s t y l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h e a d & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; body & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h1 class = & quot ; headline other - class & quot ; & gt ; Welcome to SF & lt ; / h 1 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / b o d y & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h t m l & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < p > W i t h i n o u r < c o d e > s t y l e < / c o d e > t a g , w e u s e t h e < c o d e > . < / c o d e > n o t a t i o n t o i n d i c a t e t h a t a n i t e m i s a c l a s s ; < c o d e > # < / c o d e > i s u s e d t o d e n o t e i d s . < / p > < h 3 i d = " i m p o r t e d " t a b i n d e x = " - 1 " > < a h r e f = " # i m p o r t e d " > # < / a > I m p o r t e d < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # i m p o r t e d " a r i a - l a b e l = " P e r m a l i n k t o “ # I m p o r t e d ” " > < / a > < / h 3 > < p > L a s t l y w e m u s t r e a l i z e t h a t f o r a n e n t i r e a p p l i c a t i o n t h e r e w i l l b e a w h o l e h e a p o f C S S c o d e . A n d h a v i n g i t a l l i n t h e s a m e f i l e a s t h e b a s e i n d e x f i l e w o u l d b e r i d i c u l o u s ! < / p > < p > S o , w e a r e g o i n g t o w r i t e a c o m p l e t e l y s e p a r a t e f i l e , a n d < e m > i m p o r t < / e m > i t i n t o o u r i n d e x f i l e . < / p > < p > W e d o t h i s u s i n g a < c o d e > & l t ; l i n k & g t ; < / c o d e > t a g , t h a t c o n t a i n s t w o p r o p e r t i e s , < e m > r e l < / e m > a n d < e m > h r e f < / e m > . < e m > r e l < / e m > d e f i n e s t h e r e l a t i o n s h i p o f t h e f i l e b e i n g c o n s u m e d ; a n d < e m > h r e f < / e m > p r o v i d e s t h e a d d r e s s a t w h i c h t h e f i l e c a n b e f o u n d , < e m > h y p e r l i n k - r e f e r e n c e < / e m > . < / p > < d i v c l a s s = " l a n g u a g e - " > < b u t t o n t i t l e = " C o p y C o d e " c l a s s = " c o p y " > < / b u t t o n > < s p a n c l a s s = " l a n g " > < / s p a n > < p r e c l a s s = " s h i k i s h i k i - t h e m e s g i t h u b - l i g h t g i t h u b - d a r k " s t y l e = " - - s h i k i - l i g h t : # 2 4 2 9 2 e ; - - s h i k i - d a r k : # e 1 e 4 e 8 ; - - s h i k i - l i g h t - b g : # f f f ; - - s h i k i - d a r k - b g : # 2 4 2 9 2 e ; " t a b i n d e x = " 0 " d i r = " l t r " > < c o d e > < s p a n c l a s s = " l i n e " > < s p a n > & l t ; h t m l & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; head & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; title & gt ; Home & lt ; / t i t l e & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; link rel = & quot ; stylesheet & quot ; href = & quot ; . / style . css & quot ; / & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h e a d & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; body & gt ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; h1 & gt ; Welcome to Rebel Coding & lt ; / h 1 & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / b o d y & g t ; < / s p a n > < / s p a n >
< span class = "line" > < span > & lt ; / h t m l & g t ; < / s p a n > < / s p a n > < / c o d e > < / p r e > < / d i v > < h 3 i d = " s o - w h a t - d o e s - c a s c a d i n g - s t y l e s - s h e e t s - m e a n " t a b i n d e x = " - 1 " > < a h r e f = " # s o - w h a t - d o e s - c a s c a d i n g - s t y l e s - s h e e t s - m e a n " > # < / a > S o w h a t d o e s C a s c a d i n g S t y l e s S h e e t s M e a n ? < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # s o - w h a t - d o e s - c a s c a d i n g - s t y l e s - s h e e t s - m e a n " a r i a - l a b e l = " P e r m a l i n k t o “ # S o w h a t d o e s C a s c a d i n g S t y l e s S h e e t s M e a n ? ” " > < / a > < / h 3 > < p > < s t r o n g > C a s c a d i n g < / s t r o n g > r e f e r s t o h o w i n s t r u c t i o n s a r e i n t e r p r e t e d . < / p > < p > W h a t i f t h e < e m > s t y l e . c s s < / e m > s c r i p t s s a y s < c o d e > & l t ; h 1 & g t ; < / c o d e > t a g s s h o u l d a l l b e g r e e n , b u t a s t y l e p r o p e r t y o n t h e p a g e s p e c i f i e s t h a t t h i s s p e c i f i c < c o d e > & l t ; h 1 & g t ; < / c o d e > t a g s h o u l d b e b l u e ? ? W h i c h w i l l t a k e p r e c e d e n c e ? < / p > < p > A n d w h a t i f a s t y l e a t t r i b u t e i s o n a s p e c i f i c < c o d e > & l t ; h 1 & g t ; < / c o d e > t a g , s a y i n g i t s h o u l d b e y e l l o w ? < / p > < p > < e m > M o s t o f t h e t i m e < / e m > t h e p a g e , o r c o m p o n e n t , s p e c i f i c p a r a m e t e r / p r o p e r t y / a t t r i b u t e w i l l t a k e p r e c e d e n c e i n s t y l i n g t h e t a g . A n d t h i s i s a t t r i b u t e d t o t h e c a s c a d i n g n a t u r e o f s t y l e s c r i p t s 😃 < / p > < o l > < l i > I n l i n e C S S m o d i f i c a t i o n s < / l i > < l i > M o d s i n t h e < c o d e > & l t ; h e a d & g t ; < / c o d e > t a g < / l i > < l i > I m p o r t e d S c r i p t s i n d e s c e n d i n g o r d e r ( l a s t t o l o a d t a k e p r e c e d e n c e . ) < / l i > < / o l > < h 2 i d = " w i r e f r a m i n g " t a b i n d e x = " - 1 " > < a h r e f = " # w i r e f r a m i n g " > # < / a > W i r e F r a m i n g < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # w i r e f r a m i n g " a r i a - l a b e l = " P e r m a l i n k t o “ # W i r e F r a m i n g ” " > < / a > < / h 2 > < p > N o w y o u n e e d t o s t a r t d e s i g n i n g y o u r w e b s i t e ! ! A n d t h e f i r s t s t e p i s t o d r a w a p i c t u r e . < / p > < p > Y u p , y o u h e a r d m e - - b u s t o u t t h e c r a y o n a n d m a r k e r s , w e g o t t a d r a w ! < / p > < p > T h a t ’ s w h a t w i r e f r a m i n g i s - - d r a w i n g a r o u g h o u t l i n e o f h o w y o u w a n t y o u r w e b p a g e t o l o o k - - d e c i d i n g w h e r e y o u w a n t c e r t a i n s e c t i o n s t o a p p e a r ; h e c k d e c i d i n g w h a t s e c t i o n s y o u w a n t t o h a v e i n t h e f i r s t p l a c e ! < / p > < p > H o w d o y o u w a n t y o u r m e n u t o o p e r a t e ? < / p > < p > A r e y o u w a n t i n g t o m a k e a s i n g l e , o r m u l t i - , p a g e s i t e ? < / p > < p > T h e s e a r e t h e q u e s t i o n s w i r e f r a m i n g h e l p s u s t o a n s w e r ; a n d w h e n w e ’ r e r e a d y , w e s i m p l y t r a n s c r i b e o u r d r a w i n g s i n t o a n H T M L / C S S s t r u c t u r e . < / p > < h 2 i d = " y o u r - w e b s i t e - b u i l d - o u t " t a b i n d e x = " - 1 " > < a h r e f = " # y o u r - w e b s i t e - b u i l d - o u t " > # < / a > Y o u r W e b s i t e B u i l d - O u t < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # y o u r - w e b s i t e - b u i l d - o u t " a r i a - l a b e l = " P e r m a l i n k t o “ # Y o u r W e b s i t e B u i l d - O u t ” " > < / a > < / h 2 > < p > Y o u ’ v e g o t a f e w o p t i o n s t o s t a r t w i t h - y o u c a n s t a r t w i t h a b l a n k p a g e o r u s e o n e o f t h e t e m p l a t e s p r o v i d e d ! < / p > < h 3 i d = " b a s i c " t a b i n d e x = " - 1 " > < a h r e f = " # b a s i c " > # < / a > B a s i c < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # b a s i c " a r i a - l a b e l = " P e r m a l i n k t o “ # B a s i c ” " > < / a > < / h 3 > < p > D i s p l a y s p a r a g r a p h s , l i n k s , l i s t s a n d t a b l e s . < / p > < h 3 i d = " b a s i c - 1 " t a b i n d e x = " - 1 " > < a h r e f = " # b a s i c - 2 " > # < / a > B a s i c + < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # b a s i c - 1 " a r i a - l a b e l = " P e r m a l i n k t o “ # B a s i c + ” " > < / a > < / h 3 > < p > I m p l e m e n t s J a v a S c r i p t < / p > < h 2 i d = " t e m p l a t i n g - w i t h - b o o t s t r a p " t a b i n d e x = " - 1 " > < a h r e f = " # t e m p l a t i n g - w i t h - b o o t s t r a p " > # < / a > T e m p l a t i n g w i t h B o o t s t r a p < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # t e m p l a t i n g - w i t h - b o o t s t r a p " a r i a - l a b e l = " P e r m a l i n k t o “ # T e m p l a t i n g w i t h B o o t s t r a p ” " > < / a > < / h 2 > < p > O n e o f t h e f i r s t C S S l i b r a r i e s w a s c a l l e d B o o t s t r a p w h i c h u s e s a g r i d s y s t e m t o c r e a t e m o b i l e - f r i e n d l y w e b p a g e s . < / p > < p > L e t ’ s d i g i n t o h o w i t d o e s t h a t . < / p > < p > A f t e r p u l l i n g i n o u r n e c e s s a r y l i b r a r i e s , B o o t s t r a p u s e s a c o l l e c t i o n o f c l a s s e s t o d e f i n e v a r i o u s p a r a m e t e r s . T h e g r i d - s p e c i f i c c l a s s e s a r e b e s t p a i r e d w i t h < c o d e > & l t ; d i v & g t ; < / c o d e > & a m p ; < c o d e > & l t ; s p a n & g t ; < / c o d e > t a g s ; w h i l e i t b e i n g i m p o r t a n t t o n o t e , t a g s c a n h a v e m u l t i p l e c l a s s e s . < / p > < p r e > < c o d e > & l t ; d i v c l a s s = ” c o l - l g - 6 c o l - m d - 8 c o l - s m - 1 2 c o l - x s - 1 2 ” & g t ; & l t ; / d i v & g t ;
< / c o d e > < / p r e > < p > B o o t s t r a p o p e r a t e s o f f o f a 1 2 b l o c k g r i d s y s t e m w i t h f o u r a d j u s t a b l e d i s p l a y s i z e c a t e g o r i e s : l a r g e , m e d i u m , s m a l l , e x t r a - s m a l l . < / p > < p > I n t h e p r e v i o u s l i n e o f c o d e w e s a i d t h a t w e w a n t e d t h e c o n t e n t s o f t h a t < c o d e > & l t ; d i v & g t ; < / c o d e > t a g t o o c c u p y s i x b l o c k s o n a l a r g e s c r e e n , e i g h t b l o c k s o n a m e d i u m - s i z e d s c r e e n , a n d 1 2 b l o c k s , o r t h e e n t i r e p a g e , o n s m a l l e r s c r e e n s . < / p > < h 2 i d = " c s s - m o r e - i n - d e p t h - s a s s - l e s s " t a b i n d e x = " - 1 " > < a h r e f = " # c s s - m o r e - i n - d e p t h - s a s s - l e s s " > # < / a > C S S M o r e I n - D e p t h ( S A S S / L E S S ) < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # c s s - m o r e - i n - d e p t h - s a s s - l e s s " a r i a - l a b e l = " P e r m a l i n k t o “ # C S S M o r e I n - D e p t h ( S A S S / L E S S ) ” " > < / a > < / h 2 > < p > W h a t i s t h i s a l l a b o u t ? C S S P r e p r o c e s s o r l a n g u a g e t h a t i s c o m p i l e d i n t o C S S . < / p > < p > V a r i a b l e s , m i x i n s , e t c - - < / p > < p > < a h r e f = " h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / S a s s * ( s t y l e s h e e t _ l a n g u a g e ) " t a r g e t = " _ b l a n k " r e l = " n o r e f e r r e r " > h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / S a s s _ ( s t y l e s h e e t _ l a n g u a g e ) < / a > < / p > < p > < a h r e f = " h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / L e s s * ( s t y l e s h e e t _ l a n g u a g e ) " t a r g e t = " _ b l a n k " r e l = " n o r e f e r r e r " > h t t p s : / / e n . w i k i p e d i a . o r g / w i k i / L e s s _ ( s t y l e s h e e t _ l a n g u a g e ) < / a > < / p > < h 1 i d = " l o o k i n g - a h e a d - t o - m o b i l e " t a b i n d e x = " - 1 " > L o o k i n g A h e a d t o M o b i l e < a c l a s s = " h e a d e r - a n c h o r " h r e f = " # l o o k i n g - a h e a d - t o - m o b i l e " a r i a - l a b e l = " P e r m a l i n k t o “ L o o k i n g A h e a d t o M o b i l e ” " > < / a > < / h 1 > < h r > < p > B a c k t o t h e g r i d s t r u c t u r e - - - w h a t a r e a p p s ? < / p > < p > < s t r o n g > U s i n g a n i n s p e c t o r . < / s t r o n g > I f y o u ’ r e u s i n g F i r e f o x o r C h r o m e , r i g h t c l i c k o n a n y b r o w s e r w i n d o w a n d c h o o s e t h e I n s p e c t E l e m e n t o p t i o n . < / p > < p > I n t h e u p p e r b a r o f t h e n e w w i n d o w t h a t a p p e a r s w i l l b e a n o p t i o n t o t o g g l e b e t w e e n f u l l - s c r e e n a n d a l t e r n a t e v i e w . < / p > < p > Y o u c a n d o t h i s t o s e e h o w t h e m o b i l e f r i e n d l y d e s i g n y o u c r e a t e d u s i n g B o o t s t r a p , w i l l a p p e a r o n v a r i o u s - s i z e d s c r e e n s . < / p > ` , 1 0 7 ) ] ) ] ) } c o n s t b = a ( i , [ [ " r e n d e r " , l ] ] ) ; e x p o r t { g a s _ _ p a g e D a t a , b a s d e f a u l t } ;
