CSS (Cascading Style Sheets) is a language used to describe the presentation of a document written in HTML or XML. While HTML provides the structure and content of a webpage, CSS is used to control its visual appearance, such as layout, colors, fonts, and spacing. CSS allows developers to separate content from design, making it easier to maintain and update websites.
HTML Page Without CSS
Here's an example of a simple HTML page without CSS.
plain-html-page.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Plain HTML Page</title> </head> <body> <h1>Welcome to My Website</h1> <p>This is a simple webpage without any CSS styling.</p> <p>Everything is plain and basic.</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>
Above snippet generate below html page.
What it looks like
1. The text will be black and use the browser's default font.
2. The headings (<h1>), paragraphs (<p>), and list items (<ul>, <li>) will be displayed in a straightforward, unstyled manner.
3. Everything will appear as plain text without any colors, spacing, or layout changes.
HTML Page With CSS
Here's the same HTML page, but now with some CSS added to style it.
styled-html-page.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Styled HTML Page</title> <style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 20px; } h1 { color: #0056b3; text-align: center; } p { font-size: 1.2em; line-height: 1.6; } ul { list-style-type: square; padding-left: 20px; } li { margin-bottom: 10px; } </style> </head> <body> <h1>Welcome to My Website</h1> <p>This is a simple webpage with CSS styling.</p> <p>Now it looks much more appealing!</p> <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> </ul> </body> </html>
Above snippet generate below image.
What it looks like
1. The background color is light gray (#f0f0f0).
2. The text color is dark gray (#333), and the font is set to Arial.
3. The heading (<h1>) is centered and colored in blue (#0056b3).
4. The list items use a square bullet point and have spacing between them.
Benefits of CSS
1. Separation of Content and Style: CSS allows you to keep the content (HTML) separate from the design, making it easier to update either without affecting the other.
2. Consistency: You can apply a consistent style across multiple web pages by using the same CSS file.
3. Improved Maintenance: Since styles are centralized, making changes is easier and less error-prone.
4. Reduced File Size: CSS reduces the need for inline styles in HTML, making your web pages lighter and faster to load.
5. Enhanced Design Options: CSS provides a wide range of styling options, allowing for more complex and visually appealing designs.
HTML vs. CSS vs. JavaScript
HTML (HyperText Markup Language)
Purpose: Defines the structure and content of a webpage.
Role: Acts as the skeleton of a webpage.
Example: Creating headings, paragraphs, lists, links, and other elements.
CSS (Cascading Style Sheets)
Purpose: Defines the visual style and layout of a webpage.
Role: Enhances the appearance of the HTML structure.
Example: Changing colors, fonts, spacing, and positioning of elements.
JavaScript
Purpose: Adds interactivity and dynamic behavior to a webpage.
Role: Acts as the brain of the webpage, making it responsive and interactive.
Example: Creating sliders, pop-ups, form validations, and interactive maps.
Summary
HTML: Provides the content and structure.
CSS: Adds visual style to that content.
JavaScript: Brings the content to life with interactivity.Previous Next Home
No comments:
Post a Comment