WDT Module1 - PartB
WDT Module1 - PartB
WDT Module1 - PartB
Cascading Style Sheets, commonly known as CSS, is a stylesheet language used in web
development to control the presentation and styling of HTML and XML documents. CSS allows
web designers and developers to define the look and layout of web pages, separating the content
(HTML) from the presentation (CSS). Here's an introduction to Cascading Style Sheets:
1. **Separation of Concerns**: CSS enables the separation of content and presentation. HTML is
used to structure the content of a web page, defining headings, paragraphs, images, links, and more,
while CSS is responsible for controlling the visual aspects like colors, fonts, spacing, and
positioning.
2. **Selectors and Rules**: CSS uses selectors to target HTML elements, and each selector is
associated with a set of rules that specify how those elements should be styled. For example, you
can select all `<p>` (paragraph) elements and set their text color to blue.
```css
p{
color: blue;
```
3. **Properties and Values**: CSS rules consist of properties and values. Properties define what
aspect of the element you want to style, such as `color` for text color or `font-size` for the size of
text. Values set the specific style, like "red" for color or "16px" for font size.
```css
p{
color: red;
font-size: 16px;
```
4. **Cascading**: The "C" in CSS stands for "Cascading," which refers to the system that
determines which styles should be applied when there are conflicting rules. CSS rules can be
defined in different ways, such as inline styles, internal styles in the `<style>` element within an
HTML document, or external stylesheets in separate .css files. The rules cascade in a specific order
of importance, with the more specific rules taking precedence over more general ones.
5. **Inheritance**: CSS allows properties to be inherited by child elements from their parent
elements. For example, if you set a font size on a parent container, the child elements within it will
inherit that font size unless otherwise specified.
6. **Responsive Design**: CSS plays a crucial role in creating responsive web designs. With CSS,
you can use media queries to adapt the layout and styling of your web page based on the device's
screen size and orientation. This is essential for ensuring that web pages look good on various
devices, from desktop monitors to smartphones and tablets.
7. **Cross-Browser Compatibility**: CSS helps ensure that web pages look consistent across
different web browsers. However, achieving cross-browser compatibility can sometimes be a
challenge due to variations in how browsers interpret and render CSS rules. Web developers often
use vendor prefixes and other techniques to address these differences.
8. **External Stylesheets**: It is common practice to create external CSS files, separate from the
HTML documents. This approach makes it easier to maintain and update styles across multiple web
pages. You link these external stylesheets to your HTML documents using the `<link>` element
within the `<head>` section.
```html
CSS is a powerful tool for web designers and developers to create visually appealing and responsive
web pages. It allows for fine-grained control over the appearance of web content and helps maintain
consistency in the design of a website.
Cascading Style Sheet (CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-family, color, …
etc. properties of elements on a web page.
• Inline CSS
• Internal or Embedded CSS
• External CSS
Inline CSS: Inline CSS contains the CSS property in the body section attached to
the element is known as inline CSS. This kind of style is speci ed within an HTML
tag using the style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
font-style:italic; text-align:center;">
</body>
fi
</html>
Internal or Embedded CSS: This can be used when a single HTML document must be
styled uniquely. The CSS rule set should be within the HTML le in the head section i.e.
the CSS is e<!DOCTYPE html>embedded within the <style> tag inside the head section of
the HTML le.
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align: center;
.NHCE {
color: #009900;
font-size: 50px;
font-weight: bold;
}
.ISE {
font-style: bold;
font-size: 20px;
</style>
</head>
<body>
<div class="main">
fi
fi
<div class=“NHCE">New Horizon College of Engineering</div>
<div class="ISE">
</div>
</div>
</body>
</html>
External CSS: External CSS contains separate CSS les that contain only style properties
with the help of tag attributes (For example class, id, heading, … etc). CSS property is
written in a separate le with a .css extension and should be linked to the HTML document
using a link tag. It means that, for each element, style can be set only once and will be
applied across web pages.
Example: The le given below contains CSS property. This le saves with .css extension.
For Ex: sample.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.NHCE {
color:#009900;
font-size:50px;
font-weight:bold;
}
#ISE {
font-style:bold;
font-size:20px;
}
Below is the HTML le that is making use of the created external style sheet.
• link tag is used to link the external style sheet with the html webpage.
• href attribute is used to specify the location of the external style sheet le.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="sample.css" />
</head>
<body>
<div class="main">
<div class=“NHCE">New Horizon College of Engineering</div>
<div id="ISE">
A computer science dept of NHCE
</div>
</div>
</body>
fi
fi
fi
fi
fi
fi
</html>
CSS Selectors
The following is a list of the most common and well-supported CSS selectors.
There are many, many more, but these are the ones you should know well.
• Descendant Selectors
• Class selectors
• Id Selectors
• Child Selectors
• Pseudo Selectors
• Universal Selectors
The most basic CSS selectors are Element Type Selectors. That's a fancy name for
simply using an HTML tag, without the angle braces.
For example, if we wanted to make all paragraphs have green text, we would use
the following CSS rule:
p { color: green; }
•
Descendant Selectors
p em { color: green; }
Class Selectors
To match a speci c class attribute, we always start the selector with a period,
to signify that we are looking for a class value. The period is followed by
the class attribute value we want to match.
Child selectors
Pseudo Selectors
Pseudo selectors come in di erent sizes and shapes. By far the most common
pseudo selectors are used to style our links. There are four di erent pseudo
selectors to be used in conjunction with links:
:link
A link that has not been previously visited (visited is de ned by the browser
history)
:visited
A link that has been visited
:hover
A link that the mouse cursor is "hovering" over
:active
A link that is currently being clicked
ff
ff
fi
ff
fi
fi
ff
a:link { color: red } /* unvisited links
*/
a:visited { color: blue } /* visited links
*/
a:hover { color: green } /* user hovers
*/
a:active { color: lime } /* active
links */
For reasons of browser compatibility, you should always specify the pseudo
selectors in this order.
Universal Selector
For example, if we wanted every element to have a solid 1px wide border, we
would use the following CSS rule:
For reasons that are likely obvious after the previous example, you should be
careful with universal selectors. When might you want to use them?
The answer is, not often. But an example would be to set the margins and
padding for all elements on the page to zero. We'll learn a better way to do this
shortly.
* {
margin: 0;
padding: 0;
}
In CSS, class selectors and ID selectors are both used to target and
apply styles to HTML elements, but they have some key differences
in terms of usage and speci city.
fi
Class Selector:
• Syntax: Class selectors are pre xed with a dot (.) followed by
the class name.
HTML Usage: Apply the class to an HTML element using the class
attribute.
/* CSS ID selector */
#myId {
color: red;
font-style: italic;
}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
/* Class selector */
.myClass {
color: blue;
font-weight: bold;
}
/* ID selector */
#myId {
color: red;
font-style: italic;
}
</style>
<title>Class vs ID Example</title>
</head>
<body>
<p class="myClass">This is a paragraph with the class style.</p>
<p id="myId">This is a paragraph with the ID style.</p>
</body>
</html>
• Content:
• This is the actual content of the box, such as text,
images, or other HTML elements.
• It is de ned by the width and height properties.
• Padding:
• Padding is the space between the content and the border.
• It can be set using the padding property and can have
values for top, right, bottom, and left sides.
• Border:
• The border surrounds the padding and content.
• It is de ned by the border property and can have
properties like border-width, border-style, and
border-color.
•
• Margin:
fi
fi
• The margin is the space outside the border.
• the element's border and surrounding elements.
• Margin is set using the margin property and can have
values for top, right, bottom, and left sides.
.box {
width: 200px;
height: 100px;
padding: 20px;
margin: 10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Box Model Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="box">This is a box with content, padding, border, and
margin.</div>
</body>
</html>
In this example:
Background images
Example:
body {
background-image: url('background.jpg');
background-size: cover; /* Adjust as needed, 'cover' is one option
*/
}
In this example, the background image is set for the entire body
element. The url('background.jpg') speci es the path to the image le.
You can replace 'background.jpg' with the actual path to your
image.
fi
fi
fi
2. Background Position:
The background-position property de nes the starting position of
the background image. You can specify values in pixels,
percentages, or keywords like center or bottom.
Example:
body {
background-image: url('background.jpg');
background-position: center; /* Center the background image */
}
Background Attachment:
The background-attachment property determines whether the
background image scrolls with the content or remains xed.
body {
background-image: url('background.jpg');
body {
background-image: url('background.jpg');
background-size: cover;
background-position: center;
background-attachment: xed;
}
fi
fi
fi
fi
The <span> and <div> tags
aThe <span> and <div> tags are both HTML elements that are used
to group and apply styles to content, but they serve different
purposes.
<span> Tag:
The <span> tag is an inline HTML element that is used to apply
styles to a speci c portion of text or inline elements within a larger
block of content. It does not add any visual formatting on its own but
is often used in conjunction with CSS to style a speci c portion of
text.
Example:
<p>This is a <span style="color: blue;">blue</span> word in a
sentence.</p>
In this example, the <span> tag is used to apply the color blue to the
word "blue" within the paragraph.
<div> Tag:
The <div> tag is a block-level HTML element that is used to group
and structure content. It is often used as a container for other HTML
elements, allowing you to apply styles or manipulate the group as a
whole. The <div> tag is a versatile container and is commonly used
in layout design.
Example:
<div style="border: 1px solid black; padding: 10px;">
<h2>Section Title</h2>
<p>This is a paragraph of text within a <code><div></code>
element.</p>
fi
fi
</div>
In this example, the <div> tag is used to create a container that wraps around a heading
(<h2>) and a paragraph (<p>), and styling is applied to the entire container.