Websites and CSS
Website: -
A website is a collection of web pages & related content that is identified by a common domain name & published on at least one web server.
Types of Websites
⟹Types of website: -
a. Static Website
b. Dynamic Website
- Static Website:
- Content: Static websites contain fixed, unchanging content that is manually created and stored in HTML or other markup languages.
- Interactivity: They are primarily informational and offer limited interactivity with users.
- Design: The design is consistent and doesn't change unless manually edited. Updates require knowledge of HTML/CSS.
- Examples: Brochure websites, personal blogs, simple landing pages, and small business websites.
- Dynamic Website:
- Content: Dynamic websites generate content on the fly, often pulling information from a database. Content is not fixed but is generated dynamically when a user visits the site.
- Interactivity: They offer extensive interactivity, including user logins, personalized content, and forms for user input.
- Design: Content, layout, and design can change based on user interactions or database updates.
- Examples: Social media platforms, e-commerce sites, content management systems (CMS) like WordPress, and web applications.
DHTML (Dynamic Hypertext Markup Language)
DHTML: DHTML (Dynamic Hypertext Markup Language) is an older technology that was commonly used to create interactive and dynamic web pages.
It is no longer widely used, as modern web development has shifted towards technologies like HTML5, CSS3, and JavaScript.
The key components of DHTML included:
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JavaScript
- DOM (Document Object Model)
- Event Handling
- AJAX (Asynchronous JavaScript and XML)
Role of each component in DHTML:
- HTML: Forms the structure and content of a web page. Provides the foundational structure for interactivity.
- CSS: Controls the presentation and styling of HTML elements. Defines visual appearance, including fonts, colors, spacing, and positioning.
- JavaScript: Adds interactivity to web pages. Manipulates the DOM dynamically and responds to user actions.
- DOM: Hierarchical representation of the web page's structure and content, accessible via JavaScript.
- Event Handling: Enables response to user interactions and events like clicks, mouse movements, and keyboard inputs.
- AJAX: Fetches data from a server and updates parts of a web page without a full page reload.
Sample Webpage's Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Webpage</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to My Sample Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<main>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<section>
<h2>Our Services</h2>
<ul>
<li>Service 1</li>
<li>Service 2</li>
<li>Service 3</li>
</ul>
</section>
</main>
<footer>
<p>© 2023 My Sample Webpage</p>
</footer>
<script src="script.js"></script>
</body>
</html>
What is CSS (Cascading Style Sheets)
CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation (layout, colors, fonts, etc.) of web documents written in HTML and XML.
Separation of Concerns: CSS separates the presentation layer from the content layer in web development. It allows you to define how your HTML content should look without altering the content itself.
Benefits of CSS:
- Consistency: CSS provides a consistent way to style multiple web pages within a site, ensuring that they have a uniform appearance.
- Flexibility: It allows for easy and quick changes to the visual style of a website, making redesigns or updates more efficient.
- Improved Accessibility: CSS enables you to create accessible designs that can be easily read and navigated by assistive technologies, improving the user experience for all.
- Faster Page Loading: External CSS files can be cached by browsers, reducing page load times for returning visitors.
- Responsive Design: CSS facilitates the creation of responsive layouts that adapt to different screen sizes, making websites mobile-friendly.
Adding Stylesheets to a Webpage:
- External Stylesheets: Link an external CSS file to your HTML document using the <link> element in the <head> section. Example: <link rel="stylesheet" href="styles.css">.
- Internal Stylesheets: Include CSS styles directly within an HTML document using the <style> element within the <head> section.
- Inline Styles: Apply CSS styles directly to individual HTML elements using the style attribute.
Class Attribute
Class Attribute Definition: The class attribute is an HTML attribute used to assign one or more class names to an HTML element. It allows you to associate elements with one or more CSS classes defined in a stylesheet or embedded in the HTML document.
Syntax
<element.....class ="Name-of-Class-Here">
Eg: -
To Specify Some classes of above example
<a href="Gandhi.html" class="festival">Mahatma Gandhi</a>
<a href="Mandela.html" class="leader">Nelson Mandela</a>
<a href="Einstein.html" class="scientist">Albert Einstein</a>
Class Attribute Declaration: The declaration of a class attribute involves specifying the class name(s) for an HTML element. It is done directly within the HTML element's opening tag using the class attribute.
Syntax
Element-Class-Name-Here {property:value;}
To create a basic HTML file (respo.html) that links to an external CSS file, An example code:
HTML File (respo.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webpage cbseonline.tech</title>
<!-- Link to your external CSS file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
</h1>Welcome to My Responsive Webpage!</h1>
<p>This is a sample content.</p>
</div>
</body>
</html>
CSS File (styles.css): css Copy code:
.container { width: 80%;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
text-align: center;
}
@media (max-width: 768px) {
.container {
width: 90%;
font-size: 18px;
}
}
@media (max-width: 480px) {
.container {
width: 95%;
font-size: 16px;
}
}
Identification and Grouping of Elements: -
- Universal Selector
- Colors and Background
- Properties Related to fonts
- Poperties Related to text
- Poperties Related to Margins and Padding
- Poperties Related to Boarders
Color and Background
⟹Here are some CSS properties related to color and background:
