This document provides an overview of cascading style sheets (CSS), including how to specify style sheet rules, use external and inline style specifications, create new HTML elements through style classes, and control font, text, foreground, background and other properties. It discusses CSS levels 1-3 and browser compatibility. Examples are provided to illustrate concepts like applying styles via external and inline styles, style precedence rules, and using CSS to control layout with layers (Netscape only).
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Extended slides from a recent Sydney Port80 presentation. The slides cover three overall topics: 1) a quick timeline of CSS-related events, 2) key events that changed CSS and 3) a discussion on writing better CSS.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Supported Browser Chrome,Firefox, IE9+(icons IE10+).
Basic Properties of Background in CSS for HTML.
These properties are used in web designing projects.
By using Sublime text editor, it is easy to use.
By using these properties, one can generate such attractive web pages.
Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience across all their products on any platform. Supported Browser Chrome,Firefox, IE9+(icons IE10+).
Basic Properties of Background in CSS for HTML.
These properties are used in web designing projects.
By using Sublime text editor, it is easy to use.
By using these properties, one can generate such attractive web pages.
Css training tutorial css3 & css4 essentialsQA TrainingHub
Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
Act Academy provides Industrial training in PHP, .Net, graphic designing, web designing and many more. Also provides diploma courses in CAD designing, Financial accounting with 100% job assurances.
1.CSS term. 2. Style attribute / Style element. 3. Inline styles / Multiple styles. 4. CSS syntax (Selector - Rules). 5. Selectors (Type - Class and ID). 6. External CCS file. 7. Boxes (Content – Padding – Border - Margin). 8. Style sheet or style element — not both! 9. CSS colors.
Skills: 1. Change the color of text on a web page. 2. Change the layout of a web page. 3. Access Developer Tools in your browser. 4. Apply style to HTML elements. 5. Styling HTML separately. 6. Linking stylesheets. 7. CSS property for setting an element. 8. Apply Fonts on a web page. 9. Include the CCS files.
CSS Part 1 Styles' locations
https://youtu.be/gw4tOnu4S8w
CSS Part 2 Types of selectors by engineer & educator Osama Ghandour
https://youtu.be/9Emyuiey-98
CSS Part 3 CSS Syntax
https://youtu.be/-vQwT7uFTUY
CSS Part 4 CSS Selectors Tag, ID, Class, Attribute by engineer & educator Osama Ghandour
https://youtu.be/ZuCCLeVvyW8
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/8c0Z5cej03o
CSS Part 5 Boxes Content – Padding – Border Margin by engineer & educator Osama Ghandour
https://youtu.be/H4VnXlW9Ik8
State of ICS and IoT Cyber Threat Landscape Report 2024 previewPrayukth K V
The IoT and OT threat landscape report has been prepared by the Threat Research Team at Sectrio using data from Sectrio, cyber threat intelligence farming facilities spread across over 85 cities around the world. In addition, Sectrio also runs AI-based advanced threat and payload engagement facilities that serve as sinks to attract and engage sophisticated threat actors, and newer malware including new variants and latent threats that are at an earlier stage of development.
The latest edition of the OT/ICS and IoT security Threat Landscape Report 2024 also covers:
State of global ICS asset and network exposure
Sectoral targets and attacks as well as the cost of ransom
Global APT activity, AI usage, actor and tactic profiles, and implications
Rise in volumes of AI-powered cyberattacks
Major cyber events in 2024
Malware and malicious payload trends
Cyberattack types and targets
Vulnerability exploit attempts on CVEs
Attacks on counties – USA
Expansion of bot farms – how, where, and why
In-depth analysis of the cyber threat landscape across North America, South America, Europe, APAC, and the Middle East
Why are attacks on smart factories rising?
Cyber risk predictions
Axis of attacks – Europe
Systemic attacks in the Middle East
Download the full report from here:
https://sectrio.com/resources/ot-threat-landscape-reports/sectrio-releases-ot-ics-and-iot-security-threat-landscape-report-2024/
Smart TV Buyer Insights Survey 2024 by 91mobiles.pdf91mobiles
91mobiles recently conducted a Smart TV Buyer Insights Survey in which we asked over 3,000 respondents about the TV they own, aspects they look at on a new TV, and their TV buying preferences.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...DanBrown980551
Do you want to learn how to model and simulate an electrical network from scratch in under an hour?
Then welcome to this PowSyBl workshop, hosted by Rte, the French Transmission System Operator (TSO)!
During the webinar, you will discover the PowSyBl ecosystem as well as handle and study an electrical network through an interactive Python notebook.
PowSyBl is an open source project hosted by LF Energy, which offers a comprehensive set of features for electrical grid modelling and simulation. Among other advanced features, PowSyBl provides:
- A fully editable and extendable library for grid component modelling;
- Visualization tools to display your network;
- Grid simulation tools, such as power flows, security analyses (with or without remedial actions) and sensitivity analyses;
The framework is mostly written in Java, with a Python binding so that Python developers can access PowSyBl functionalities as well.
What you will learn during the webinar:
- For beginners: discover PowSyBl's functionalities through a quick general presentation and the notebook, without needing any expert coding skills;
- For advanced developers: master the skills to efficiently apply PowSyBl functionalities to your real-world scenarios.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
2. Cascading Style Sheets2 www.corewebprogramming.com
Agenda
• Specifying style sheet rules
• External and inline style specifications
• Creating new HTML elements through style
sheet classes
• Specifying font and text properties
• Controlling foreground and background
properties
• Netscape LAYERs
• Creating layers through style sheets
3. Cascading Style Sheets3 www.corewebprogramming.com
Benefits of Cascading Style
Sheets
• Powerful and flexible way to specify the
formatting of HTML elements
– Can define font, size, background color, background
image, margins, etc.
• Share style sheets across multiple
documents or entire Web site
• Can specify a class definition for a style,
effectively defining new HTML elements
• Rules are applied in a hierarchical manner
(precedence rules)
4. Cascading Style Sheets4 www.corewebprogramming.com
Cascading Style Sheets
• CSS, Level 1 (1996)
– Concerned with applying simple styles to HTML elements
– http://www.w3.org/TR/REC-CSS1
• CSS, Level 2 (1998)
– Supports media-specific style sheets (visual browsers, aural devices,
printers, braille devices)
– http://www.w3.org/TR/REC-CSS2
• CSS, Level 3 (draft 2001)
– Focused on modularization of the CSS specification
– http://www.w3.org/TR/css3-roadmap/
• Note:
– CSS1 is supported by Netscape and Internet Explorer 4.x and above
– See http://www.webreview.com/style/css1/charts/mastergrid.shtml
for a summary of browser compatibility
5. Cascading Style Sheets5 www.corewebprogramming.com
Specifying Style Rules
• General form of rule
selector { property: value }
or
selector { property1: value1;
property2: value2;
...
propertyN: valueN }
• Example
H1 { text-align: center;
color: blue }
6. Cascading Style Sheets6 www.corewebprogramming.com
Fizzics1.html, Example
(no style sheet)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Advances in Physics</TITLE>
</HEAD>
<BODY>
<H1>New Advances in Physics</H1>
<H2>Turning Gold into Lead</H2>
In a startling breakthrough, scientist B.O. "Gus" Fizzics
has invented a <STRONG>practical</STRONG> technique for
transmutation! For more details, please see
<A HREF="give-us-your-gold.html">our transmutation thesis</A>.
...
</BODY>
</HTML>
10. Cascading Style Sheets10 www.corewebprogramming.com
External Style Sheets
• Specify link to external style sheet in the HEAD
section of the HTML document
<LINK REL=STYLESHEET
HREF="Sitestyle.css" // Absolute or relative link
TYPE="text/css">
• Sitestyle.css
/* Example of an external style sheet */
H1 { text-align: center;
font-family: Arial
}
H2 { color: #440000;
text-align: center;
font-family: Arial Black, Arial, Helvetica, sans-serif
}
...
11. Cascading Style Sheets11 www.corewebprogramming.com
Inline Style Specification
• Use the STYLE attribute defined for each
HTML element to directly specify the style
• Example
...
<H1>New Advances in Physics</H1>
<P STYLE="margin-left: 0.5in;
margin-right: 0.5in;
font-style: italic">
This paper gives the solution to three
previously unsolved problems: turning lead into gold,
antigravity, and a practical perpetual motion machine.
...
12. Cascading Style Sheets12 www.corewebprogramming.com
Defining Style Classes
• To define an element style class proceed
the HTML element by a period and class
name
// Define an "abstract" paragraph type
P.abstract { margin-left: 0.5in;
margin-right: 0.5in;
font-style: italic }
• To use, supply the name of the style class in
the CLASS attribute of the HTML element
<H1>New Advances in Physics</H1>
<P CLASS="abstract">
This paper gives the solution to three previously
unsolved problems: turning lead into gold,
antigravity, and a practical perpetual motion machine.
13. Cascading Style Sheets13 www.corewebprogramming.com
Defining Style Classes
• To define a global style class, omit the
element name
// Style available to all elements
.blue { color: blue; font-weight: bold }
• To use, simple specify the style class in the
CLASS attribute of the HTML element
<H2 CLASS="blue">A Blue Heading</H2>
<!-- Apply to a section of text -->
This text is in the default color, but
<SPAN CLASS="blue">this text is blue.</SPAN>
14. Cascading Style Sheets14 www.corewebprogramming.com
Defining Styles through
User-Defined IDs
• An ID is like a class but can be applied only
once in a document
<HEAD>
<TITLE>...</TITLE>
<STYLE TYPE="text/css">
<!--
#foo { color: red }
-->
</STYLE>
</HEAD>
<BODY>
...
<P ID="foo">
...
</BODY>
15. Cascading Style Sheets15 www.corewebprogramming.com
Style Sheet Precedence Rules
1. Rules marked “important” have the highest
priority (rarely used)
H1 { color: black !important;
font-family: sans-serif }
2. Author rules have precedence over reader
rules
• Style sheet rules override browser preferences
16. Cascading Style Sheets16 www.corewebprogramming.com
Style Sheet Precedence Rules,
cont.
3. More specific rules have precedence over
less specific rules
#foo { ... } // ID selector highest priority
P.big H1 { ... } // Class higher over element
P STRONG { ... } // Two tags higher than single tag
STRONG { ... }
4. In case of tie, the last rule has priority
17. Cascading Style Sheets17 www.corewebprogramming.com
Useful Font Properties
• font-weight
– Relative weight (boldness) of font
– normal | lighter | bold | bolder | 100 | 200 | ... | 900
H1 { font-weight : 200 }
H2 { font-weight : bolder }
• font-style
– Font face type within a family
– normal | italic | oblique
P { font-style : normal }
TH { font-sytle : italic }
18. Cascading Style Sheets18 www.corewebprogramming.com
Useful Font Properties, cont.
• font-size
– Either relative or absolute size of font
– pt, pc, in, cm, mm | em, ex, px, % |
xx-large | x-large | large | medium | small | x-small |
xx-small | smaller | larger
STRONG { font-size: 150% }
P { font-size: 14pt }
P { font-size: xx-large }
• font-family
– Typeface family for the font
H1 { font-family: Arial }
19. Cascading Style Sheets19 www.corewebprogramming.com
CampBearClaw.html, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Camp Bear Claw</TITLE>
<LINK REL=STYLESHEET HREF="CampBearClaw.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Camp Bear Claw</H1>
We have the following activities:
<H2 CLASS="archery">Archery</H2>
<H2 CLASS="arts">Arts and Crafts</H2>
<H2 CLASS="horseback">Horseback Riding</H2>
<H2 CLASS="hiking">Hiking</H2>
<H2 CLASS="campfire">Campfire Song Times</H2>
<H2 CLASS="java">Java Programming</H2>
</BODY>
</HTML>
22. Cascading Style Sheets22 www.corewebprogramming.com
Useful Text Properties
• text-decoration
– Describes text additions or “decorations” that are added
to the text of an element
– none | underline | overline | line-through | blink
P { text-decoration: underline }
• vertical-align
– Determines how elements are positioned vertically
– top | bottom | baseline | middle | sub | super | text-top |
text-bottom | %
• text-align
– Determines how paragraphs are positioned horizontally
– left | right | center | justify
23. Cascading Style Sheets23 www.corewebprogramming.com
Useful Text Properties, cont.
• text-indent
– Specifies the indentation of the first line of the paragraph
– +/– pt, pc, in, cm, mm | +/– em, ex, px, %
P { text-indent: -25px } /* Hanging indent */
• line-height
– Specifies the distance between two consecutive baselines
in a paragraph
– normal | number | pt, pc, in, cm, mm | em, ex, px, %
.double { line-height: 200% }
.triple { line-height: 3 } /* 3x the font size */
DIV { line-height: 1.5em }
24. Cascading Style Sheets24 www.corewebprogramming.com
Bates.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>An Open Letter to the IRS</TITLE>
<LINK REL=STYLESHEET HREF="Bates.css" TYPE="text/css">
</HEAD>
<BODY BACKGROUND="images/bond-paper.jpg">
<P CLASS="rhead">
April 1, 2001
<HR>
<P CLASS="rhead">
William A. Bates<BR>
Macrosoft Corporation<BR>
Blumond, WA 12345
<P CLASS="lhead">
Internal Revenue Service<BR>
Philadelphia, PA 67890
<P>
<BR>
Dear Sirs,
<P CLASS="body">
I am writing to inform you that, due to financial difficulties,
...
27. Cascading Style Sheets27 www.corewebprogramming.com
Useful Foreground and
Background Properties
• color
– Color of the text or foreground color
– color-name | #RRGGBB | #RGB | rgb(rrr, ggg, bbb) |
rgb(rrr%, ggg%, bbb%)
P { color : blue }
H1 { color : #00AABB }
H3 { color : rgb(255, 0, 0 ) } /* red */
• background-image
– none | url(filename)
– Specifies an image to use as the background of region
H2 { background-image: url(Bluedrop.gif);}
28. Cascading Style Sheets28 www.corewebprogramming.com
Useful Foreground and
Background Properties, cont.
• background-repeat
– Specifies how to tile the image in the region
– repeat | repeat-x | repeat-y | norepeat
BODY {
background-image: url(Bluedot.gif);
background-repeat: repeat-x;
}
• background
– Lets you combine properties in a single entry
P { background: url(wallpaper.jpg) repeat-x }
29. Cascading Style Sheets29 www.corewebprogramming.com
Cabinets.html, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Joe's Cabinets</TITLE>
<LINK REL=STYLESHEET HREF="Cabinets.css" TYPE="text/css">
</HEAD>
<BODY>
<CENTER>
<TABLE WIDTH=360 HEIGHT=199>
<TR><TD ALIGN="CENTER" CLASS="banner">Joe's Cabinets
</TABLE>
</CENTER>
<P>
Welcome to Joe's Cabinets. We specialize in
<UL>
<LI>Custom Cabinets
<LI>Kitchen Remodeling
<!-- Etc -->
</UL>
<!-- Etc -->
</BODY>
</HTML>
32. Cascading Style Sheets32 www.corewebprogramming.com
Properties of the Bounding Box
• CSS assume that all elements result in one
or more rectangular regions (bounding box)
• Styles can specify the margins, borders,
and padding of the bounding box
P { margin: 0.25in;
border: 0.25in solid black;
padding: 0.25in;
background: URL(images/bond-paper.jpg) }
34. Cascading Style Sheets34 www.corewebprogramming.com
Images and Floating Elements
• width, height
– Specify a fixed size for an element (usually an image)
– auto | pt, pc, in, cm, mm | em, ex, px
IMG.bullet { width: 50px; height: 50px }
• float
– This property lets elements float into the left or right
margins where the text wrapping arounds
– none | left | right
35. Cascading Style Sheets35 www.corewebprogramming.com
Psalm23.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>The 23rd Psalm</TITLE>
<STYLE>
<!--
SPAN { float: left;
font-family: "Cushing Book";
font-size: 75pt }
-->
</STYLE>
</HEAD>
<BODY>
<H2 ALIGN="CENTER">
The 23rd Psalm (King James Version)</H2>
<SPAN>T</SPAN>he LORD is my shepherd; I shall not want.
He maketh me to lie down in green pastures: he leadeth me
beside the still waters. He restoreth my soul: he leadeth me
in the paths of righteousness for his name's sake. Yea,
36. Cascading Style Sheets36 www.corewebprogramming.com
Psalm23.html, Result
The float property can be used
to implement “drop caps”
37. Cascading Style Sheets37 www.corewebprogramming.com
Effect of Paragraph Breaks,
Example, cont.
Adding a <P> element simply
continues the flow
Adding <P STYLE="clear: left">
forces the next paragraph to start after
the floating element
38. Cascading Style Sheets38 www.corewebprogramming.com
Netscape Layers
• Layers (LAYER and ILAYER elements) allow
you to:
– Place HTML markup in separate regions
– Position each region on the page
• LAYER and ILAYER are only supported in
Netscape 4
– Layers are not supported in Internet Explorer or
Netscape 6
39. Cascading Style Sheets39 www.corewebprogramming.com
LAYER and ILAYER
• LAYER element
– The LAYER element creates regions that have an
absolute position with respect to the window or parent
layer
• ILAYER
– The ILAYER element creates inline layers (regions that
are embedded in the flow of the text)
40. Cascading Style Sheets40 www.corewebprogramming.com
LAYER, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Using ABOVE and BELOW</TITLE>
</HEAD>
<BODY>
<H1>Using <CODE>ABOVE</CODE> and <CODE>BELOW</CODE></H1>
<LAYER ID="Top" LEFT=60 TOP=120
WIDTH=500 HEIGHT=100 BGCOLOR="#F5DEB3">
This layer is on top, even though it appears
first in the HTML document.
</LAYER>
<LAYER ID="Bottom" ABOVE="Top" LEFT=10 TOP=70
WIDTH=500 HEIGHT=100 BGCOLOR="gray">
This layer is on the bottom, even though it appears
second in the HTML document.
</LAYER>
</BODY>
</HTML>
41. Cascading Style Sheets41 www.corewebprogramming.com
LAYER, Result
Netscape 4 layers can specify the relative order of the layers.
42. Cascading Style Sheets42 www.corewebprogramming.com
ILAYER, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Row, Row, Row Your Boat</TITLE>
</HEAD>
<BODY>
<IMG SRC="images/Rowboat.gif" ALIGN="RIGHT">
<HR>
<B>Row, Row, Row Your Boat</B><BR>
Row, row, row your boat<BR>
Gently
<ILAYER TOP=10>down</ILAYER>
<ILAYER TOP=20>the</ILAYER>
<ILAYER TOP=30>stream<BR>
Merrily, merrily, merrily, merrily<BR>
Life is but a dream<BR>
<HR>
</ILAYER>
</BODY>
</HTML>
43. Cascading Style Sheets43 www.corewebprogramming.com
ILAYER, Result
Using TOP in ILAYER can move text up or down in the
current paragraph.
44. Cascading Style Sheets44 www.corewebprogramming.com
Specifying Layers with Style
Sheets
• Style sheets provide an alternative to
LAYER and ILAYER elements
– Style sheet layers are supported by both Netscape and
Internet Explorer
– However, Netscape layers are more complete
• No equivalent style for PAGEX and PAGEY for
positioning
• Problem
– Netscape and IE use a different object model to refer to
layers
– See http://www.stopbadtherapy.com/standards.shtml for
creating cross-browser layers
45. Cascading Style Sheets45 www.corewebprogramming.com
Creating a Style Sheet Layer
• Use an ID tag format to define a style
#layer1 { position: absolute;
left: 50px; top: 75px;
... }
• Define the layer through a DIV or SPAN
element
<SPAN ID="layer1">
...
</SPAN>
<DIV ID="layer2">
...
</DIV>
46. Cascading Style Sheets46 www.corewebprogramming.com
Useful Layer Properties
• left, top
– Specifies the left and top sides of the layer relative to the
parent window
• position
– Describes how the position is defined to the parent
window
– absolute, relative, static
• visibility
– Determines whether a layer is visible or hidden
– visible, hidden, inherit
47. Cascading Style Sheets47 www.corewebprogramming.com
Dynamically Changing a
Layer’s Visibility, Example
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Changing Visibility Dynamically</TITLE>
<STYLE>
<!--
#layer1 { position: absolute; left: 0.25in; top: 1.5in;
color: black; background-color: #F5DEB3;
visibility: hidden }
#layer2 { position: absolute; left: 0.25in; top: 1.5in;
color: #F5DEB3; background-color: black;
visibility: hidden }
H1 { text-align: center;
font-family: Arial }
FORM { text-align: center }
-->
</STYLE>
...
49. Cascading Style Sheets49 www.corewebprogramming.com
Dynamically Changing a
Layer’s Visibility, Example
...
<DIV ID="layer1">
<H1>This is layer1.</H1>
</DIV>
<DIV ID="layer2">
<H1>This is layer2.</H1>
</DIV>
</BODY>
</HTML>
50. Cascading Style Sheets50 www.corewebprogramming.com
Dynamically Changing a
Layer’s Visibility, Result
Selecting a button displays a hidden layer.
51. Cascading Style Sheets51 www.corewebprogramming.com
Appendix, Length Units
Unit Description
cm Centimeters (absolute unit)
em The height of the current font (relative unit)
ex The height of the letter “x” in the current font (relative unit)
in Inches (absolute unit)
mm Millimeters (absolute unit)
pc Picas; 6 picas per inch; 12 points per pica (absolute unit)
pt Points; 72 points per inch (absolute unit)
px Pixels (relative unit)
52. Cascading Style Sheets52 www.corewebprogramming.com
Summary
• Through style sheets you can specify the
general formatting of HTML elements
• Use external style sheets to share styles
across all documents in the Web site
• Class definitions allow you to define
multiple styles for an HTML element
• LAYERs are only supported by Netscape 5;
however, a viable alternative are style sheet
layers