CSS in Amity School of Engineering & Technology
CSS
Lecture 11
CSS
CSS
•
Presenting
a document to a user means
converting it into a usable form for your
audience.
Browsers
,like
Firefox
,
Chrome
or
Intern
et Explorer
, are designed to present documents
visually, for example, on a computer screen,
projector or printer.
Cascading Style Sheet
•
CSS code is simple written instructions that
tell web browsers. How to display things on a
page.
For Example
•
make text bold.
•
position things a page.
•
set the font style for a page or paragraph etc.
How does CSS affect HTML?
•
Web browsers apply
CSS rules
to a document
to affect how they are displayed.
A CSS rule is formed from:
•
A set of
properties
, which have values set to
update how the HTML content is displayed,
for example
I want my element's width to be 50% of
its parent element, and its background to be red
.
Cont..
•
A
selector
, which
selects
the element(s) you
want to apply the updated property values to.
For example,
I want to apply my CSS rule to all the
paragraphs in my HTML document
.
•
A set of CSS rules contained within
a
stylesheet
determines how a webpage
should look
How does CSS actually work?
•
When a browser displays a document, it must
combine the document's content with its style
information. It processes the document in two
stages:
Cont..
1.
The browser converts
HTML
and
CSS
into
the
DOM
(
Document Object Model
). The DOM
represents the document in the computer's
memory. It combines the document's content
with its style.
2.
The browser displays the contents of the
DOM.
Cont..
Load
HTML
Parse
HTML
Create
DOM tree
Display
Load
CSS
Parse
CSS
Attached Style to
DOM node
HTML CODE
<p> Let's use:
<span>Cascading</span>
<span>Style</span>
<span>Sheets</span>
</p>
In DOM
•
P
├─
"Let's use:"
├─
SPAN
|
└─
"Cascading"
├─
SPAN
|
└─
"Style"
└─
SPAN
└─
"Sheets"
How to apply your CSS to your HTML
•
There are three different ways to apply CSS to
an HTML document.
1.
Inline
2.
Internal
3.
External
Inline
•
Inline styles
are CSS declarations that affect
one element only, contained within
a
style
attribute:
Example
<html>
<head>
<title>My CSS experiment</title>
</head>
<body>
<h1 style="color: blue; background-color:
yellow; border: 1px solid black;">Hello World!
</h1>
<p style="color:red;">This is my first CSS example
</p>
</body>
</html>
Internal
<
html>
<head>
<title>My CSS experiment</title>
<style>
h1
{color: blue;
background-color: yellow;
border: 1px solid black;
}
P
{color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
External
•
An external stylesheet is when you have your
CSS written in a separate file with
a .css extension, and you reference it from an
HTML
<link>
element.
Example HTML FILE
<html>
<head>
<title>My CSS experiment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Hello World!</h1>
<p>This is my first CSS example</p>
</body>
</html>
CSS File
•
h1
{color: blue;
background-color: yellow;
border: 1px solid black;
}
p
{color: red;
}
What is DOM
•
A DOM has a tree-like structure. Each element,
attribute and piece of text in the markup language
becomes a
DOM node
in the tree structure. The
nodes are defined by their relationship to other
DOM nodes. Some elements are parents of child
nodes, and child nodes have siblings.
•
Understanding the DOM helps you design, debug
and maintain your CSS because the DOM is where
your CSS and the document's content meet up.
How to specify a rules?
•
Some example
•
H2 { color : blue }•
P { font -size :12pt; font-family: verdana }Difference between Id and Class
•
ID’s are Unique
•
Each element can have only one ID
•
Each page can have only one element with that
ID
•
When you used id for one you can not used id
for different element.
Cont..
•
<p id=“main” > I have an id </p>
•
<p id=“main”>………</p>
•
ID like a driver license number (you can not
have two driver licence with same number)
Class
•
Classes are NOT unique
•
You can use the same class on multiple
elements.
•
You can use multiple classes on the same
element.
Cont..
•
<p class=“chapter” >I am a chapter</p>
•
<p class=“chapter”> I …….</p>
•
<p id =“main” class=“class1 class2 class3..class
n”> hi</p>
Example
•
#t_color
{color:red;
}
•
#t_style
{font-family:arial;
font-size:20px;
}
Cont..
•
<p id=“t_color”>test id only</p>
•
<p id=“t_color”>The box id text</p>
•
<p id=“t_color t_style”>not allow</p>
•
<p class=“t1_color”>test class only</p>
•
<p class=“t1_color t2_style”>the box class</p>
Cont..
•
The unique only means one element can not
have more than one id attribute like class
selector.
•
A simple way to look at it is that an id is
unique to only one element.
•
A class is not unique and applied to multiple
elements.
Priority
•
ID gets higher priority than class in CSS
•
Example:
Universal, Child, and Adjacent Selectors
•
we have covered HTML selectors, Class and
ID selectors, and how to combine selectors to
target specific element boxes.
Universal selectors
•
Using an
asterisk
(“ * ”), you can
target
everything
under the page. You can use it
by itself to set global styles for a page, or as a
descendant of a selector to set styles of everything
within something.
example
•
*
{margin: 0;
padding: 0;
}
Child selectors
•
A
greater-than
symbol (“>”) can be used to
specify something that is a child of something
else, that is, something
immediately
nested
within something
Cont..
•
#genus_examples > li
{ border: 1px solid red }Cont..
•
<ul id="genus_examples">
<li>Cats
<ul>
<li>Panthera</li>
<li>Felis</li>
<li>Neofelis</li>
</ul> </li>
<li>Apes
<ul> <li>Pongo</li> <li>Pan</li> <li>Homo</li> </ul> </li>
</ul>
Cont..
•
a red border would be drawn around “Cats”
and “Apes” only, rather than around every
single list item (which would be the case
with#genus_examples li { border: 1px solid red}). This is because the likes of “Panthera” and
“Felis” are
grandchildren
of
“genus_examples”, not
children
.
HTML SPAN TAG
•
The <span> element is an inline element and does
not break into lines unless the break <br /> tag is
used and the defined text (content) between the
<span> open and </span> close tags is displayed as a
line (by default without using other elements).
•
Inline elements are text elements in the HTML
file and can be defined within the line of another
element.
•
DIV tag
•
<div> tag is used for defining a section of your
document. With the div tag, you can group
large sections of HTML elements together and
format them with CSS.
•
The difference between the div tag and the
span tag is that the div tag is used with
blocklevel elements whilst the span tag is used
with inline elements.
Example
•
<html>
•
<head>
•
<title>
•
</title>
•
<style>
•
.text span {color:red;}•
span { color:blue;}•
h1{color:green;}•
h1{color:black;}•
</style>
•
</head>
•
<body>
•
<h1>
•
<p>
•
<span class="text"><span>Text for span</span></span>
•
</p>
•
</h1>
•
</body>
•
</html>
What is Cache
•
a collection of items of the same type stored in
a hidden or inaccessible place.
CSS, or Cascading Style Sheets, plays a crucial role in web development by specifying how documents are presented to users. This lecture series from Amity School of Engineering & Technology covers the basics of CSS, including its relationship with HTML, how browsers interpret CSS rules to style web content, and the fundamental concepts of CSS code and selectors. Gain insights into how CSS affects HTML, how to apply CSS rules to elements effectively, and the overall working process of CSS in web design.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Amity School of Engineering & Technology CSS Lecture 11
Amity School of Engineering & Technology CSS CSS is a language for specifying how documents are presented to users how they are styled, laid out, etc. A document is usually a text file structured using a markup language HTML is the most common markup language, but you will also come across other markup languages such as SVG or XML.
Amity School of Engineering & Technology CSS Presenting converting it into a usable form for your audience. Browsers,like Firefox, Chrome or Intern et Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer. a document to a user means
Amity School of Engineering & Technology Cascading Style Sheet CSS code is simple written instructions that tell web browsers. How to display things on a page. For Example make text bold. position things a page. set the font style for a page or paragraph etc.
Amity School of Engineering & Technology How does CSS affect HTML? Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from: A set of properties, which have values set to update how the HTML content is displayed, for example I want my element's width to be 50% of its parent element, and its background to be red.
Amity School of Engineering & Technology Cont.. A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphsinmyHTMLdocument. A set of CSS rules a stylesheet determines how a webpage should look contained within
Amity School of Engineering & Technology How does CSS actually work? When a browser displays a document, it must combine the document's content with its style information. It processes the document in two stages:
Amity School of Engineering & Technology Cont.. 1. The browser converts HTML and CSS into the DOM (Document Object Model). The DOM represents the document in the computer's memory. It combines the document's content with its style. 2. The browser displays the contents of the DOM.
Amity School of Engineering & Technology Cont.. Load HTML Parse HTML Create DOM tree Display Attached Style to DOM node Load CSS Parse CSS
Amity School of Engineering & Technology HTML CODE <p> Let's use: <span>Cascading</span> <span>Style</span> <span>Sheets</span> </p>
Amity School of Engineering & Technology In DOM P "Let's use:" SPAN | "Cascading" SPAN | "Style" SPAN "Sheets"
Amity School of Engineering & Technology How to apply your CSS to your HTML There are three different ways to apply CSS to an HTML document. 1. Inline 2. Internal 3. External
Amity School of Engineering & Technology Inline Inline styles are CSS declarations that affect one element only, a style attribute: contained within
Amity School of Engineering & Technology Example <html> <head> <title>My CSS experiment</title> </head> <body> <h1 style="color: blue; background-color: yellow; border: 1px solid black;">Hello World! </h1> <p style="color:red;">This is my first CSS example </p> </body> </html>
Amity School of Engineering & Technology Internal <html> <head> <title>My CSS experiment</title> <style> h1 { color: blue; background-color: yellow; border: 1px solid black; } P { color: red; } </style> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>
Amity School of Engineering & Technology External An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element.
Amity School of Engineering & Technology Example HTML FILE <html> <head> <title>My CSS experiment</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World!</h1> <p>This is my first CSS example</p> </body> </html>
Amity School of Engineering & Technology CSS File h1 { color: blue; background-color: yellow; border: 1px solid black; } p { color: red; }
Amity School of Engineering & Technology What is DOM A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings. Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.
Amity School of Engineering & Technology How to specify a rules? Some example H2 { color : blue } P { font -size :12pt; font-family: verdana }
Amity School of Engineering & Technology Difference between Id and Class ID s are Unique Each element can have only one ID Each page can have only one element with that ID When you used id for one you can not used id for different element.
Amity School of Engineering & Technology Cont.. <p id= main > I have an id </p> <p id= main > </p> ID like a driver license number (you can not have two driver licence with same number)
Amity School of Engineering & Technology Class Classes are NOT unique You can use the same class on multiple elements. You can use multiple classes on the same element.
Amity School of Engineering & Technology Cont.. <p class= chapter >I am a chapter</p> <p class= chapter > I .</p> <p id = main class= class1 class2 class3..class n > hi</p>
Amity School of Engineering & Technology Example #t_color { color:red; } #t_style { font-family:arial; font-size:20px; }
Amity School of Engineering & Technology Cont.. <p id= t_color >test id only</p> <p id= t_color >The box id text</p> <p id= t_color t_style >not allow</p> <p class= t1_color >test class only</p> <p class= t1_color t2_style >the box class</p>
Amity School of Engineering & Technology Cont.. The unique only means one element can not have more than one id attribute like class selector. A simple way to look at it is that an id is unique to only one element. A class is not unique and applied to multiple elements.
Amity School of Engineering & Technology Priority ID gets higher priority than class in CSS Example: HTML <div id= main class= myclass > id vs class</div> CSS .myclass { Color:red; } #main { color:blue; }
Amity School of Engineering & Technology Universal, Child, and Adjacent Selectors we have covered HTML selectors, Class and ID selectors, and how to combine selectors to target specific element boxes.
Amity School of Engineering & Technology Universal selectors Using an asterisk ( * ), you can target everything under the page. You can use it by itself to set global styles for a page, or as a descendant of a selector to set styles of everything within something.
Amity School of Engineering & Technology example * { margin: 0; padding: 0; }
Amity School of Engineering & Technology Child selectors A greater-than symbol ( > ) can be used to specify something that is a child of something else, that is, something immediately nested within something
Amity School of Engineering & Technology Cont.. #genus_examples > li { border: 1px solid red }
Amity School of Engineering & Technology Cont.. <ul id="genus_examples"> <li>Cats <ul> <li>Panthera</li> <li>Felis</li> <li>Neofelis</li> </ul> </li> <li>Apes <ul> <li>Pongo</li> <li>Pan</li> <li>Homo</li> </ul> </li> </ul>
Amity School of Engineering & Technology Cont.. a red border would be drawn around Cats and Apes only, rather than around every single list item (which would be the case with#genus_examples li { border: 1px solid red }). This is because the likes of Panthera and Felis are grandchildren of genus_examples , not children.
Amity School of Engineering & Technology HTML SPAN TAG The <span> element is an inline element and does not break into lines unless the break <br /> tag is used and the defined text (content) between the <span> open and </span> close tags is displayed as a line (by default without using other elements). Inline elements are text elements in the HTML file and can be defined within the line of another element.
Amity School of Engineering & Technology DIV tag <div> tag is used for defining a section of your document. With the div tag, you can group large sections of HTML elements together and format them with CSS. The difference between the div tag and the span tag is that the div tag is used with blocklevel elements whilst the span tag is used with inline elements.
Amity School of Engineering & Technology Example <html> <head> <title> </title> <style> .text span {color:red;} span { color:blue;} h1{color:green;} h1{color:black;} </style> </head> <body> <h1> <p> <span class="text"><span>Text for span</span></span> </p> </h1> </body> </html>
Amity School of Engineering & Technology What is Cache a collection of items of the same type stored in a hidden or inaccessible place.
