This document provides an overview of Cascading Style Sheets (CSS) including what CSS is, how to write CSS code, and the different ways to include CSS in an HTML document. CSS allows separation of document content from page layout and visual design. CSS code uses selectors, properties, and values to style HTML elements. Styles can be included inline, internally in the <head> using <style> tags, or externally in a .css file linked via the <link> tag. Inheritance rules determine which styles take precedence.
this presentation covers the following topics which are as follows
1. Introduction of css
2. History of css
3. Types of css styling
4. Css syntax
5. Css Selector
6. Css Variations Or Css Versions
This document provides an introduction to CSS (Cascading Style Sheets) including what CSS is, where it can be used, CSS syntax, and key concepts like inheritance and the cascade. CSS is used to style and lay out HTML elements on a page. It allows customizing elements with properties like color, font, size and more. CSS can be included inline with HTML, embedded in the HTML <head> with <style> tags, or linked externally in a .css file. The cascade determines which styles take precedence when multiple selectors apply to the same element. Inheritance applies styles to descendant elements.
HTML & CSS are languages used to structure and style web pages. HTML provides the content structure using elements, tags, and attributes. CSS controls the style and layout using selectors, properties, and values. Some common HTML terms include elements, tags, and attributes. A basic HTML document structure includes DOCTYPE, html, head, title, and body tags. CSS can be used to style HTML elements by selecting them with tags, classes, IDs and applying properties like color, font-size, background, and more.
This is the CSS Tutorial for Beginners that teach the basics of CSS. This tutorial will show the basic structure of a CSS style and will show 3 different methods to apply styles.
CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of structured documents written in HTML. CSS controls the layout of multiple documents from a single style sheet and allows for more precise control over layouts and different styles for different media like screens and print. CSS syntax uses selectors to apply styles denoted by properties and values to HTML elements. Styles can be applied inline, internally in the <style> tag, or externally in a separate .css file linked via the <link> tag.
The document discusses the three main technologies used to build user interfaces: HTML for structure, CSS for presentation, and JavaScript for behavior. It emphasizes that each technology should only be used for its intended purpose to improve accessibility, portability, maintainability, and performance. HTML provides structure using tags, CSS handles styling and layout with rules, and JavaScript adds interactive behaviors. The document then goes into more detail about each technology and their various components.
The document provides an introduction to basic HTML tags and concepts. It begins with an overview of HTML as a markup language and covers common tags such as headings, paragraphs, links, and images. It then discusses HTML page structure using tags like <html>, <head>, <body>, and the <DOCTYPE> declaration. The document also covers other important topics such as attributes, headings, comments, text formatting, links, tables, lists, forms, and basic page layouts using <div> tags. Throughout, it provides examples to illustrate each concept and refers the reader to external resources for more details.
This document provides an introduction to Cascading Style Sheets (CSS) including what CSS is, its syntax and structure, and the different types of CSS including external, internal, and inline styles. CSS was created in 1996 to separate document structure (HTML) from presentation (styles). CSS uses selectors to apply declarations blocks containing property-value pairs that define elements' styles. External styles are ideal for consistency across pages while internal and inline styles are for one-off or unique styling. The cascade order determines which styles take precedence. Advantages of CSS include separation of concerns, easier maintenance, faster pages, and compatibility across devices.
This document provides an overview of Cascading Style Sheets (CSS) including:
- CSS handles the look and feel of web pages by controlling colors, fonts, spacing, layouts, backgrounds and more.
- CSS versions include CSS1 for basic formatting, CSS2 for media styles and positioning, and CSS3 for new features like colors and transforms.
- There are three ways to apply stylesheets: inline with HTML tags, internally within <style> tags, and externally with <link> tags.
- The Style Builder in Microsoft allows applying styles through a dialog box with options for fonts, backgrounds, text, positioning, and other properties. Basic CSS syntax uses selectors and properties to
about this presentation:
1) this presentation was a quickie for non-tech employees, who wanted a basic understanding of html/css, as it related to a white-label SAAS product;
2) the back-end/front-end definitions relate to the specific application (it's inaccurate if node.js is in the picture)
HTML Basics document provides an overview of HTML elements and tags used to format text and structure web pages. It discusses the basic structure of an HTML document including the <head>, <title>, and <body> sections. Common text formatting tags like <p>, <h1>-<h6>, <strong>, <em>, and <br> are demonstrated. Other elements covered include images, lists, links, and basic styling with inline CSS. The document serves as an introduction to basic HTML syntax and structure.
Arrays in JavaScript can be used to store multiple values in a single variable. Arrays are objects with numeric indexes and various methods that can be used to modify arrays. Some key array methods include concat(), join(), push(), pop(), unshift(), shift(), sort(), reverse(), slice(), splice(), indexOf(), lastIndexOf(), and length. Arrays are dynamically typed and sparse, allowing elements to contain values of any type.
This document summarizes a knowledge sharing session on HTML and CSS basics. It covers topics like HTML tags and structures, CSS rules and selectors, the CSS box model, positioning, sprites, and hacks for dealing with browser inconsistencies. The session introduced fundamental concepts for using HTML to structure content and CSS for styling and layout, providing examples for common tags, selectors, properties and techniques. It aimed to give attendees an overview of the core building blocks of HTML and CSS.
CSS is used to style and lay out web pages. There are three types of CSS: external, internal, and inline stylesheets. External stylesheets define styles in CSS files and can be used across many web pages, internal stylesheets are defined within the <style> tags in an HTML page, and inline styles are defined within HTML elements using the style attribute. CSS selectors allow targeting specific elements using IDs, classes, types, and other attributes to style them. Common CSS properties include colors, backgrounds, borders, padding, margins, and styling of links and lists.
CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. CSS saves lots of work as formatting elements only need to be applied to one CSS file rather than individually formatting every HTML page. CSS rules consist of selectors that point to the HTML element to style paired with a declaration block containing CSS properties and values to determine how that element will look. Common CSS properties include those to control text formatting, background effects, borders, lists, links and positioning.
This document provides an introduction and overview of CSS (Cascading Style Sheets). It discusses what CSS is, its advantages, basic structure and syntax, applying styles using internal, external and inline styles, style precedence, and how to use IDs, classes, divs, spans and other selectors to control layout and formatting of text, links, backgrounds, fonts, lists and tables. The document covers many fundamental CSS concepts in a tutorial-like format.
Cascading Style Sheets (CSS) is a mechanism for adding style to HTML documents. CSS allows complete control over layout, design and formatting of web pages. CSS properties can be applied inline, internally via <style> tags, or externally via linked style sheets. CSS uses selectors to apply styles to HTML elements based on their id, class, type and other attributes. Declarations are made up of properties and values to specify styles.
This document provides an overview of HTML topics that will be covered in lectures 4, 5, and 6 of a web programming course. It discusses HTML, HTML forms, common HTML tags and their purposes, text formatting tags, images, links, tables, lists, and forms. It also covers iframes, framesets, block and inline elements, the <div> and <span> tags, layouts, and buttons. The document serves as an outline of key HTML concepts and elements that will be explored in more depth during the lectures.
The document provides an overview of HTML and CSS, covering topics such as the structure of an HTML document, HTML tags, CSS, and how to create a basic webpage. It discusses what HTML and CSS are, why they are needed, popular HTML tags, and gives examples of adding CSS to an HTML document. It also provides a hands-on tutorial showing how to build a simple website covering HTML basics and using CSS for styling.
This document discusses Cascading Style Sheets (CSS) basics including:
- Separating content from presentation using CSS and HTML documents.
- Configuring styles using inline, embedded, and external style sheets.
- Selecting elements using tag names, classes, IDs, and other selectors.
- Setting properties like colors, fonts, spacing in CSS rules.
- Linking HTML and CSS documents in various ways including using <link> and @import directives.
The basic of css for all.
Separates structure from presentation
Provides advanced control of presentation
Easy maintenance of multiple pages
Faster Page loading
Better accessibility for disabled users
Easy to learn
The document provides an introduction to CSS (Cascading Style Sheets) and describes various CSS concepts including: internal and external style sheets, text formatting properties like color, alignment, and decoration, font properties, CSS selectors like element, class, and ID selectors, working with tables, lists, the CSS box model, and backgrounds. Key points covered include the different ways to insert CSS stylesheets, how selectors are used to target elements, and properties for formatting text, backgrounds, tables, and boxes.
Cascading Style Sheets (CSS) allow separation of document content from document presentation, including elements like fonts, colors, and layout. CSS rules include selectors that point to specific HTML elements and declarations that define properties like color and font for those elements. Common CSS properties include font properties, color properties, box properties like width, padding, and margin, and background properties. CSS provides benefits like easier maintenance of web page styling across multiple pages.
Cascading Style Sheets (CSS) allow separation of document content from document presentation and formatting. CSS defines how elements should be rendered on screen, paper, or other media. This document discusses CSS syntax, the different ways to insert CSS (external, internal, inline stylesheets), CSS selectors including type, class, ID and descendant selectors, and the cascading order of multiple style sheets. It also covers CSS features such as comments, declarations and properties, and media types for external stylesheets.
This document discusses Cascading Style Sheets (CSS) and its core concepts. It covers the different ways to insert CSS styles (external, internal, inline stylesheets), CSS selectors (type, class, ID selectors), the cascade and inheritance of styles, and some common text properties like color, decoration, and formatting. CSS is used to separate document structure and presentation to make websites easier to maintain and style consistently.
The document provides information about CSS (Cascading Style Sheets) including what CSS is, how it solves problems with HTML formatting, CSS syntax, and examples of using CSS for text formatting and backgrounds. CSS allows separation of document structure (HTML) from presentation (CSS). CSS defines how elements are displayed, and styles can be applied internally, externally, or inline. CSS follows cascading rules to determine which styles take precedence.
CSS is used to style and lay out web pages. It allows control over text formatting, element sizing and positioning, and other design elements. There are different types of CSS including inline, embedded, and external stylesheets. CSS selectors are used to target specific HTML elements for styling. Common CSS properties control elements like text styling, links, borders, positioning, and more.
The Cascading Style Sheets Specification ( CSS ) is a computer language that is used to write formatting instructions ( rules ). These rules tell a web browser how webpage content should 'look'— in terms of: layout. position, alignment, width, height, etc.
The document provides information about CSS (Cascading Style Sheets), including what CSS is, why it's used, how it solved problems with HTML, and some key CSS concepts. CSS is used to define styles and layout for web pages. It allows separation of document content from document presentation and saves work by controlling multiple page styles in one file. CSS removes formatting tags from HTML and solves issues that arose when tags like <font> were added to HTML for formatting.
Cascading Style Sheets (CSS) allow formatting of web documents. CSS provides attributes to create dynamic effects on web pages. Style sheets allow predefining formatting properties in a single list to apply globally or selectively. There are three main ways to insert a CSS stylesheet - external, internal, and inline. External stylesheets define styles in a .css file and can change an entire website with one file change. Internal stylesheets define styles within the <style> element in the HTML <head>. Inline styles directly format individual elements using the style attribute.
The document provides an introduction to CSS (Cascading Style Sheets), explaining what CSS is, how it works, and some basic syntax and concepts. CSS allows separation of document content from document presentation by defining styles that are applied to HTML elements. Styles can be defined internally, in an external CSS file, or inline. The CSS box model is also explained, with the content, padding, border, and margin areas of elements illustrated. Common CSS properties for text formatting are also listed.
The document discusses different types of client-side scripts including Cascading Style Sheets (CSS), JavaScript, and Dynamic HTML (DHTML). It explains how CSS can be used to style web pages through internal, external, and inline styling. Common CSS properties for styling backgrounds, text, and other elements are also described.
This Slide provided an introduction to CSS or Cascading Style Sheets. What is CSS? How to write styles. What are External, internal and inline CSS styles? and lot more
This document provides an introduction to cascading style sheets (CSS) and covers several key concepts:
CSS is used to style and lay out web pages and defines how HTML elements are displayed. Styles are normally saved in external CSS files so the appearance of an entire website can be changed by editing one file. A CSS rule has a selector that specifies which element the rule applies to and declarations that define properties for that element. Comments can be added to CSS code to explain it. Different selectors like ID, class, and inline styles allow targeting specific elements. The order of style precedence determines which styles get applied when multiple styles conflict. Background properties are used to define and customize element backgrounds.
The document covers various topics related to CSS including CSS introduction, syntax, selectors, inclusion methods, setting backgrounds, fonts, manipulating text, and working with images. Key points include how CSS handles web page styling, the advantages of CSS, CSS versions, associating styles using embedded, inline, external and imported CSS, and properties for backgrounds, fonts, text formatting, and images.
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, paper, or in other media. CSS saves a lot of work by enabling web developers to change the appearance and layout of multiple pages at once by editing just one CSS file. CSS solves the problem of formatting documents that originally arose with HTML by separating document content from document presentation.
CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. CSS can be defined internally, inline, or externally in CSS files. CSS rules have selectors and declarations, where properties and values are used to style elements. Common CSS properties control color, text formatting, background images and colors. Styles can be applied to HTML elements, classes, or IDs. When multiple conflicting styles are defined, styles are cascaded according to precedence rules with inline styles having the highest priority.
CSS handles the visual presentation of web pages. There are three ways to add CSS: inline, internally via the <style> tag, and externally via a <link> tag. CSS rules contain selectors that specify elements to style and declarations that define properties like color, font, padding, borders, and margin. CSS allows global styling changes and optimized formatting for different devices. It improves page load times and makes websites easier to maintain compared to only using HTML.
Literature Reivew of Student Center DesignPriyankaKarn3
It was back in 2020, during the COVID-19 lockdown Period when we were introduced to an Online learning system and had to carry out our Design studio work. The students of the Institute of Engineering, Purwanchal Campus, Dharan did the literature study and research. The team was of Prakash Roka Magar, Priyanka Karn (me), Riwaz Upreti, Sandip Seth, and Ujjwal Dev from the Department of Architecture. It was just a scratch draft made out of the initial phase of study just after the topic was introduced. It was one of the best teams I had worked with, shared lots of memories, and learned a lot.
Development of Chatbot Using AI/ML Technologiesmaisnampibarel
The rapid advancements in artificial intelligence and natural language processing have significantly transformed human-computer interactions. This thesis presents the design, development, and evaluation of an intelligent chatbot capable of engaging in natural and meaningful conversations with users. The chatbot leverages state-of-the-art deep learning techniques, including transformer-based architectures, to understand and generate human-like responses.
Key contributions of this research include the implementation of a context- aware conversational model that can maintain coherent dialogue over extended interactions. The chatbot's performance is evaluated through both automated metrics and user studies, demonstrating its effectiveness in various applications such as customer service, mental health support, and educational assistance. Additionally, ethical considerations and potential biases in chatbot responses are examined to ensure the responsible deployment of this technology.
The findings of this thesis highlight the potential of intelligent chatbots to enhance user experience and provide valuable insights for future developments in conversational AI.
An Internet Protocol address (IP address) is a logical numeric address that is assigned to every single computer, printer, switch, router, tablets, smartphones or any other device that is part of a TCP/IP-based network.
Types of IP address-
Dynamic means "constantly changing “ .dynamic IP addresses aren't more powerful, but they can change.
Static means staying the same. Static. Stand. Stable. Yes, static IP addresses don't change.
Most IP addresses assigned today by Internet Service Providers are dynamic IP addresses. It's more cost effective for the ISP and you.
OCS Training Institute is pleased to co-operate with
a Global provider of Rig Inspection/Audits,
Commission-ing, Compliance & Acceptance as well as
& Engineering for Offshore Drilling Rigs, to deliver
Drilling Rig Inspec-tion Workshops (RIW) which
teaches the inspection & maintenance procedures
required to ensure equipment integrity. Candidates
learn to implement the relevant standards &
understand industry requirements so that they can
verify the condition of a rig’s equipment & improve
safety, thus reducing the number of accidents and
protecting the asset.
How to Manage Internal Notes in Odoo 17 POSCeline George
In this slide, we'll explore how to leverage internal notes within Odoo 17 POS to enhance communication and streamline operations. Internal notes provide a platform for staff to exchange crucial information regarding orders, customers, or specific tasks, all while remaining invisible to the customer. This fosters improved collaboration and ensures everyone on the team is on the same page.
A brief introduction to quadcopter (drone) working. It provides an overview of flight stability, dynamics, general control system block diagram, and the electronic hardware.
20CDE09- INFORMATION DESIGN
UNIT I INCEPTION OF INFORMATION DESIGN
Introduction and Definition
History of Information Design
Need of Information Design
Types of Information Design
Identifying audience
Defining the audience and their needs
Inclusivity and Visual impairment
Case study.
Social media management system project report.pdfKamal Acharya
The project "Social Media Platform in Object-Oriented Modeling" aims to design
and model a robust and scalable social media platform using object-oriented
modeling principles. In the age of digital communication, social media platforms
have become indispensable for connecting people, sharing content, and fostering
online communities. However, their complex nature requires meticulous planning
and organization.This project addresses the challenge of creating a feature-rich and
user-friendly social media platform by applying key object-oriented modeling
concepts. It entails the identification and definition of essential objects such as
"User," "Post," "Comment," and "Notification," each encapsulating specific
attributes and behaviors. Relationships between these objects, such as friendships,
content interactions, and notifications, are meticulously established.The project
emphasizes encapsulation to maintain data integrity, inheritance for shared behaviors
among objects, and polymorphism for flexible content handling. Use case diagrams
depict user interactions, while sequence diagrams showcase the flow of interactions
during critical scenarios. Class diagrams provide an overarching view of the system's
architecture, including classes, attributes, and methods .By undertaking this project,
we aim to create a modular, maintainable, and user-centric social media platform that
adheres to best practices in object-oriented modeling. Such a platform will offer users
a seamless and secure online social experience while facilitating future enhancements
and adaptability to changing user needs.
Encontro anual da comunidade Splunk, onde discutimos todas as novidades apresentadas na conferência anual da Spunk, a .conf24 realizada em junho deste ano em Las Vegas.
Neste vídeo, trago os pontos chave do encontro, como:
- AI Assistant para uso junto com a SPL
- SPL2 para uso em Data Pipelines
- Ingest Processor
- Enterprise Security 8.0 (Maior atualização deste seu release)
- Federated Analytics
- Integração com Cisco XDR e Cisto Talos
- E muito mais.
Deixo ainda, alguns links com relatórios e conteúdo interessantes que podem ajudar no esclarecimento dos produtos e funções.
https://www.splunk.com/en_us/campaigns/the-hidden-costs-of-downtime.html
https://www.splunk.com/en_us/pdfs/gated/ebooks/building-a-leading-observability-practice.pdf
https://www.splunk.com/en_us/pdfs/gated/ebooks/building-a-modern-security-program.pdf
Nosso grupo oficial da Splunk:
https://usergroups.splunk.com/sao-paulo-splunk-user-group/
2. 2
What is CSS?
• A simple mechanism for controlling the style
of a Web document without compromising its
structure.
• It allows you to separate visual design
elements (layout, fonts, colors, margins, and
so on) from the contents of a Web page.
• Allows for faster downloads, streamlined site
maintenance, and global control of design
attributes across multiple pages.
3. 3
CSS vs. just HTML
• What can we do with CSS that we can’t do
with HTML?
– Control of backgrounds.
– Set font size to the exact height you want.
– Highlight words, entire paragraphs, headings
or even individual letters with background
colors.
– Overlap words and make logo-type headers
without making images.
– Precise positioning.
– Linked style sheets to control the look of a
whole website from one single location.
– And more.
4. 4
How to write CSS?
• Selector
– HTML element tags
(examples: p, h2, body, img, table)
– class and ID names
• Property (examples: color, font-size)
• Value (examples: red, 14pt)
5. 5
How to write CSS:
• The basic syntax of a CSS rule:
selector {property 1: value 1; property 2:
value 2}
Example:
p {font-size: 8pt; color: red}
Notice the { } around the rule and the : before
each value!
6. 6
Three ways to include CSS:
1. Local (Inline)
2. Global (Embedded, or Internal)
3. Linked (External)
7. 7
1. Local
• Inline style sheet.
• Placed inside tags.
• Specific to a single instance of an html
tag on a page.
• Must be used instead of <font> tags to
specify font size, color, and typeface
and to define margins, etc.
• Use to override an external or
embedded style specification.
8. 8
Local (inline)
• Example
<p style="font-size: 10pt; color: red; font-weight:
bold; font-family: Arial, Helvetica, sans-serif">
This is a local stylesheet declaration. </p>
On the browser:
9. 9
2. Global
• Embedded or internal style sheet
• Applicable to an entire document
• Styles are defined within the <style>
</style> tag, which is placed in the
header of the html file (i.e., within
<head> and </head>).
11. 11
3. Linked
• External style sheet
• Styles are saved in a separate file, with
the extension .css
• This single stylesheet can be used to
define the look of multiple pages.
12. 12
Linked (External)
• Example
p {font-family: verdana, sans-
serif; font-size: 12pt; color: red}
h1 {font-family: serif; font-size:
14pt; color: green}
h2 {font-family: serif; font-size:
11pt; color: blue}
Save this text
file as
whatever.css
In TextPad,Notepad, etc.…
13. 13
Linked (External)
• Example (continued)
To apply the stylesheet “whatever.css“
to an HTML document, call it in from the
header:
<head>
<link rel="stylesheet"
href=“whatever.css" type="text/css">
</head>
14. 14
Inheritance: which style prevails
when several are present?
• Inline (local) overrides internal (global)
• Internal (global) overrides external (linked).
15. 15
Cascading
The way styles will be used when there is more than one
style specified for an HTML element:
1. Browser default
2. External Style Sheet (Linked) (in an external .css file)
3. Internal Style Sheet (Global, or embedded) (inside the <head>
tag)
4. Inline Style (Local) (inside HTML element)
• An inline style (inside an HTML element) has the highest
priority, which means that it will override every style declared
inside the <head> tag, in an external style sheet, and in the
browser (default value).
16. 16
Let’s try this now!
<h1 style=“text-align: center; font-
weight:bold; color: blue”> Styling with CSS!
</h1>
<p style="font-size: 10pt; color: red; font-
weight: bold; font-family: Arial, Helvetica,
sans-serif“ >
Write whatever you want here </p>
17. 17
Grouping properties
• Separate properties with a semi-colon
– Example:
p {text-align:center;color:red; font-
family:Arial; font-style:italic}
18. 18
Grouping selectors
• Separate selectors with a comma
– Example:
h1,h2,h3,h4,h5,h6 { color: green }
(each header will be green)
• Separate selectors with a space
– Example:
p li { color: red }
(only items within a list and a
paragraph tag will be red)
19. 19
The class Selector
• With a class selector you can define different
styles for the same type of HTML element
• Examples:
First define the class:
p.right {text-align: right; color: red; font-style: italic}
p.blue {text-align: center; color:blue}
Then use the class in your HTML code :
<p class="right"> This paragraph will be right-
aligned, italic, and red. </p>
<p class=“blue"> This paragraph will be center-
aligned and blue. </p>
20. 20
The class Selector
• You can also omit the tag name in the
selector to define a style that will be used by
all HTML elements that have this class.
• Example:
.poem {text-align: center; font-style:italic}
Any HTML element with class=“poem" will be
center-aligned and italic.
21. 21
The class Selector
• Example (continued)
Both elements below will follow the
rules in the ".poem“ class:
<h1 class=“poem"> This heading will be
center-aligned and italic </h1>
<p class=“poem"> This paragraph will also
be center-aligned and italic. </p>
22. 22
Class Example
<style>
p {font-family: sans-serif; font-size: 10pt}
h1 {font-family: serif; font-size: 30pt}
h2 {font-family: serif; font-size: 24pt}
.boldred {color: red; font-weight: bold}
.green {color: green}
.tinyblue {color: blue; font-size: 8pt}
</style>
The tags and classes can then be used in combination:
<h1 class=“boldred">This is rendered as 30-point red serif bold
text.</h1>
<p class=“boldred">This is rendered as 10-point red sans-serif bold
text.</p>
23. 23
Applying styles to portions of
a document:
• <div>
– A division tag: to “package” a block of
document into one unit. It defines a block
element.
– Causes a line break, like <br> and <p>.
• <span>
– “Wraps” a portion of text into a unit, but
doesn't cause a line break. Allows styles to
be applied to an 'elemental' region (such
as a portion of a paragraph).
24. 24
Example
<p><span class="foo">This text is rendered
as foo-style</span> and this is not. </p>
<div class="foo">
<p>The "foo" style will be applied to this text,
and to <a href="page.html">this text</a> as
well.
</div>
25. 25
List of style Selectors and
their Properties and Values:
• From WDG:
http://www.htmlhelp.com/reference/css/properties.html
28. 28
Properties - Position
• position
– absolute, relative
• top
– <length>, <percentage>, auto
• left
– <length>, <percentage>, auto
• Z-index
– <number>, auto
30. 30
Positioning
• Upper left corner corresponds to (0,0)
• The value of top, bottom, right, left
can be expressed in:
– Length (measured in px, em, etc…)
– Percentage of the parent’s width
(0,0)
Y
X
31. 31
The z-index
• stacking order is called the z-index.
• If elements overlap each other, the one
with the higher z-index appears on top.
• Example:
.topElement {position: absolute; z-index=2;
top:0px; left:0px; font-size:36pt; color:red}
32. 32
CSS Examples:
• <h1 style="color: white; position:
absolute; bottom: 50px; left: 50px; z-
index: 2"> Text in front.</h1>
– Positioning: Example
– Stacking: Example
– Shadowing: Example
(0,0)
Y
X
34. 34
In a box:
• Margins are always transparent.
• Borders come in various styles.
• Background settings:
– the area just inside the borders
– includes both the padding and content
areas.
42. 42
Cursor
• The cursor property specifies the type
of cursor to be displayed when pointing
on an element.
– Crosshair, hand, move, text, wait, etc.
• Complete demo (cursor styles):
http://www.w3schools.com/css/tryit.asp?filenam
44. 44
Linked CSS example:
• You can download these and try on your
own!
• One html file: css_files/htmlcss7.htm
• The external stylesheet:
– css_files/stylecss.css
• The html file can call any stylesheet one
at a time for a different design each time.
48. 48
More CSS links
• To create a navigation list design:
http://www.accessify.com/tools-and-
wizards/list-o-matic/list-o-matic.asp
• To create boxes for layout:
http://www.thenoodleincident.com/tutori
als/box_lesson/boxes.html