CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including how elements should be rendered on screen, on paper, in speech, or on other media. CSS saves time because styles defined in CSS files can be reused across multiple HTML pages. It provides more control over formatting than HTML alone and helps separate a document's content from its presentation. The document then explains various CSS concepts like selectors, properties, syntax, and how to apply styles using internal, external and inline CSS.
Synthetic Fiber Construction in lab .pptxPavel ( NSTU)
Synthetic fiber production is a fascinating and complex field that blends chemistry, engineering, and environmental science. By understanding these aspects, students can gain a comprehensive view of synthetic fiber production, its impact on society and the environment, and the potential for future innovations. Synthetic fibers play a crucial role in modern society, impacting various aspects of daily life, industry, and the environment. ynthetic fibers are integral to modern life, offering a range of benefits from cost-effectiveness and versatility to innovative applications and performance characteristics. While they pose environmental challenges, ongoing research and development aim to create more sustainable and eco-friendly alternatives. Understanding the importance of synthetic fibers helps in appreciating their role in the economy, industry, and daily life, while also emphasizing the need for sustainable practices and innovation.
Instructions for Submissions thorugh G- Classroom.pptxJheel Barad
This presentation provides a briefing on how to upload submissions and documents in Google Classroom. It was prepared as part of an orientation for new Sainik School in-service teacher trainees. As a training officer, my goal is to ensure that you are comfortable and proficient with this essential tool for managing assignments and fostering student engagement.
How to Make a Field invisible in Odoo 17Celine George
It is possible to hide or invisible some fields in odoo. Commonly using “invisible” attribute in the field definition to invisible the fields. This slide will show how to make a field invisible in odoo 17.
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
The Indian economy is classified into different sectors to simplify the analysis and understanding of economic activities. For Class 10, it's essential to grasp the sectors of the Indian economy, understand their characteristics, and recognize their importance. This guide will provide detailed notes on the Sectors of the Indian Economy Class 10, using specific long-tail keywords to enhance comprehension.
For more information, visit-www.vavaclasses.com
Welcome to TechSoup New Member Orientation and Q&A (May 2024).pdfTechSoup
In this webinar you will learn how your organization can access TechSoup's wide variety of product discount and donation programs. From hardware to software, we'll give you a tour of the tools available to help your nonprofit with productivity, collaboration, financial management, donor tracking, security, and more.
The Art Pastor's Guide to Sabbath | Steve ThomasonSteve Thomason
What is the purpose of the Sabbath Law in the Torah. It is interesting to compare how the context of the law shifts from Exodus to Deuteronomy. Who gets to rest, and why?
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
2. Markup language refers to a text-encoding
system consisting of a set of symbols inserted in
a text document to control its structure,
formatting, or the relationship between its parts.
Markup is often used to control the display of the
document or to enrich its content to facilitating
automated processing.
3. What is CSS
CSS stands for Cascading Style Sheets. It is a style
sheet language which is used to describe the look and
formatting of a document written in markup language. It
provides an additional feature to HTML. It is generally
used with HTML to change the style of web pages and
user interfaces.
4. Why use CSS
three major benefits of CSS:
1. Solves a big problem
Before CSS, tags like font, colour, background style, element
alignments, border and size had to be repeated on every web page.
This was a very long process. For example: If you are developing a
large website where fonts and colour information are added on every
single page, it will be become a long and expensive process. CSS was
created to solve this problem.
2) Saves a lot of time
CSS style definitions are saved in external CSS files so it is possible to change
the entire website by changing just one file.
3) Provide more attributes
CSS provides more detailed attributes than plain HTML to define the look
and feel of the website.
5. 1. CSS saves time − You can write CSS once and then reuse same sheet in
multiple HTML pages. You can define a style for each HTML element and
apply it to as many Web pages as you want.
2. Pages load faster − If you are using CSS, you do not need to write HTML
tag attributes every time. Just write one CSS rule of a tag and apply it to all
the occurrences of that tag. So less code means faster download times.
3. Easy maintenance − To make a global change, simply change the style,
and all elements in all the web pages will be updated automatically.
4. Superior styles to HTML − CSS has a much wider array of attributes than
HTML, so you can give a far better look to your HTML page in comparison
to HTML attributes.
5. Multiple Device Compatibility − Style sheets allow content to be
optimized for more than one type of device. By using the same HTML
document, different versions of a website can be presented for handheld
devices such as PDAs and cell phones or for printing.
6. Global web standards − Now HTML attributes are being deprecated and it
is being recommended to use CSS. So its a good idea to start using CSS in
all the HTML pages to make them compatible to future browsers.
6. CSS Syntax
A CSS rule consists of a selector and a declaration
block.
•The selector points to the HTML element you want to
style.
•The declaration block contains one or more declarations
separated by semicolons.
•Each declaration includes a CSS property name and a
value, separated by a colon.
•Multiple CSS declarations are separated with
semicolons, and declaration blocks are surrounded by
curly braces.
7. all <p> elements will be center-aligned, with a red text color:
p {
color: red;
text-align: center;
}
•p is a selector in CSS (it points to the HTML element you want to
style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property value
8. CSS Selector
CSS selectors are used to select the content you
want to style. Selectors are the part of CSS rule
set. CSS selectors select HTML elements
according to its id, class, type, attribute etc.
There are several different types of selectors in
CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
9. CSS Element Selector
The element selector selects HTML elements
based on the element name. Here, all <p>
elements on the page will be center-aligned, with
a red text color:
p {
text-align: center;
color: red;
}
10. The CSS id Selector
The id selector uses the id attribute of an HTML
element to select a specific element.
The id of an element is unique within a page, so
the id selector is used to select one unique
element!
To select an element with a specific id, write a
hash (#) character, followed by the id of the
element.
The CSS rule below will be applied to the HTML
element with id="para1":
#para1 {
text-align: center;
color: red;
}
12. The CSS class Selector
The class selector selects HTML elements with a specific
class attribute.
To select elements with a specific class, write a period (.)
character, followed by the class name.
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be
affected</h1>
<p class="center">This paragraph will be red and
center-aligned.</p>
</body>
</html>
13. The CSS Universal Selector
The universal selector (*) selects all HTML elements
on the page.
<!DOCTYPE html>
<html>
<head>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected
by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
14. The CSS Grouping Selector
The grouping selector selects all the HTML elements
with the same style definitions.
Look at the following CSS code (the h1, h2, and p
elements have the same style definitions):
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
h1, h2, p {
text-align: center;
color: red;
}
•It will be better to group the selectors, to minimize
the code.
•To group selectors, separate each selector with a
comma.
15. <!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
16. All CSS Simple Selectors
Selector Example Example description
#id #firstname Selects the element with id="firstname"
.class .intro Selects all elements with class="intro"
element.cla
ss
p.intro Selects only <p> elements with
class="intro"
* * Selects all elements
element p Selects all <p> elements
element,ele
ment,..
div, p Selects all <div> elements and all <p>
elements
17. Types of CSS
Internal, External and Inline CSS Styles
Internal CSS styles done this way are loaded each time an entire
website is refreshed, which may increase loading time. Additionally, you
won’t be able to use the same CSS style on multiple pages as it’s
contained within a single page. However, this also comes with benefits.
Having everything on one page makes it easier to share the template for
a preview.
The External method might be the most convenient one.
Everything is done externally on a .css file. This means you can
do all the styling on a separate file and apply the CSS to any
page you want. The External style might also improve loading
times.
the Inline style of CSS. Inline works with specific elements that
have the <style> tag. Each component has to be stylized, so it
might not be the best or fastest way to handle CSS. But it can
come in handy. For example, if you want to change a single
element, quickly preview changes, or maybe you don’t have
access to the CSS files.
18. Inline CSS
An inline CSS is used to apply a unique style to a
single HTML element.
An inline CSS uses the style attribute of an HTML
element.
The following example sets the text color of
the <h1> element to blue, and the text color of
the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
19. Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within
a <style> element.
The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
20. External CSS
An external style sheet is used to define the style for many HTML
pages.
To use an external style sheet, add a link to it in
the <head> section of each HTML page:
<head>
<link rel="stylesheet" href="styles.css
">
</head>
The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
"styles.css" file looks like:
21. CSS Colors, Fonts and Sizes
Here, we will demonstrate some commonly used
CSS properties. You will learn more about them
later.
The CSS color property defines the text color to
be used.
The CSS font-family property defines the font to
be used.
The CSS font-size property defines the text size
to be used.
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
22. CSS Color Names
In CSS, a color can be specified by using a
predefined color name:
CSS Background Color
You can set the background color for HTML
elements:
<h1 style="background-color:Blue;">Hello World</h1>
<p style="background-color:green;">hello css...</p>
CSS Text Color
You can set the color of text:
<h1 style="color:green;">Hello World</h1>
<p style="color:Blue;">hi paragraph...</p>
<p style="color:Green;">hii green...</p>
23. CSS background-image
Set a background-image for the <body> element:
body {
background-image: url("paper.gif");
background-color: yellow;
}
24. background-color: specifies the solid color to fill the
background with.
background-image: calls an image for the
background.
background-position: specifies where to place the
image in the element’s background.
background-repeat: determines whether the image
is tiled.
background-attachment: determines whether the
image scrolls with the page.
25. Background position
The background-position property controls where a background image is
located in an element. The trick with background-position is that you are
actually specifying where the top-left corner of the image will be positioned,
relative to the top-left corner of the element.
In the examples below, we have set a background image and are using
the background-position property to control it. We have also set background-
repeat to no-repeat. The measurements are all in pixels. The first digit is the x-
axis position (horizontal) and the second is the y-axis position (vertical).
/* Example 1: default. */
background-position: 0 0; /* i.e. Top-left corner of element. */
/* Example 2: move the image to the right. */
background-position: 75px 0;
/* Example 3: move the image to the left. */
background-position: -75px 0;
/* Example 4: move the image down. */
background-position: 0 100px;
26. Background repeat
By default, when you set an image, the image is repeated
both horizontally and vertically until the entire element is
filled. This may be what you want, but sometimes you
want an image to be displayed only once or to be tiled in
only one direction. The possible values (and their results)
are as follows:
background-repeat: repeat; /* The default value. Will tile the image in
both directions. */
background-repeat: no-repeat; /* No tiling. The image will be used only
once. */
background-repeat: repeat-x; /* Tiles horizontally (i.e. along the x-axis) */
background-repeat: repeat-y; /* Tiles vertically (i.e. along the y-axis) */
background-repeat: inherit; /* Uses the same background-repeat property
of the element's parent. */
27. Background attachment
The background-attachment property determines what happens
to an image when the user scrolls the page. The three available
properties are scroll, fixed and inherit. Inherit simply tells the
element to follow the background-attachment property of its
parent.
To understand background-attachment properly, we need to first
think of how the page and view port interact. The view port is
the section of your browser that displays the Web page (think of
it like your browser but without all the toolbars). The view port is
set in its position and never moves.
When you scroll down a Web page, the view port does not
move. Instead, the content of the page scrolls upward. This
makes it seem as if the view port is scrolling down the page.
Now, when we set background-attachment:scroll;, we are telling
the background that when the element scrolls, the background
must scroll with it. In simpler terms, the background sticks to the
element. This is the default setting for background-attachment.
29. CSS Borders
The CSS border properties allow you to specify
the style, width, and color of an element's border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
•dotted - Defines a dotted border
•dashed - Defines a dashed border
•solid - Defines a solid border
•double - Defines a double border
•groove - Defines a 3D grooved border. The effect depends on the border-color
value
•ridge - Defines a 3D ridged border. The effect depends on the border-color value
•inset - Defines a 3D inset border. The effect depends on the border-color value
•outset - Defines a 3D outset border. The effect depends on the border-color value
•none - Defines no border
•hidden - Defines a hidden border
The border-style property can have from one to four values (for the top border,
right border, bottom border, and the left border).