CSS stands for Cascading Style Sheets. It is the language used to describe how HTML elements should be displayed on screen, paper, or in other media.

• HTML structures the content — headings, paragraphs, images, buttons, etc.
• CSS controls the appearance — colors, fonts, spacing, positioning, and layout.

Without CSS, websites look plain and boring — just black text on a white background. Think of HTML as the skeleton of a webpage, and CSS as the skin, clothes, and makeup that make it look good!

Some important reasons to use CSS:

• Separation of content and design: Keep the HTML for structure and CSS for styling separately. This makes websites easier to manage.
• Consistency: Style many pages or elements with the same rules by writing CSS once.
• Flexibility: Change the look of a website quickly by updating the CSS file without touching HTML.
• Responsiveness: Make your website look good on different devices like phones, tablets, and desktops.
• Improved User Experience: Attractive, readable, and well-laid-out content keeps users engaged.

You can add CSS to your HTML in three different ways:

3.3.1 Inline CSS

Directly inside an HTML tag using the style attribute.

Use case: Quick, small styling for a single element. \ Downside: Not recommended for large websites as it mixes content and design.

3.3.2 Internal CSS

Placed inside a `, -1); codePreview459b0a02aff7479cae03278b7a2291e8.setTheme('ace/theme/textmate'); // Attach try it yourself button listener document.getElementById(`try-it-459b0a02aff7479cae03278b7a2291e8`).addEventListener('click', () => { switchToEditor459b0a02aff7479cae03278b7a2291e8(); }); function switchToEditor459b0a02aff7479cae03278b7a2291e8() { // Initialize the editor editor459b0a02aff7479cae03278b7a2291e8 = ace.edit("459b0a02aff7479cae03278b7a2291e8") setLanguage459b0a02aff7479cae03278b7a2291e8(language459b0a02aff7479cae03278b7a2291e8); editor459b0a02aff7479cae03278b7a2291e8.setValue(` `, -1); initEditorSettings459b0a02aff7479cae03278b7a2291e8(); attachEventListeners459b0a02aff7479cae03278b7a2291e8(); document.getElementById(`editor-container-459b0a02aff7479cae03278b7a2291e8`).classList.remove('hidden'); document.getElementById(`preview-container-459b0a02aff7479cae03278b7a2291e8`).classList.add('hidden'); } function switchToPreview459b0a02aff7479cae03278b7a2291e8() { // Clean up the editor instance editor459b0a02aff7479cae03278b7a2291e8.destroy(); editor459b0a02aff7479cae03278b7a2291e8 = null; document.getElementById(`editor-container-459b0a02aff7479cae03278b7a2291e8`).classList.add('hidden'); document.getElementById(`preview-container-459b0a02aff7479cae03278b7a2291e8`).classList.remove('hidden'); // Reattach the try it yourself button listener document.getElementById(`try-it-459b0a02aff7479cae03278b7a2291e8`).addEventListener('click', () => { switchToEditor459b0a02aff7479cae03278b7a2291e8(); }); } function initEditorSettings459b0a02aff7479cae03278b7a2291e8() { editor459b0a02aff7479cae03278b7a2291e8.setOptions({ enableBasicAutocompletion: true, enableSnippets: true, enableLiveAutocompletion: true, }); editor459b0a02aff7479cae03278b7a2291e8.setTheme('ace/theme/xcode'); editor459b0a02aff7479cae03278b7a2291e8.session.setMode(`ace/mode/${language459b0a02aff7479cae03278b7a2291e8}`); } function setLanguage459b0a02aff7479cae03278b7a2291e8(lang) { language459b0a02aff7479cae03278b7a2291e8 = lang; editor459b0a02aff7479cae03278b7a2291e8.session.setMode(`ace/mode/${lang}`); } // Add method to update code programmatically function setCode459b0a02aff7479cae03278b7a2291e8(code) { editor459b0a02aff7479cae03278b7a2291e8.setValue(code, -1); } function toggleTheme459b0a02aff7479cae03278b7a2291e8() { const isDarkMode = editor459b0a02aff7479cae03278b7a2291e8.getTheme() === 'ace/theme/monokai'; const sunIcon = document.getElementById(`theme-icon-459b0a02aff7479cae03278b7a2291e8`); const moonIcon = document.getElementById(`moon-icon-459b0a02aff7479cae03278b7a2291e8`); if (isDarkMode) { editor459b0a02aff7479cae03278b7a2291e8.setTheme('ace/theme/xcode'); sunIcon.classList.remove('hidden'); moonIcon.classList.add('hidden'); } else { editor459b0a02aff7479cae03278b7a2291e8.setTheme('ace/theme/monokai'); sunIcon.classList.add('hidden'); moonIcon.classList.remove('hidden'); } } function removeTrailingSpaces(base64String) { // Trim the string to remove any trailing newline characters return btoa(atob(base64String).trim()); } async function runCode459b0a02aff7479cae03278b7a2291e8() { const code = btoa(editor459b0a02aff7479cae03278b7a2291e8.getValue()); const stdIn = btoa(document.getElementById("input-459b0a02aff7479cae03278b7a2291e8").value); const loader = document.getElementById(`run-loader-459b0a02aff7479cae03278b7a2291e8`); const output = document.getElementById(`output-459b0a02aff7479cae03278b7a2291e8`); const outputContainer = document.getElementById(`run-output-459b0a02aff7479cae03278b7a2291e8`); const batchOutputContainer = document.getElementById(`batch-run-output-459b0a02aff7479cae03278b7a2291e8`); loader.classList.remove('hidden'); outputContainer.classList.remove('hidden'); output.innerHTML = ''; try { const response = await fetch('/code/api/run', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ language: language459b0a02aff7479cae03278b7a2291e8, language_id: getLanguageId459b0a02aff7479cae03278b7a2291e8(language459b0a02aff7479cae03278b7a2291e8), source_code: code, std_in: stdIn, submission_type: 'run', test_cases: [] || [], }), }); const codeResult = await response.json(); if (Array.isArray(codeResult)) { outputContainer.classList.add("hidden"); batchOutputContainer.classList.remove("hidden"); batchOutputContainer.innerHTML = `

${codeResult && codeResult[0] ? atob(codeResult[0].stdin) : "No input available"}

${codeResult && codeResult[0] ? atob(codeResult[0].expected_output) : "No expected output available"}

${codeResult?.[0]?.stderr || codeResult[0].compile_output ? atob(codeResult[0].stderr || codeResult[0].compile_output) : codeResult?.[0] ? (codeResult[0].stdout == null ? "" : atob(codeResult[0].stdout)) : "No output available"}

${codeResult ? atob(codeResult.stdin) : "No input available"}

${codeResult ? atob(codeResult.expected_output) : "No expected output available"}

${codeResult ? (codeResult.stderr || codeResult.compile_output ? atob(codeResult.stderr || codeResult.compile_output) : codeResult.stdout == null ? "" : atob(codeResult.stdout)) : "No output available"}

All

tags in the document will have blue text with size 18px. Use case: When styling a single page. Downside: Styles are only applied to that page, and it can get messy if the style block becomes large.

3.3.3 External CSS

Put CSS rules in a separate .css file and link it in HTML using .

styles.css example:

Use case: Best practice for websites with multiple pages; promotes reusability and maintainability.

CSS consists of rules. Each rule has:

• Selector: Which HTML elements you want to style.
• Declaration block: One or more declarations wrapped in {}.
• Declaration: Each is a property and a value, separated by a colon, ending with a semicolon.

Example:

Example for paragraphs:

Here:
- Selector: p (all paragraph elements)
- Properties: color and font-size
- Values: green and 16px