This document discusses CSS positioning properties. It explains static positioning as the default normal flow layout. It describes float as removing an element from the flow and allowing other content to wrap around it. Relative positioning is defined as positioning an element relative to its static position, while fixed takes an element out of flow and positions it relative to the browser window. Absolute positioning positions an element relative to its first positioned ancestor, removing it from the flow. Examples are given for float, relative, fixed, and absolute. Class exercises provide opportunities to practice these positioning techniques.
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
This slide guides through the differences of the Span and Div tags in HTML.
I started a channel on YouTube for Networking lovers. "VERY SIMPLE NETWORKING" SERIES can be found at http://www.youtube.com/bgccnadom.
THANK YOU FOR YOUR SUPPORT AND LIKES.
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)
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Introduction to web design discussing which languages is used for website des...Aditya Dwivedi
This PPT on web design gives you a brief introduction to web design discussing which languages is used for website designing
This PPT covers the following topics:
• What is website design
• Languages for web design
• Html (Hypertext markup language)
• Html elements
• Tables in HTML
• Html forms
• Tags of HTML
• Introduction to CSS
• CSS (Cascading Stylesheet)
• Types of stylesheet
• CSS selectors
• CSS background property
• CSS images
• CSS links
• CSS position
MAAN Software Inc. is a leading software firm generating its services since a long time in the domain of digital solution. It has successfully managed to aid hundreds of entrepreneurs and small businessmen to launch their endeavors and turn them into successful digital units.
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.
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)
Advanced CSS
by: Alexandra Vlachakis
Sandy Creek High School, Fayette County Schools
Slide Show correlates Georgia Deparment of Edcuation Career and Technology PATHWAY: Interactive Media
COURSE: Advanced Web Design
UNIT 6: BCS-AWD-6 Advanced CSS
Introduction to web design discussing which languages is used for website des...Aditya Dwivedi
This PPT on web design gives you a brief introduction to web design discussing which languages is used for website designing
This PPT covers the following topics:
• What is website design
• Languages for web design
• Html (Hypertext markup language)
• Html elements
• Tables in HTML
• Html forms
• Tags of HTML
• Introduction to CSS
• CSS (Cascading Stylesheet)
• Types of stylesheet
• CSS selectors
• CSS background property
• CSS images
• CSS links
• CSS position
MAAN Software Inc. is a leading software firm generating its services since a long time in the domain of digital solution. It has successfully managed to aid hundreds of entrepreneurs and small businessmen to launch their endeavors and turn them into successful digital units.
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.
An immersive workshop at General Assembly, SF. I typically teach this workshop at General Assembly, San Francisco. To see a list of my upcoming classes, visit https://generalassemb.ly/instructors/seth-familian/4813
I also teach this workshop as a private lunch-and-learn or half-day immersive session for corporate clients. To learn more about pricing and availability, please contact me at http://familian1.com
How to Become a Thought Leader in Your NicheLeslie Samuel
Are bloggers thought leaders? Here are some tips on how you can become one. Provide great value, put awesome content out there on a regular basis, and help others.
Asit Hyderabad is providing best "CSS" course and helped them to take internship program which is helped to get real time exposure and placements in corporate industries. For more details Please visit our website.
A very basic, non-exhaustive introduction to CSS (cascading style sheets). For the very beginner. Introducing some of the underlying concepts of using CSS to style web pages. Also includes a list of learning resources that learners could find useful.
Originally presented at a Wordpress meetup in Fillmore, NY.
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.
Read| The latest issue of The Challenger is here! We are thrilled to announce that our school paper has qualified for the NATIONAL SCHOOLS PRESS CONFERENCE (NSPC) 2024. Thank you for your unwavering support and trust. Dive into the stories that made us stand out!
Operation “Blue Star” is the only event in the history of Independent India where the state went into war with its own people. Even after about 40 years it is not clear if it was culmination of states anger over people of the region, a political game of power or start of dictatorial chapter in the democratic setup.
The people of Punjab felt alienated from main stream due to denial of their just demands during a long democratic struggle since independence. As it happen all over the word, it led to militant struggle with great loss of lives of military, police and civilian personnel. Killing of Indira Gandhi and massacre of innocent Sikhs in Delhi and other India cities was also associated with this movement.
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.
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
How to Create Map Views in the Odoo 17 ERPCeline George
The map views are useful for providing a geographical representation of data. They allow users to visualize and analyze the data in a more intuitive manner.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
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.
2. Review
What is css and how it’s relationship to your html files
Three different approaches to applying your css to the html
How the browser interprets the “cascade” of style rules
How to write CSS rules
Understand basic css properties for text styling
How to add class and id selectors to your html for more styling control
4. There are 2 basic ways to add styles to your html page:
External (linked)
<head>
Internal
5. External
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
Except in special circumstances, best practice is
to keep all your styles in a separate css document.
Linked stylesheets can be applied across multiple
documents and sites.
6. Internal (embedded)
<head>
<style> p {color: red} </style>
</head>
You can add styles directly into your html page
using the “style” element in the <head> of
your document.
Embedded styles apply ONLY to that
html document.
7. Internal (inline)
<p style=”color: red”>Red Text</tag>
You can add styles directly into your html
markup using the “style” attribute on opening
tag of your element. This is called an “inline”
style.
Inline styles apply ONLY to that specific
instance of the element.
8. Best Practice
In most cases you should use the external method of adding
styles to your html page.
Writing the css in the <head> of your document is acceptable
if you definitely only want to apply the styles to a single page.
However, adding your styles “inline” — inside a html starting
tag, e.g. <p style=”font-size: 14px”> — should be avoided.
12. Type (element) Selectors
body {declaration}
p {declaration}
h1 {declaration}
ul {declaration}
The simplest selector is the type selector, which
targets an html element by name.
13. The essential selector types (elements)
Primary
Structure
Body
Elements
Formatting
Elements
html
p
em
body
br
i
h1 – h6
strong
ul
b
ol
q
a
blockquote
img
span
div
14. div elements
Div elements allow you to group a set of
elements together in one block-level element.
!
<div id=”head”>
<a bunch of elements></>
</div>
15. span elements
span elements are the inline equivalent of divs.
!
<p>Here is some text <span class=”red-text”>
with a span</span> added.</p>
Spans are the equivalent of ‘character’ styles
in InDesign.
16. type selectors vs IDs & Classes
Type selectors use the tag names that are
built into HTML.
IDs and classes use names that you define, and
are added to html elements to make them
more specific.
17. ID Selectors
#logo {declaration}"
CSS
<img id=”logo” src=”” alt=””>
HTML
An ID is an html attribute that is added to your
html markup. You reference that ID in your css
with a hash.
19. IDs vs Classes
The most important difference between IDs
and classes is that there can be only one ID
on a page, but multiple classes.
An ID is more specific than a class.
An element can have both an ID and
multiple classes.
20. IDs vs Classes
ID: #344-34-4344
Class: Male
Class: Student
ID: #123-54-9877
Class: Female
Class: Student
21. Descendant Selectors
CSS
#sidebar .author {declaration}"
HTML
<div id=”sidebar”>
<p class=”author”></p>
</div>
A space between two selectors indicates a
descendant selector. In the example above, the
style is targeted to an element with the class
“author” inside the id “sidebar”.
22. Multiple classes
CSS
.ingredients.time {declaration}"
HTML
<div class=”ingredients time”>
<h1></h1>
</div>
Elements can have multiple classes, giving you
more control. The are written in the CSS in the
exact order they appear in the html, with no
spaces.
23. Combining IDs and classes
CSS
#wrapper.ingredients.time {declaration}"
HTML
<div id=”wrapper” class=”ingredients time”>
<h1></h1>
</div>
Elements can have both ids and classes. While
an element can have only one id, it can have
multiple classes.
26. There are five basic properties for defining your “boxes”:
display
width and height
padding
margins
border
27. CSS Box Model
All HTML elements can be
considered as boxes or
blocks. In CSS, the term
"box model" is used when
talking about design and
layout.
The CSS box model is
essentially a box that wraps
around HTML elements,
and it consists of: margins,
borders, padding, and the
actual content.
!
Inspect Element 3d view in Firefox
28. Total dimensions
The actual width or height of
any object is the total of the
content width, padding,
borders, and margins.
.size-me {
width: 200px;
padding: 10px;
border: 2px;
margin: 20px;
}"
The actual width: 254px
content: 200px
padding-left: 10px
padding-right: 10px
border-right: 2px
border-left: 2px
margin-right: 20px
margin-left: 20px
29. Display property
By default, certain elements in your html have a display
property of inline or block.
Block elements takes up the full width available, and forces a
line above and below. Examples include <p>, <div>, <ul>,
<blockquote> and all headers.
<div></div>
<p></p>
<ul></ul>
30. Display property
Inline elements can be inserted within block elements or
other inline elements and do no create additional space or
line breaks. Examples include <img>, <em>, <strong>,
<a>, and <span>.
<p>
<p></p>
<p></p>
<a></a>
</p>
31. Display property
There are four values that you can give to the display property:
display: block;
display: inline;
display: inline-block;
display: none
!
Inline-block is a special value that allows an element to stay inline
with its containing element, but allows you to control it’s
dimensions as if it were a block element.
display: none removes the element.
32. Display property
For example, by default, a <li> element is set to display: block. If
we change that value in our css to:
li {display: inline-block;}
Then this:
Changes to this:
<ul>
<ul>
<li>
</li>
<li>
</li>
<ul>
<li>
<ul>
</li>
<li>
</li>
35. Defining dimension: width and height
You can set the width and height of any element that has a
display property of block or inline-block.
As with type, you can set dimension in pixels (px), ems, or
percentage (%). Setting any width with pixels is referred to as
fixed-width, and setting width in ems or percentages is
referred to as flexible-width.
.size-me {
width: 200px;
height: 200px;
}
!
!
36. Defining dimension: min- and maxInstead of absolutely defining the width and height of your
elements, you can set minimum and maximum widths and
heights.
This allows you to resize elements based on the browser or
their parent elements. The idea of creating flexible content
that adjusts to the user’s browser/device is at the core of
what is referred to as responsive design.
.size-me {
min-width: 200px;
max-width: 100px;
}"
39. Defining padding & margins
You can set the padding and margin properties of any
element in css.
Margin and padding dimensions can be also pixels (px),
ems, or percentage (%).
.space-me {
padding: 10px;
margin-bottom: 20px;
}
!
!
!
40. Defining padding & margins
While you can add padding and margins to inline
elements, not all of your properties will apply (vertical
spacing, see below).
!
!
!
41. Collapsing margins
When two or more
margins collapse, the
resulting margin width
is the maximum of the
collapsing margins'
widths.
In the example below,
box1 has a taller
margin than box2, so
only that margin will
be used (not added
together).
!
!
42. CSS Shorthand
When setting sizes for padding,
margins and borders, instead of this:
.box {
padding-top: 10px;
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}
1
4
2
Use this:
.box {
padding: 10px 15px 10px 15px;
}"
The values start at the top and go
around the element clockwise.
!
3
43. CSS Shorthand
If your top/bottom and left/right
values are the same, you can shorten
the declaration even more:
.box {
padding: 10px 15px;
}"
Where the first value is for the top and
bottom, and the second is for left and
right.
!
!
1
2
2
1
44. Defining borders
You can create a border around any element with css;
you can create the same border on each side, or
customize the color, width and border style of each side.
!
There are 3 properties to define with each border:
border-width: 1px;
border-style: solid; (dotted, dashed, etc)
border color: #666666;
!
!
!
45. CSS Shorthand
Borders can also be shortened, from this:
.box {
border-width: 1px;
border-style: solid;
border-color: #888888
}"
to this:
.box {
border: 1px solid #888888;
}"
Note that there is only a single space between each value, and
they should follow the order shown above.
!
49. There are four basic declarations
you can use to position your boxes:
float: left (or right)
position: relative
position: fixed
position: absolute
50. position: static
Static positioning is the default – this is referred to as the
“normal flow”.
block boxes are positioned on a page one after the
other (in the order they're written in the HTML). They
start in the upper left of the containing box and stack
from top to bottom. The distance between each box is
defined by the margins with top and bottom margins
collapsing into one another.
!
!
<div id=”header”></div>
! <div id=”content”></div>
<ul id=”sidebar-nav”></ul>
51.
52.
53. float
A floated element takes the element out of the normal
flow and moves it to the far right or left of the containing
element. Existing content will then flow around it.
Floated elements should always have at least a width
property.
.photo {
float: left;
max-width: 150px;
}"
!
!
56. Positioning Properties
There are four values that you can give to the position property:
!
static Elements renders in order, as they appear in the
document flow. This is default.
relative The element is positioned relative to its static position,
so “left:20” adds 20 pixels to the element’s LEFT position.
absolute The element is positioned relative to its first positioned
(not static) ancestor element (usually, the first parent with
position:relative).
fixed The element is positioned relative to the browser window.
59. relative
A relative positioned element moves the element out of
it’s position in the normal flow, and allows you to move it
“relative” to that location. The space taken by the
original location is retained in the flow.
.date {
position: relative;
top: 40px;
left: -105px;
}"
!
!
61. fixed
A fixed element is taken complete out of the document
flow, and is positioned relative to the browser window.
.create-change {
position: fixed;
bottom: 40px;
right: 0;
}"
!
!
63. absolute
The element is positioned relative to its first positioned
(not static) ancestor element. The element and its
spacing are completely taken out of the flow. In the
example below, the “.post” parent element is given a
position value of relative, which lets us set it’s child
element “.icon” within it.
.post {
position: relative;
}"
.icon {
position: absolute;
left: -60px;
right: 0;
}"
!
!