Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                

WDT Module1 - PartB

Download as pdf or txt
Download as pdf or txt
You are on page 1of 16

Introduction to CSS

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

<link rel="stylesheet" type="text/css" href="styles.css">


```

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.

Types of CSS (Cascading Style Sheet)

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.

There are three types of CSS which are given below:

• 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.

Example: This example shows the application of inline-css.

<!DOCTYPE html>
<html>

<head>

<title>Inline CSS</title>

</head>

<body>

<p style="color:#009900; font-size:50px;

font-style:italic; text-align:center;">

New Horizon College of Engineering


</p>

</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.

Example: This example shows the application of internal-css.

<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">

A computer science dept of NHCE

</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.

• Element Type Selectors

• Descendant Selectors

• Class selectors

• Id Selectors

• Child Selectors

• Adjacent sibling selectors

• Pseudo Selectors

• Universal Selectors

Element Type 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.

We've used this selector extensively already.

For example, if we wanted to make all paragraphs have green text, we would use
the following CSS rule:

p { color: green; }

Descendant Selectors

Match an element that is a descendant of another element.

This uses two separate selectors, separated by a space.

For example, if we wanted all emphasized text in our paragraphs to be green


text, we would use the following CSS rule:

p em { color: green; }
Class Selectors

Match an element that has the speci ed class.

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.

For example, if we wanted all elements with a class of "highlight" to have a


di erent background color, we would use the following CSS rule:

.highlight { background-color: #ffcccc; }

Child selectors

Match an element that is an immediate child of another element.

For example, if we wanted all emphasized text in our paragraphs's to have


green text, but not emphasized text in other elements, we would use the
following CSS rule:

p > em { color: green; }

Pseudo Selectors

An Aside About Link States


Anchor elements are special. You can style the <a> element with an Element Type
Selector, but it might not do exactly what you expect. This is because links have
di erent states, that relate to how they are interacted with. The four primary
states of a link are: link, visited, hover, active.

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

Matches every element on the page.

For example, if we wanted every element to have a solid 1px wide border, we
would use the following CSS rule:

* { border: 1px solid blue;}

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.

/* CSS class selector */


.myClass {
color: blue;
font-weight: bold;
}

HTML Usage: Apply the class to an HTML element using the class
attribute.

<!-- HTML with class -->


<p class="myClass">This is a paragraph with the class style.</p>
<h1 class=“myClass”>NHCE</h1>
• Usage Notes:
• Classes are reusable, meaning you can apply the same
class to multiple elements.
• Multiple classes can be applied to a single element.
• Class selectors have lower speci city compared to ID
selectors.
ID Selector:
• Syntax: ID selectors are pre xed with a hash (#) followed by
the ID name.

/* CSS ID selector */
#myId {
color: red;
font-style: italic;
}

HTML Usage: Apply the ID to an HTML element using the id


attribute. Note that the ID must be unique within the HTML
document.

<!-- HTML with ID -->


fi
fi
fi
<p id="myId">This is a paragraph with the ID style.</p>
• Usage Notes:
• IDs should be unique within a page. Unlike classes, the
same ID should not be applied to multiple elements.
• IDs have higher speci city compared to class selectors.
• While classes encourage a modular and reusable
approach, IDs are generally used for unique and speci c
elements.

<!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>

The Box model

The box model is a fundamental concept in CSS (Cascading Style


Sheets) that describes the layout of elements on a web page. Each
HTML element is considered a box, and the box model de nes the
fi
fi
fi
properties of these boxes, including content, padding, border, and
margin. Understanding the box model is crucial for styling and
layout design in web development.

The box model consists of four main components:

• 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;

border: 2px solid #333;

margin: 10px;

And corresponding HTML:

<!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:

• The width and height properties de ne the content area.


• The padding creates space inside the content area.
• The border surrounds the padding.
• The margin provides spacing outside the border.
Remember that the actual space occupied by an element on the
web page includes the content area, padding, border, and margin.
The total width of the element is calculated as follows: width + 2 *
padding + 2 * border + 2 * margin. Understanding the box
model is essential for precise layout control in web development.

Background images

Background images in CSS allow you to set an image as the


background of an HTML element. You can use background images
to enhance the visual appeal of your website or to provide
additional context to certain sections. Here's how you can use
background images in CSS:

1. Background Image Property:


The background-image property is used to set the background
image for an element.

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');

background-attachment: xed; /* Fixed background */

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>&lt;div&gt;</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.

Common Use Cases:


• <span> Tag:
• Applying inline styles to a speci c portion of text.
• Applying JavaScript functionality to a speci c inline element.
• <div> Tag:
• Grouping and structuring content for layout purposes.
• Creating containers for styling or applying CSS styles to a group of elements.
• Serving as a target for JavaScript manipulation.
Both <span> and <div> are essential in web development, and their usage depends on the
speci c needs of the content and the design of the webpage. <span> is typically used for
inline styling or targeting speci c text, while <div> is used for grouping and structuring
content for layout and styling purposes.
fi
fi
fi
fi

You might also like