RENAISSANCE UNIVERSITY GRAM REOTI, SANWER

ROAD INDORE, MP

प्र
शिक्
 षण

The Tech
 Camp

CSS
Study Material
Introduction of CSS:
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of a document written in
markup language such as HTML (Hypertext Markup Language). It provides a way to separate the document's
content from its presentation, making it easier to control the visual appearance of a website.
CSS allows web designers and developers to control various aspects of a website's layout and presentation, such as
font styles, colors, spacing, and positioning of elements. By using CSS, web developers can create visually appealing
and user-friendly web pages that are optimized for different devices and screen sizes.
CSS uses a set of rules to define how elements should be displayed, such as the font family, font size, color,
background, and borders. These rules can be written directly in the HTML document using the "style" attribute, or
in a separate CSS file that is linked to the HTML document.
CSS has evolved over time, and the latest version, CSS3, offers a wide range of new features and capabilities, such
as advanced animations, transitions, and transformations. Overall, CSS plays a critical role in modern web
development and is an essential tool for creating visually stunning and responsive websites.

Need of CSS:

CSS is an essential tool for web development for the following reasons:

 Separation of presentation and content: CSS allows developers to separate the presentation (how the
content looks) from the content itself (what the content is). This separation of concerns makes it easier to
update and maintain a website's design without having to modify the underlying content.
 Consistency: By using CSS, web developers can ensure consistency across multiple pages of a website or
across multiple websites. They can define a consistent color scheme, font family, and other stylistic
elements that can be applied to all pages of a website, making it easier to create a cohesive brand identity.
 Flexibility: CSS provides developers with greater flexibility in how they layout and style web pages.
Developers can position elements exactly where they want them and create complex layouts that adapt to
different screen sizes and devices.
 Accessibility: CSS can also improve the accessibility of a website by enabling developers to add semantic
markup to the HTML and apply styles that make the content more readable for users with disabilities.
 Faster page loading: CSS can reduce the size of web pages by separating the presentation code from the
HTML content, which can result in faster page loading times. By using external style sheets, the same CSS
code can be reused across multiple pages, further improving performance.

Overall, CSS is essential for modern web development and helps developers create responsive, visually
appealing, and accessible websites that provide a better user experience.

Basic syntax and structure of CSS

The basic syntax and structure of CSS involves three main components: selectors, properties, and values.

1. Selectors: Selectors are used to specify which HTML elements the style should be applied to. Selectors can
be based on element types, classes, IDs, and other attributes.

2. Properties: Properties define the style or visual appearance of the selected HTML elements, such as color,
font-size, background-color, and padding.

3. Values: Values are assigned to properties to define how they should be applied to the selected elements.
For example, a value for the color property could be "red" or "#FF0000".
Here is an example of the basic structure of a CSS rule:
selector {
property: value;
}

Note:

In this example, the selector identifies which HTML element(s) the style should be applied to, the property
defines the specific style attribute to modify, and the value specifies the value to apply to that attribute.

For instance, if you want to set the text color of all the headings on your web page to red, you would use
the following CSS rule:

h1 {
color: red;
}

This rule selects all <h1> elements and sets their text color to red.

Ways to implement or include CSS in HTML:

CSS can be included in an HTML document in three ways:
1. Inline: You can add CSS rules directly to an HTML element using the "style" attribute. For example:

<h1 style="color: red;">Hello, World!</h1>

2. Internal: You can include CSS rules within the head section of an HTML document using the <style>
tag. For example:

<head>
<style>
h1 {
color: red;
}
</style>
</head>

3. External: You can create a separate CSS file and link it to the HTML document using the <link>
tag. For example:

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

This links an external CSS file named "styles.css" to the HTML document.
Selectors in CSS

In CSS, selectors are used to identify the HTML elements to which a style should be applied.
Selectors can be based on element types, classes, IDs, attributes, and pseudo-classes. Here are
some of the most commonly used selectors:

1. Element Selector: This selector matches all instances of a particular HTML element type. For
example, the following rule sets the color of all <p> elements to red:
p{
color: red;
}

2. Class Selector: This selector matches elements with a specific class attribute value. Class selectors
start with a period (.) followed by the class name. For example, the following rule sets the font-size of all
elements with the class "large" to 24px:
.large {
font-size: 24px;
}

3. ID Selector: This selector matches an element with a specific ID attribute value. ID selectors start with
a pound sign (#) followed by the ID name. For example, the following rule sets the background color of
the element with the ID "header" to gray:
#header {
background-color: gray;
}

4. Pseudo-classes: These selectors match elements based on their state or position. Pseudo-classes start
with a colon (:) followed by the name of the state or position. For example, the following rule sets the
color of all links that are being hovered over to red:
a:hover {
color: red;
}

5. Descendant Selector: This selector matches an element that is a descendant of another element. For
example, the following rule sets the color of all <a> elements inside <li> elements to red:
li a {
color: red;
}

6. Universal Selector: This selector matches all elements on a page. The universal selector uses an
asterisk (*). For example, the following rule sets the margin of all elements to 0:
*{
margin: 0;
}

7. Grouping selectors: It allows you to apply the same set of styles to multiple elements at once, which
can help to simplify your CSS code and make it more efficient. To group selectors, simply separate them
with a comma (,). Here's an example:
h1, h2, p {
color: red;
font-weight: bold;
}
 8. Pseudo-selectors: It allows you to apply styles to elements based on their state or position within the
document. Here are some common examples of pseudo-selectors and how to use them:

 :hover: This selector applies styles when the user hovers over an element with the mouse. For
example:
a:hover {
color: red;
}

 :active: This selector applies styles when an element is being activated (for example, when a button
is being clicked). For example:
button:active {
background-color: gray;
}

 :first-child: This selector applies styles to an element that is the first child of its parent. For
example: li:first-child {
font-weight: bold;
}
 :before and :after are pseudo-elements: :before and :after are pseudo-elements in CSS that allow
you to insert content before or after an element's content, without needing to modify the HTML
markup directly.
Here's an example of how to use them:

p::before {
content: "Before ";
}

p::after {
content: " After";
}

CSS Properties:
CSS Color Property:

The CSS color property is used to specify the text color of an HTML element. It can accept a wide range
of
values, including named color, hexadecimal color codes, RGB color values, and HSL color values.
Here are some examples:

1. Named Colors:
color: red;
color: green;
color: blue;
color: black;
color: white;
2. Hexadecimal Color Codes:
color: #ff0000; /* red */
color: #00ff00; /* green */
color: #0000ff; /* blue */
color: #000000; /* black */
color: #ffffff; /* white */
3. RGB Color Values:
color: rgb(255, 0, 0); /* red */
 color: rgb(0, 255, 0); /* green */
color: rgb(0, 0, 255); /* blue */
color: rgb(0, 0, 0); /* black */

Note that the color property can also be applied to background colors and other visual elements in
addition to text.

CSS Text Property:

The CSS text property is a shorthand property that allows you to set multiple text-related properties at
once. Here are some of the individual properties that can be set with the text shorthand:
1. text-align: Sets the horizontal alignment of text within its container. Values can be left, center,
right, or justify.
2. text-decoration: Sets the decoration of text, such as underline, overline, line-through, or none.
3. text-indent: Sets the indentation of the first line of text within a block element.
4. text-transform: Sets the capitalization of text, such as uppercase, lowercase, capitalize, or none.
5. letter-spacing: Sets the spacing between characters in text.
6. word-spacing: Sets the spacing between words in text.
7. line-height: Sets the height of each line of text.

p{
text: center underline;
text-transform: uppercase;
letter-spacing: 2px;
line-height: 1.5;
}
This will centre-align the text, underline it, set it to uppercase, add 2 pixels of letter spacing, and set the
line height to 1.5.

CSS Font Property:

The CSS font property is a shorthand property that allows you to set several font-related properties at
once, including font family, font size, font weight, font style, and line height. Here's an example of using
the font shorthand:

p{
font: bold italic 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
This sets the font to be bold and italic, with a font size of 16 pixels and a line height of 1.5. The font
family is set to "Helvetica Neue", with fallback fonts of Helvetica, Arial, and sans-serif.

Here are the individual properties that can be set with the font shorthand:

1. font-style: Sets the style of the font, such as normal, italic, or oblique.

2. font-weight: Sets the weight of the font, such as normal, bold, or lighter.

3. font-size: Sets the size of the font, such as 12px, 1.2em, or 2rem.

4. line-height: Sets the height of each line of text.

5. font-family: Sets the font family to be used, with fallback fonts separated by commas
p{
font-style: italic;
font-weight: bold;
font-size: 18px;
line-height: 1.5;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

CSS Background Property:

The CSS background property is a shorthand property that allows you to set several background-related
properties at once, including background color, background image, background position, background
size, background repeat, and background attachment. Here's an example of using the background
shorthand:

div {
background: #fff url("image.png") no-repeat center center fixed;
}
This sets the background color to white, and sets the background image to "image.png". The image is
set to not repeat, and is cantered both horizontally and vertically. The background attachment is set to
fixed, so the background image will stay in the same position even as the user scrolls.

Here are the individual properties that can be set with the background shorthand:

1. background-color: Sets the background color of an element.

2. background-image: Sets the background image of an element.

3. background-position: Sets the position of the background image within the element.

4. background-size: Sets the size of the background image.

5. background-repeat: Sets whether the background image should repeat, and in what direction.

6. background-attachment: Sets whether the background image is fixed or scrolls with the rest of the
content.

Here's an example of using each individual property:

div {
background-color: #fff;
background-image: url("image.png");
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}

CSS Border Property:

The CSS border property is a shorthand property that allows you to set several border-related
properties at once, including border width, border style, and border color. Here's an example of using
the border shorthand:
div {
border: 2px dashed #000;
}
This sets the border width to 2 pixels, the border style to dashed, and the border color to black (#000).

Here are the individual properties that can be set with the border shorthand:

1. border-width: Sets the width of the border, such as 1px, 2px, or 3em.

2. border-style: Sets the style of the border, such as solid, dashed, dotted, or none.

3. border-color: Sets the color of the border, such as #000, rgb(255, 0, 0), or blue.

Here's an example of using each individual property:

div {
border-width: 2px;
border-style: dashed;
border-color: #000;
}
This sets the border width to 2 pixels, the border style to dashed, and the border color to black (#000).

You can also set each side of the border individually using the border-top, border-right, border-bottom,
and border-left properties. For example:

div {
border-top: 2px solid #000;
border-right: 1px dotted #ccc;
border-bottom: 3px double #f00;
border-left: 0;
}
This sets the top border to 2 pixels solid black, the right border to 1-pixel dotted gray, the bottom
border to 3 pixels double red, and the left border to 0 (no border).

CSS border-radius property:

The CSS border-radius property allows you to create rounded corners on an element's border. Here's an
example of using the border-radius property:
div {
border-radius: 10px;
}
This sets the border radius of all four corners of the div element to 10 pixels.

You can also set different values for each corner using the longhand properties border-top-left-radius,
border-top-right-radius, border-bottom-left-radius, and border-bottom-right-radius. Here's an example:

div {
border-top-left-radius: 5px;
border-top-right-radius: 10px;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 20px;
}
This sets the top-left corner to 5 pixels, the top-right corner to 10 pixels, the bottom-left corner to 15
pixels, and the bottom-right corner to 20 pixels.

You can also set the border radius to an elliptical shape using the border-radius shorthand, and
providing two values separated by a slash. The first value is the horizontal radius, and the second value
is the vertical radius. Here's an example:
div {
border-radius: 20px/40px;
}
This sets the horizontal radius to 20 pixels, and the vertical radius to 40 pixels, creating an elliptical shape.

CSS Margin & Padding Properties:

Both margin and padding are CSS properties that are used to add space around or within an element.
The padding property adds space within an element, between the element's content and its border.
Here's an example:
div {
padding: 10px;
}
This adds 10 pixels of padding to all four sides of the div element.

You can also set different values for each side of the element using the longhand properties padding-
top, padding-right, padding-bottom, and padding-left. Here's an example:
div {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
This adds 5 pixels of padding to the top of the div element, 10 pixels to the right, 15 pixels to the
bottom, and 20 pixels to the left.

The margin property adds space outside an element, between the element's border and the surrounding
elements. Here's an example:
div {
margin: 20px;
}
This adds 20 pixels of margin to all four sides of the div element.

You can also set different values for each side of the element using the longhand properties margin-top,
margin-right, margin-bottom, and margin-left. Here's an example:
div {
margin-top: 10px;
margin-right: 5px;
margin-bottom: 15px;
margin-left: 20px;
}
This adds 10 pixels of margin to the top of the div element, 5 pixels to the right, 15 pixels to the bottom,
and 20 pixels to the left.
Note that margin and padding can have different effects depending on the context and the surrounding
elements, so it's important to test and adjust these values accordingly.

CSS Box Model:

The box model is a fundamental concept in CSS that describes how an element's content, padding,
border, and margin are arranged relative to each other. Understanding the box model is important for
controlling the layout and spacing of elements on a webpage.

In the box model, an element is treated as a rectangular box, with its content contained within the
innermost layer, surrounded by padding, border, and margin, in that order.

Here's a visual representation of the box model:

The content area contains the element's text or other content. The padding area is the space between
the content and the border, and it can be used to add space between the content and the border. The
border area is a border that surrounds the padding, and it can be used to create a visual separation
between the element and its surroundings. The margin area is the space between the border and the
surrounding elements, and it can be used to create space between elements.

By default, the width and height of an element are applied to the content area only. However, you can
use the box-sizing property to include padding and border in the width and height calculations. For
example:

div {
box-sizing: border-box;
width: 200px;
padding: 10px;
border: 1px solid black;
}

Note that this will set the width of the div element to 200 pixels, including the padding and border. The
box-sizing: border-box; property makes the element's width and height include the padding and border,
rather than adding them to the width and height.
 Examples using CSS Properties:

Homepage Layout - I:

<!DOCTYPE html>
<html>
<head>

<title>My Website</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-
serif; background-color:
#f0f0f0;
}

header {
background-color: #333;
color: #fff;
padding: 10px;
text-align:
center;
}

nav {
background-color: #666;
color: #fff;
padding: 10px;
text-align:
center;
}

nav a {
color: #fff;
text-decoration:
none; padding: 10px;
}

section {
padding: 20px;
text-align:
center;
}

footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align:
center;
}

.image {
width: 100%;
max-width: 300px;
 margin: 20px auto;
display: block;
}
p{
 text-align: justify;
}
</style>
</head>

<body>

<header>
<h1>Welcome to Renaissance University, Indore</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Courses</a>
<a href="#">Facilities</a>
<a href="#">Campus Life</a>
<a href="#">Placements</a>
<a href="#">Research</a>
<a href="#">Contact</a>
</nav>

<section>
<h2>Renaissance University, Indore</h2>
<img class="image" src="logo.jpg" alt="My Picture">
<center><h3>Renaissance University is a Unit of Kautilya
Chandragupt Education Society.</h3></center>
<p>
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
</p>
<h2>About Renaissance University</h2>
<p>A precise understanding of Renaissance University can be
comprehended through its logo that has tried to put in place its vision and
philosophy to unveil the true potential of every individual participant and
student who is going to be a part of this University. In the logo of
Renaissance University, the book is the base that signifies that the roots
are in knowledge, education and becoming aware. The darkened background
shows that though the world out there has a lot of adversities, trauma,
badness, and filth, but the tiny light of lamp of knowledge can end it all.
The little greenery signifies hope…</p>
</section>

<footer>
&copy; 2023 My Website. All Rights Reserved
</footer>
</body>
</html>

Output:

Homepage Layout - II:

<!DOCTYPE html>
<html>

<head>
<title>My Website</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-
serif; background-color:
#f0f0f0;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
text-align:
center;
}

nav {
background-color: #666;
color: #fff;
padding: 25px;
text-align:
center; position:
fixed; width:
100%;
}

nav a {
 padding: 10px;
transition: background-color 0.9s ease-in-out;
border: 1px solid #333;
border-radius:0dvw;

nav a:hover {
background-color: #fff;
color: orange;
transition: background-color 0.9s ease-in-out;
}

section {
padding: 100px;
text-align:
center;
background-color: #fff;
box-shadow: 0 0 25px rgba(68, 210, 73,
0.2); border-radius: 5px;
margin: 20px
auto; max-width:
800px;
}

.image {
width: 100px;
border-radius:
50%; float: left;
}

footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align:
center;
}
p{
text-align: justify;
}
</style>
</head>

<body>
<header>
<img class="image" src="logo.jpg" alt="My Picture">
<h1>Welcome to Renaissance University</h1>
</header>

<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Courses</a>
<a href="#">Facilities</a>
<a href="#">Faculties</a>
<a href="#">Contact</a>
</nav>
<section>
 <h2>Renaissance University, Indore</h2>

<p>
Renaissance University in association with Harvard Business School
Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
</p>
<p>
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
</p>

<p>
Renaissance University in association with Harvard Business School
Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
CLICK HERE
Renaissance University in association with Harvard Business
School Online will deliver 12 online courses
that will be available for the Students, Faculty and Alumni
of Renaissance University. For more information
</p>

</section>

<footer>
<p>&copy; 2023. All Rights Reserved.</p>
</footer>
</body>

</html>