Styles.docx

Styles
==================================================================================
 Styles provides set of attributes used to make HTML more interactive and responsive.
 HTML also have some attributes but that are not enough for more interactive and
responsive
 You can define styles for HTML elements by using 3 Techniques.
 Inline
 Embedded
 CSS [ Cascading Style Sheet]
Inline Styles
 The styles are defined for every HTML element individually by using “style” attribute.
 They are local to HTML element hence they are fast in rendering output.
 They are bound to specific element.so we can’t reuse the styles.
Syntax:
<div style=”attribute:value”> </div>
Ex:
<body>
<h1 style="background-color:red;color:white;text-align:center">HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
Embedded Styles
 Styles are defined for HTML elements in a separate “style section” by using “<style>” tag.
 These styles are embedded into HTML Page in <head> or <body> sections.
 You can reuse the styles for several elements if they are embedded.
 Little slow in rendering effects as they are not with the element.
 You cannot reuse the embedded styles of one page in another. Styles are only for the
specific page.
FAQ: Where to embed the styles, in <head> or <body>?
Ans: if you want to load the styles at the time of loading page then keep in <body>.
If you want to load the styles into memory and use for later then keep in <head>.
FAQ: If we define styles both inline and embedded then which one will work?
Ans: Inline styles will always override the embedded styles
Ex:

<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style>
h1 {
background-color: darkcyan;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h1 style="background-color: blue;">HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
</html>
Output :
Style Tag Attributes:
Attribute Description
type - It specifies the styles language MIME Type
- Multipurpose Mail Extension
- It is responsible to make browser
understand the code snippet of styles
- For styles the type is “text/css”
Ex:
<style type="text/css">
h1 {
background-color:
darkcyan;
color: white;
text-align: center;
}
</style>

media - It defines which media the style should be
applied to.
- Media Types describe the general category
of a device, which can be screen , printer ,
speech etc.
- You can use values: “all,print,screen,speeh”
Title - It is defined for stylesheet. when you link a
Style sheet in other page
- It is deprecated
- Not Supported for every Browser.
CSS [ Cascading Style Sheets]
==============================================================

 Styles are maintained in a separate stylesheet that have extension “.css”.
 You can link the style sheet to any HTML page and re-use the styles.
 Using a external file for HTML page will increase the number of requests for page and also
the page load time.
Style syntax:
1. Inline syntax:
<div style=”attribute1:value; attribute2:value”></div>
2. Embedded and External Style Sheet
Selector
{
Attribute1: value;
Attribute2: value;
}
- A selector specifies the target location where the given effects are applied
- The Primary selectors used in styles are
 Type Selector
 ID Selector
 Class Selector
Type Selector:
 It specifies directly the tag name where you want the styles to apply. Like div,p,h2.
 You can’t ignore effects for any specific occurrence of element defined with same tag.
 Example:


<!DOCTYPE html>
<html>
<head>
<title>Styles</title>
<style type="text/css">
h2 {
background-color: darkblue;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>Welcome To Styles </h2>
<h1>HTML</h1>
<h1>CSS</h1>
<h1>JavaScript</h1>
</body>
</html>
 You can group the type selectors, Same effects can be used for multiple elements
 Example:
h2,dt {
color: white;
text-align: center;
}
ID Selector
 Styles can define a set of effects with an ID reference “#anyUniqueId”.
 Any HTML element can access these effects by referring to ID.
#effectName
{
Attribute:value;
}
<div id=”effectName”></div>
<p id=”effectName”></div>
 You can apply effects only to element what you want.

Example:
/* id selector
#effects {
color: white;
text-align: center;
padding: 4px;
}
*/
 Every HTML tag can refer to only one ID.
 If your styles are defined in multiple groups you can’t apply all groups to one element.
Example:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<style>
#back-effects{
background-color: red;
}
#text-effects{
color: yellow;
text-align: center;
}
#border-effects{
border: 2px solid gray;
}
</style>
</head>
<body>
<h2 id="back-effects">Welcome To Styles </h2>
<h2> HTML </h2>
<h2> CSS </h2>
<h2> JavaScript </h2>
</body>
</html>
Invalid Case:
<h2 id="back-effects text-effects">Welcome To Styles </h2>
Both ids we cannot apply here not at all possible with id selector

Class Selector
 A class Selector is defined by using “.” dot operator and a reference name.
 Classes are applied to any element by using “class” attribute.
 Every element can implement multiple classes separated with “spaces”
 Example:
<html lang="en">
<head>
<title>Home</title>
<style>
/* ID selector */
#back-effects{
}
#text-effects{
color: yellow;
text-align: center;
}
#border-effects{
border: 2px solid gray;
}
/* Class Selector */
.back-effects {
}
.text-effects{
color: yellow;
text-align: center;
}
.border-effects{
border: 4px solid yellow;
}
</style>
</head>
<body>
<h2 class="back-effects text-effects border-effects">Welcome To Styles </h2>
<h2> HTML </h2>
<h2 class="text-effects"> CSS </h2>
<h2 class="border-effects"> JavaScript </h2>
</body>
</html>
 CSS Selectors are further classified into various groups based on their behaviour.

 Combinators / Rational Selectors
 Attribute Selectors
 Pseudo Selectors
 Structural Pseudo Selectors
Rational or Combinators: These are based on parent and child hierarchy as well as the
relationship with other elements.
Selector Description
Descendent Selector:
Target all tags under specified parent.it includes any level hierarchy.
Syntax:
Parent Child { }
Example: <html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<style>
/* Descendent Selector */
ol li {
color: red;
}
</style>
</head>
<body>
<h2> Web Technologies </h2>
<ol>
<li>HTML
<ol>
<li>Void Elements </li>
<li>Normal Elements</li>
</ol>
</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
<h2> Web Terminology </h2>
<ul>
<li>Web Site</li>
<li>Web Page</li>
<li>Server</li>
</ul>
</body>
</html>

Child Selector It applies effects only to the direct child of parent element.
Adjacent sibling
combinator
It defines effects to an element which is specified immediately after another
element.
Syntax:
A-Element + B-Element { }
General sibling
Combinator
It defines effects to all elements which are specified after the current
element.
A-Element ~ B- Element {}
Attribute Selector: Several HTML elements are presented using attribute of a tag. Hence we
have to apply effects for a tag and its attribute.
Syntax:
tagName[“attributeName = value”] {} ( or) tagName[attributeName]
Example:
<html lang="en">
<head>
<style>
input[type="password"] {
background-color: green;
}
p[id]{
}
</style>
</head>
<body>

<p>Para - 1 </p>
<p id="p2">Para - 2 </p>
<p id="p3">Para - 3</p>
<p>Para - 4</p>
<form>
<dl>

<dt>Name</dt>
<dd><input type="text"></dd>
<dt>Password</dt>
<dd><input type="password"></dd>
</dl>
<input type="button" value="Submit">
<input type="button" value="Cancel">
</form>
</body>
</html>
Different Conditions for the Values:
Attribute selectors and use multiple conditions
Condition Purpose
[attribute=”val”] It should be an exact match.
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<style>
p[class="Effect"]{
color: red;
}
</style>
</head>
<body>
<p class="paraEffect">Para-1</p>
<p class="para Effect">Para-2</p>
<p class="Effectpara">Para-3</p>
<p class="Effect">Para-4</p>
</body>
</html>
[ attribute^=”val”] It refers the value starting with specified term.
Example:
<html lang="en">
<head>
initial-scale=1.0">
<style>
p[class^="Effect"]{
color: red;

}
</style>
</head>
<body>
</body>
</html>
[attribute$=”val”] It specifies the value ending with
<html lang="en">
<head>
initial-scale=1.0">
<style>
p[class$="Effect"] {
color: green;
}
</style>
</head>
<body>
</body>
</html>
[attribute*=”val”] It matches at any place.
<html lang="en">
<head>
initial-scale=1.0">
<style>
p[class*="Effect"]
{
color: brown;
}
</style>
</head>
<body>

</body>
</html>
[attribute |= “val”] Name starts with specified term and separated term.
Example:
<html lang="en">
<head>
initial-scale=1.0">
<style>
p[class|="para"]
{
color: brown;
}
</style>
</head>
<body>
<p class="para-Effect">Para-2</p>
</body>
</html>
[attribute ~= “val” ] Name starts with specified term and seperated with space.
<html lang="en">
<head>
initial-scale=1.0">
<style>
p[class~="para"]
{
color: brown;
}
</style>
</head>
<body>
<p class="para-Effect">Para-2</p>

</body>
</html>
Dynamic pseudo-Classes:
:link Specify effects for Hyperlink.
:visited it defines effects for visited links.
:hover It defines the effects when mouse is over the link.
:active It defines the effects when link is in active state.[Hold down
the key on link].
:focus Defines effects when element gets focus.
Example:
<html lang="en">
<head>
<style>
a:link {
color: green;
text-decoration: none;
}
a:visited {
color:gray
}
a:active {
color: red;
}
a:hover {
text-decoration: underline;
}
img {
width: 400px;
height : 250px;
}
img:hover {
width:200px;
height: 150px;
}

input:focus {
border: 2px solid green;
box-shadow: 2px 2px 3px green;
}
/* .shadow:focus {
border:2px solid green;
box-shadow: 2px 2px 3px green;
} */
</style>
</head>
<body>
<div>
<dl>
<dt>Name</dt>
<dd><input class="shadow" type="text"></dd>
<dt>Password</dt>
<dd><input class="shadow" type="password"></dd>
</dl>
</div>
<div>
<img src="../CSS/images/6.jpg" alt="">
</div>
<a href="sample.html">Sample Page</a>
<a href="home.html">Home</a>
<a href="contact.html">Contact</a>
</body>
</html>
Target pseudo class:
:target It defines effect to element when it is
accessed as target on click.
Example:
<html lang="en">
<head>
<style>
.topic {
margin: 10px;
color: white;

padding: 10px;
border: 1px solid black;
width: 95%;
}
.topic:target {
background-color: black;
color: white;
}
</style>
</head>
<body>
<header>
<menu>
<span><a href="#HTML">HTML</a></span>
<span>|</span>
<span><a href="#CSS">CSS</a></span>
<span>|</span>
<span><a href="#js">JavaScript</a></span>
</menu>
</header>
<section>
<div class="topic" id="HTML">
<h3>HTML</h3>
<p>It is a markup language</p>
</div>
<div class="topic" id="CSS">
<h3>CSS</h3>
<p>It defines styles for HTML Elements</p>
</div>
<div class="topic" id="js">
<h3>JavaScript</h3>
<p>It is a language for Client Side,Server side and database.</p>
</div>
</section>
</body>
</html>
The UI element states pseudo-classes
:enabled It defines effects when element is enabled
:disabled It defines effects when element is disabled
:read-only It defines effects when element is configured with read-only
property
:checked It defines effects on checked status of radio and checkbox.
Example:

<html lang="en">
<head>
<style>
button:disabled {
background-color: gray;
color:white;
cursor: not-allowed;
}
button:enabled {
color: white;
cursor: grab;
}
input:read-only {
color: red;
cursor: not-allowed;
}
</style>
</head>
<body>
<form>
Name ( You Can't Edit )
<input type="text" readonly value="John">
<button enabled>Clear</button>
<button disabled>Submit</button>
</form>
</body>
</html>
Example2:
<html lang="en">
<head>
<title>Checked Demo</title>
<style>
.note {
width:80%;
height: 250px;
text-align: justify;
background-color: lightgray;
overflow: scroll;
}
input[type="checkbox"]+span {
color: red;

}
input[type="checkbox"]:checked + span {
color: green;
}
input[type="radio"]+span {
color: gray;
}
input[type="radio"]:checked+span {
color:green;
border: 3px solid;
}
</style>
</head>
<body>
<fieldset>
<legend>Choose Payment</legend>
<input type="radio" name="pay"> <span>Cash</span>
<input type="radio" name="pay"> <span>Credit Card</span>
<input type="radio" name="pay"> <span>UPI</span>
</fieldset>
<fieldset>
<legend>Terms of Service</legend>
<div class="note">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora
quibusdam pariatur harum ad voluptatum
consequuntur atque mollitia velit veritatis adipisci nulla error
beatae aut accusantium nemo, sed minus dolores
placeat nesciunt quos ipsum eaque Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Maxime vero neque quo consequatur pariatur dolore
recusandae officiis perspiciatis nihil qui possimus ratione impedit voluptate
animi reprehenderit ab exercitationem odio eos quidem quod temporibus, ipsa
debitis saepe! Labore laudantium exercitationem aliquam deleniti sequi incidunt
vitae odio velit libero natus, recusandae autem quidem alias veritatis! Ad numquam
aut dolorum fugit vitae, in doloribus! Quibusdam nihil odit sapiente. Ex at
ducimus, laborum, ut repellat maxime id corrupti minima doloremque debitis nobis.
Ipsum odio magni dignissimos reprehenderit quam ipsa ipsam ullam ea molestias?
Eveniet eligendi ipsa libero tempora! Ut dolorem deserunt corrupti id voluptatem
et temporibus, veritatis laborum saepe adipisci quos commodi quas, repellendus est
delectus ab accusantium consectetur, explicabo facere culpa consequuntur. Mollitia
maxime deserunt natus suscipit voluptate sequi perferendis quod explicabo? Officia
dignissimos debitis voluptates molestiae
tempore laboriosam quae laborum quod unde blanditiis aspernatur, odit
exercitationem vel, nulla eaque, voluptas id placeat.
fugiat laudantium obcaecati? Nesciunt, ab architecto facilis quis
fugit repellat amet aut quos quaerat sunt quibusdam.
</p>
</div>
<input type="checkbox"> <span> I Accept </span>
</fieldset>
</body>
</html>

The UI element Validation states pseudo-classes
Validation State Selector Description
:valid
:invalid
:required
:optional
:in-range
:out-of-range
CSS Units
- Units define the size and position.
- You can configure height, width, x-position, y-position, z-position.
- The units in CSS are categorized into 2 types.
 Absolute length units.
 Relative length units.
Absolute Length units:
- They are not relative to anything else and are generally considered as normal units.
- These are not affected by other relative elements and their units.
UNIT Name Equivalent to
Cm Centimeter 1cm = 96px/2.54 = 37.79px
Mm Millimeters 1mm = 1/10 of 1 cm
Q Quarter-millimeter 1Q = 1/40th of 1cm
In Inches 1in = 2.54cm = 96px
Pc Picas 1pc = 1/6th of inch
Pt Points 1pt = 1/72th of 1inch

Px Pixels 1px = 1/96th of 1inche
Relative Length Units:

Styles.docx

Recommended

Recommended

More Related Content

Similar to Styles.docx

Similar to Styles.docx (20)

Recently uploaded

Recently uploaded (20)

Styles.docx