Scribd
Upload
6 views

CSS

TYBCS Web technology CSS notes

Uploaded by

devyanibotre2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
6 views

CSS

TYBCS Web technology CSS notes

Uploaded by

devyanibotre2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 8

Module 2 Cascadding Style sheet

Objectives:
• Recognize CSS as a crucial technology for web development, separating content and
presentation for cleaner code and enhanced design flexibility.
• Learn the step-by-step process of applying CSS to HTML, including inline and external
methods, and grasp the impact on the visual presentation of elements.
• Gain a deep understanding of selectors for targeting HTML elements and the role of
properties and values in defining styles, enabling precise control over web page
appearance.
• Explore various color formats, including names, hexadecimal, RGB, and RGBA, and
grasp
techniques for styling backgrounds, empowering you to create visually appealing
designs.
• Acquire foundational knowledge of the CSS box model, including content, padding,
border, and margin, to control the layout and spacing of elements effectively.
2.1 Introduction CSS
CSS, or Cascading Style Sheets, is a fundamental technology in web development that
defines the
presentation and layout of HTML or XML documents. It allows developers to style and
format web
pages, controlling aspects such as colors, fonts, spacing, and layout. The separation of
content
(HTML) and presentation (CSS) enables cleaner and more maintainable code, fostering a
modular
and organized approach to web design. With CSS, developers can create visually
appealing and
responsive user interfaces, ensuring a seamless and engaging user experience across
various
devices and screen sizes. The language's flexibility, selectors, properties, and support for
responsive design make it a cornerstone for designing modern and interactive websites.
2.2 Applying CSS to HTML
Applying CSS to HTML involves selecting HTML elements and defining their styles using
CSS rules.
Here's a step-by-step guide on how to apply CSS to HTML:
1. Create an HTML Document:
Start by creating a basic HTML document. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CSS Example</title>
</head>19
<body>
<h1>Hello, CSS!</h1>
<p>This is a paragraph of text.</p>
<div id="myDiv">This is a div element.</div>
</body>
</html>
2. Add a <style> Tag in the <head> Section:
Inside the <head> section of your HTML document, use the <style> tag to write your CSS
code.
You can also link an external CSS file using the <link> tag.
Inline CSS (within the HTML file):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CSS Example</title>
<style>
h1 {
color: blue;
}
p{
font-size: 16px;
}
#myDiv {
background-color: yellow;
padding: 10px;
}
</style>
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This is a paragraph of text.</p>
<div id="myDiv">This is a div element.</div>
</body>
</html>
External CSS (linking a separate CSS file):
Create a file named styles.css with the following content:
css
Copy code
/* styles.css */20
h1 {
color: blue;
}
p{
font-size: 16px;
}
#myDiv {
background-color: yellow;
padding: 10px;
}
Modify the HTML file to link to the external CSS file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, CSS!</h1>
<p>This is a paragraph of text.</p>
<div id="myDiv">This is a div element.</div>
</body>
</html>
3. Apply CSS Styles:
In the CSS code, select HTML elements using selectors and define styles using properties
and
values. In the examples above, we applied styles to the <h1>, <p>, and <div> elements.
4. Preview in a Browser:
Save your HTML file and open it in a web browser to see the applied CSS styles. The text
color,
font size, and background color of the elements should reflect the styles you defined.
This is a basic example, and CSS can be applied in more complex ways to create intricate
and
visually appealing designs on web pages. Understanding selectors, properties, and
values is
crucial for effectively styling HTML elements with CSS.21
2.3 Selectors, Properties and Values
Selectors, properties, and values are fundamental components of CSS that allow you to
target
HTML elements and define their styles. Let's explore each of these concepts:
1. Selectors:
Selectors define which HTML elements should be styled. They can be simple, targeting a
specific
element type, or more complex, targeting elements based on their attributes, classes, or
relationships. Here are some examples:
Element Selector:
/* Selects all <p> elements */
p{
color: blue;
}
Class Selector:
/* Selects all elements with class "highlight" */
.highlight {
background-color: yellow;
}
ID Selector:
/* Selects the element with id "header" */
#header {
font-size: 24px;
}
Descendant Selector:
/* Selects all <li> elements that are descendants of <ul> elements */
ul li {
list-style-type: square;
}
Attribute Selector:
/* Selects all elements with the attribute "target" */
[target] {22
text-decoration: underline;
}
2. Properties and Values:
Properties define the aspects of an element you want to style, and values specify how
those
properties should be applied. Here are some examples:
Color Property:
/* Sets the text color to red */
h1 {
color: red;
}
Font Property:
/* Sets the font family and size */
body {
font-family: "Arial", sans-serif;
font-size: 16px;
}
Margin and Padding Properties:
/* Sets the margin and padding for a <div> element */
div {
margin: 10px;
padding: 20px;
}
Background Property:
/* Sets the background color and image for an element */
.background-example {
background-color: #f0f0f0;
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
Border Property:
/* Sets the border style, color, and width for an element */
.border-example {
border: 2px solid #333;
border-radius: 10px;
}
Text Property:
/* Sets the text alignment and decoration */
p{
text-align: justify;23
text-decoration: underline;
}
Understanding the combination of selectors, properties, and values empowers you to
precisely
control the appearance of HTML elements on your web page. CSS provides a wide range
of styling
options, allowing you to create visually appealing and responsive designs.
Experimenting with
different combinations will deepen your understanding of how these concepts work
together.
2.4 CSS Colors and Backgrounds
CSS offers a variety of options for styling colors and backgrounds on web pages.
Understanding
these options is essential for creating visually appealing and engaging designs. Let's
explore how
to work with CSS colors and backgrounds:
1. CSS Colors:
Basic Color Properties:
Color Names:
/* Using predefined color names */
h1 {
color: red;
}
Hexadecimal Values:
/* Using hexadecimal color values */
p{
color: #336699;
}
RGB Values:
/* Using RGB color values */
div {
background-color: rgb(255, 0, 0); /* Red */
}
RGBA Values (with Alpha Channel):
/* Using RGBA color values with transparency */
div {
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red */
}
2. CSS Backgrounds:
Background Color:
/* Setting the background color */
body {
background-color: #f0f0f0;
}24
Background Image:
/* Setting a background image */
div {
background-image: url('background.jpg');
background-repeat: no-repeat;
background-size: cover;
}
These examples illustrate how to use CSS to style colors and backgrounds.
Experimenting with
different color formats, background properties, and gradients allows you to create
visually
appealing and dynamic designs for your web pages. Understanding how to use these
properties
efficiently will enhance your ability to customize the look and feel of your website.
2.5 CSS Box Model
The CSS box model is a fundamental concept that defines the structure of HTML
elements in terms
of content, padding, border, and margin. Understanding the box model is crucial for
accurately
controlling the layout and spacing of elements on a web page. Here are the key
components of the
CSS box model:
1. Content:
The actual content of the element, such as text, images, or other media.
/* Setting the width and height of the content area */
div {
width: 200px;
height: 100px;
}
2.6 CSS Margins, Padding, and Borders
Padding:
The space between the content and the element's border. Padding is defined using the
padding
property.
/* Setting padding for the content area */
div {
padding: 20px;
}
3. Border:
A border surrounding the padding. It can have different styles, colors, and widths. The
border
property is used to set border properties.25
/* Setting border properties */
div {
border: 2px solid #333;
border-radius: 10px; /* Optional: Rounded corners */
}
Margin:
The space outside the element's border. Margin is used to control the spacing between
elements.
/* Setting margin to create space around the element */
div {
margin: 10px;
}
Box Model Shorthand:
The margin, border, padding, and content properties can be set individually or using
shorthand
notation.
/* Shorthand notation for margin, border, and padding */
div {
margin: 10px;
border: 2px solid #333;
padding: 20px;
}
Calculating Total Width and Height:
The total width and height of an element are calculated by adding the content, padding,
and
border (but not margin).
/* Total width and height calculation */
div {
width: 200px; /* content width */
padding: 20px; /* padding on both sides */
border: 2px solid; /* border on both sides */
/* Total width: 200 + 20*2 + 2*2 = 244px */
/* Total height: Calculated similarly */
}
Understanding and manipulating the CSS box model is essential for achieving precise
control over
the layout and spacing of elements on a web page. It is a foundational concept that forms
the basis
for creating well-structured and visually appealing designs.
2.7 CSS Text and Font Properties26
CSS provides a range of properties to style text and control font properties. These
properties
allow you to adjust the appearance, size, color, and spacing of text on your web page.
Here are
some common CSS text and font properties:
1. Font Family:
Specifies the font family for text. It can be a specific font name or a generic font family
like serif,
sans-serif, monospace, etc.
/* Setting font family */
body {
font-family: "Arial", sans-serif;
}
2. Font Size:
Sets the size of the text. You can use various units such as pixels (px), ems (em), or
percentages.
/* Setting font size */
p{
font-size: 16px;
}
3. Font Weight:
Specifies the thickness of the font. Common values are normal, bold, or numeric values.
/* Setting font weight */
h1 {
font-weight: bold;
}
4. Font Style:
Defines whether the text is italic, normal, or oblique.
/* Setting font style */
em {
font-style: italic;
}
5. Text Color:
Specifies the color of the text.
/* Setting text color */
span {
color: #ff0000; /* Hex color code */
}27
6. Text Decoration:
Controls decorations like underline, overline, or line-through.
/* Setting text decoration */
a{
text-decoration: underline;
}
7. Text Alignment:
Aligns text within its containing element.
/* Setting text alignment */
div {
text-align: center;
}
8. Line Height:
Sets the height of a line of text. It can be a unitless number, percentage, or length value.
/* Setting line height */
p{
line-height: 1.5; /* 1.5 times the font size */
}
9. Letter Spacing:
Adjusts the space between characters.
/* Setting letter spacing */
h2 {
letter-spacing: 2px;
}
10. Word Spacing:
Adjusts the space between words.
/* Setting word spacing */
p{
word-spacing: 5px;
}
These CSS text and font properties provide a powerful set of tools for customizing the
appearance
of text on your website. By using these properties strategically, you can create visually
appealing
and readable text content for your web pages.

You might also like