⌬ Aytict Academy
🎨

CSS Beginner

Selectors, colours, typography and the box model.

3 lessons 7 tasks ⚡ Live compiler
Lessons Compiler Quiz Certificate

📚 Lessons

1 Selectors & rules

CSS applies styling via rules: a selector targets elements and a declaration block sets properties. Target by tag, .class or #id.

h1 { color: #2563eb; }
p  { line-height: 1.6; }
.highlight { background: gold; padding: 4px; }

2 Colour & typography

Set colours with hex, rgb() or hsl(). Control text with font-family, font-size, font-weight and line-height.

body { font-family: system-ui; color: hsl(220 15% 20%); }
h1 { font-size: 2rem; font-weight: 800; }

3 The box model

Every element is content → padding → border → margin. Use box-sizing: border-box so width includes padding and border.

div {
  box-sizing: border-box;
  width: 200px; padding: 16px;
  border: 2px solid #2563eb; margin: 12px;
  background: #eff6ff;
}

⚡ CSS Compiler

Code runs live in a sandboxed frame, rendered by your browser.

CSS 

            

        

    







    
📝 Tasks

    
7 tasks across 3 pages — multiple-choice and fill-in (type the answer). Score 70% or higher to earn your certificate.

    

    






    
🎓 Certificate of Completion

    

        
🔒 Pass the quiz above (70%+) to unlock your downloadable certificate.