css
What is CSS in Web Design? Are there different types of CSS?
CSS, which stands for Cascading Style Sheets, is a crucial component of web design. It is a stylesheet language that controls the presentation and layout of a webpage. Essentially, CSS dictates how HTML elements are displayed on a website, including aspects like color, font, spacing, and positioning.
Here are some key points about CSS in web design:
1. Styling and Presentation: CSS separates the content (provided by HTML) from its visual representation. It allows web designers to apply styles to elements, making them visually appealing and organized.
2. Selectors and Declarations: CSS uses selectors to target HTML elements and declarations to define how those elements should look. For example, you might use a selector to target all headings (`h1`, `h2`, etc.) and then declare that they should be displayed in a specific font and color.
3. Cascading Nature: The “Cascading” in CSS refers to how styles are applied. If multiple styles are defined for the same element, CSS follows a set of rules to determine which style takes precedence. This allows for flexibility and control in styling.
4. External, Internal, and Inline Styles: CSS can be implemented in different ways:
– External: A separate .css file is linked to the HTML document. This allows for easy management of styles across multiple pages.
– Internal: Styles are included within the HTML document using `<style>` tags in the `<head>` section. This is useful for single pages or when styles are specific to a particular page.
– Inline: Styles are applied directly to individual HTML elements using the `style` attribute. This method is less recommended due to its limited scalability and maintenance challenges.
5. Different Types of Selectors: CSS offers various types of selectors, including element selectors, class selectors, ID selectors, and more. Each type of selector allows for different levels of specificity and targeting.
6. Box Model: CSS uses a box model to define the space an element occupies. It includes properties like margin, border, padding, and content. Understanding the box model is crucial for layout design.
7. Flexbox and Grid: These are layout models in CSS that provide powerful tools for creating complex and responsive page layouts. They offer precise control over the arrangement of elements on a page.
8. Media Queries: CSS includes the capability to use media queries, allowing designers to apply different styles based on factors like screen size, device orientation, or resolution. This is crucial for creating responsive designs that adapt to various devices.
9. CSS Frameworks: These are pre-written, standardized CSS code that provide a foundation for building web pages. Popular CSS frameworks include Bootstrap, Foundation, and Bulma.
In summary, CSS is an essential tool in web design for controlling the look and feel of a webpage. Its capabilities extend to layout, color, typography, spacing, and more. Understanding CSS is fundamental for creating visually appealing and user-friendly websites.
External css
Steps:
1:Create new html file and copy link.html code and save it as link.html.
2.Create new css file and copy external.css code and save it as external.css.
3.link.html will connect css externally.
4.Run link.html to get output.
link.html:
[php]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="external.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS</title>
</head>
<body>
<h3 align="center">External css</h3>
<p>This page uses external CSS.</p>
<p>p.first class code</p>
</body>
</html>
[/php]
external.css:
[php]
body{ background-color:#00CCCC;}
p { color:#FFFFFF;
}
h3{ color:#000000;
text-decoration:underline;
text-transform:uppercase;
}
p.first{
color:#33FFCC;
}
[/php]
output:
External css
This page uses external CSS.
p.first class code
Change Your Page Background Color Dynamically using Java Script
Copy and Paste following code in a simple HTML page.
[html]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change Your page Background Color Using Java Script</title>
<script type="text/javascript">
function changeTheme(selColor) {
alert(selColor);
document.body.style.backgroundColor = selColor;
}
</script>
</head>
<body>
<h1>Please Select Your Page Background Color..</h1>
<select name="changescheme" id="changescheme" onChange="javascript:changeTheme(this.value)">
<option value="white">White</option>
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="orange">Orange</option>
<option value="black">Black</option>
</select>
</body>
</html>
[/html]
Giving Links In CSS
/* The Example1 will be having the font styles,colors and font size for the content present in Example2. copy and paste the code of Example2 to get the output.*/
Example1.css
[css]
body
{
background-color:yellow;
}
h1
{
font-size:36pt;
}
h2
{
color:blue;
}
p
{
margin-left:50px;
}
[/css]
Example2.css
[css]
<html>
<head>
<link rel="stylesheet" type="text/css" href="example1.css" />
</head>
<body>
<h1>Hai!!</h1>
<h2>Have A Nice Day</h2>
</body>
</html>
[/css]
Output:
Hai!!
Have A Nice Day