Unit-III: Style sheets
Need for CSS, introduction to CSS, basic syntax and structure, using CSS, background images, colors and properties, manipulating texts, using fonts, borders and boxes, margins, padding lists, positioning using CSS, CSS2
Need for CSS
CSS (Cascading Style Sheets) is a style sheet language that is used for describing the presentation of a document written in HTML or XML. CSS separates the presentation of a web page from its content, which makes it easier to maintain and update the web page design.
The need for CSS in WTT arises due to the following reasons:
Separation of presentation and content: CSS allows you to separate the presentation of a web page from its content. This means that you can change the design of your web page without changing its content. This makes it easier to maintain and update your web page.
Consistency: CSS enables you to maintain a consistent look and feel across all pages of your website. You can define a set of styles for headings, paragraphs, links, etc., and apply them to all the pages on your website.
Control over layout: CSS gives you more control over the layout of your web page. You can position elements precisely on the page, control the spacing between elements, and control the size and alignment of text.
Accessibility: CSS enables you to create web pages that are accessible to people with disabilities. You can use CSS to create high-contrast layouts, large fonts, and other features that make it easier for people with disabilities to use your website.
Overall, CSS is an essential tool in WTT as it helps to create visually appealing, consistent, and accessible web pages.
introduction to CSS
CSS, short for Cascading Style Sheets, is a style sheet language used for describing the presentation of a document written in HTML or XML, including colors, layout, and fonts. CSS separates the presentation of a web page from its content, allowing developers to control the look and feel of a web page by creating a single style sheet that can be applied to multiple pages.
CSS was introduced in 1996 as an alternative to using HTML's in-line styling attributes, which could make pages difficult to maintain and update. With CSS, developers can create more complex layouts, use different fonts and colors, and apply effects such as shadows and animations.
The basic syntax of CSS involves selecting an HTML element and then applying a set of properties and values to that element. For example, the following CSS code sets the font color of all headings on a page to red:
css
Copy code
h1 {
color: red;
}
CSS can be applied to HTML documents in several ways, including using external style sheets, internal style sheets, or in-line styling attributes. Using external style sheets is considered best practice, as it allows for easy updating and maintenance of the site's design across multiple pages.
CSS is constantly evolving, with new features and properties being added in each new version. Today, CSS is an essential tool for web developers, allowing them to create attractive and engaging web pages that are both functional and easy to maintain.
basic syntax and structure, using CSS
CSS stands for Cascading Style Sheets and it is used to define the styles and layout of a web page. The basic syntax and structure of CSS involves the following:
Selectors: CSS selectors are used to select and apply styles to HTML elements. They can be based on the element name, class, ID, attribute, and more.
Properties: CSS properties define the styles to be applied to the selected HTML elements. They can include things like color, font, size, margin, padding, and more.
Values: CSS values are the specific settings used for each property. For example, a color value could be "red" or "#FF0000".
Here is an example of using CSS to style an HTML element:
php
Copy code
<!DOCTYPE html>
<html>
<head>
<title>My CSS Page</title>
<style>
/* CSS styles go here */
h1 {
color: blue;
font-size: 36px;
text-align: center;
}
</style>
</head>
<body>
<h1>Welcome to my page!</h1>
<p>This is some sample text.</p>
</body>
</html>
In this example, we are using a CSS selector to target the <h1> element and apply styles using properties and values. This will change the color, font size, and text alignment of the heading on the page.
background images, colors and properties, manipulating texts, using
fonts, borders and boxes, margins, padding lists
In web design, background images are used to decorate the background of an HTML element. The background image can be a pattern, texture, or a full image that fills the entire background.
To set a background image in CSS, you need to use the "background-image" property. The property value can be an absolute or relative URL to the image file.
Here is an example of setting a background image to an HTML element using CSS:
css
Copy code
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-size: cover;
}
In this example, we set the background image of the entire webpage by targeting the "body" element. We then use the "background-repeat" property to specify that we do not want the image to repeat, and the "background-size" property to cover the entire page.
You can also use multiple background images for an element using the "background-image" property. In that case, you can use the "background-position" property to position each image.
colors and properties
In web design, colors and properties are an essential aspect of creating visually appealing and effective websites. CSS (Cascading Style Sheets) provides the ability to manipulate color and properties of web elements, including text, backgrounds, borders, and more.
CSS defines a range of color values that can be used to set the color of text or other web elements. Some common color values include:
Hexadecimal values: these are six-digit codes that represent a specific color, such as #FF0000 for red.
RGB values: these values specify the amount of red, green, and blue that make up a color, with each value ranging from 0 to 255.
Predefined color names: CSS also has a set of predefined color names, such as "red," "blue," and "green."
In addition to color, CSS provides a range of properties that can be used to manipulate the appearance of web elements. These properties include:
Font properties: CSS allows you to specify font family, size, weight, and style for text.
Border properties: You can use CSS to add borders to web elements, with the ability to specify the border style, width, and color.
Padding and margin properties: These properties control the amount of space between web elements and their surrounding elements.
Background properties: CSS provides a range of options for setting background images, colors, and other properties.
List properties: CSS can be used to customize the appearance of lists, including bullet style and positioning.
Overall, CSS provides a powerful set of tools for manipulating the appearance of web elements, allowing designers to create visually appealing and effective websites.
manipulating texts
In WTT (Web Technology Tools), manipulating text can be done using CSS (Cascading Style Sheets). CSS provides various properties to modify the text, such as font-family, font-size, font-style, font-weight, text-align, text-decoration, text-transform, etc.
Here are some commonly used text manipulation properties in CSS:
font-family: This property specifies the font family to be used for the text. For example, font-family: Arial, Helvetica, sans-serif;
font-size: This property specifies the font size of the text. For example, font-size: 16px;
font-style: This property specifies the style of the font. For example, font-style: italic;
font-weight: This property specifies the weight of the font. For example, font-weight: bold;
text-align: This property specifies the horizontal alignment of the text. For example, text-align: center;
text-decoration: This property specifies the decoration of the text. For example, text-decoration: underline;
text-transform: This property specifies the capitalization of the text. For example, text-transform: uppercase;
By using these properties and values, we can manipulate the text in various ways and create visually appealing web pages.
fonts, borders and boxes, margins
In WTT, fonts, borders, boxes, and margins are all important aspects of CSS that allow web designers to create visually appealing and functional web pages.
Fonts: With CSS, designers can change the font, size, color, and style of text on a web page. This includes the ability to use custom fonts that may not be available on all computers.
Borders and boxes: CSS allows designers to create borders around elements like text boxes or images, as well as control the spacing between different elements. This can be used to create a clean and organized layout for the web page.
Margins: CSS also allows designers to control the margins around different elements on a web page. This can help with spacing and alignment, and can be used to create a balanced and visually appealing design.
By using these CSS properties, web designers can create a consistent and attractive layout for their web pages.
padding lists
In WTT, padding is the space between an element's content and its border. Padding can be added to an HTML element using CSS.
There are four types of padding properties in CSS:
Padding-top: Specifies the top padding of an element
Padding-right: Specifies the right padding of an element
Padding-bottom: Specifies the bottom padding of an element
Padding-left: Specifies the left padding of an element
For example, to add 10 pixels of padding to all sides of a div element, the following CSS code can be used:
css
Copy code
div {
padding: 10px;
}
In addition, CSS also allows for the creation of lists using the list-style property. This property allows for customization of the bullet points or numbering styles of ordered and unordered lists.
The following example sets the list-style of an unordered list to none and changes the bullet point color to red:
css
Copy code
ul {
list-style: none;
}
li {
color: red;
}
positioning using CSS, CSS2
Positioning using CSS refers to the ability to position HTML elements in specific locations on a web page. CSS2 (Cascading Style Sheets 2) is a version of CSS that includes additional features and capabilities for positioning elements.
There are four main positioning schemes in CSS: static, relative, absolute, and fixed.
Static positioning is the default positioning scheme where the elements appear on the page in the order they appear in the HTML code.
Relative positioning allows elements to be positioned relative to their normal position in the flow of the document.
Absolute positioning allows elements to be positioned anywhere on the web page, relative to the nearest positioned ancestor element.
Fixed positioning positions an element in a fixed position on the page, so that it stays in the same location even as the user scrolls the page.
In addition to these positioning schemes, CSS2 includes additional properties for more precise positioning, such as z-index, which controls the stacking order of elements, and clip, which defines the visible portion of an element.
CSS positioning can be a powerful tool for creating complex layouts and designs on web pages. However, it can also be difficult to use effectively, and can create accessibility issues if not used correctly. It is important for web developers to understand the capabilities and limitations of CSS positioning and to use it appropriately in their designs.
No comments:
Post a Comment