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
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
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
CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
External Style Sheets can save a lot of work
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
All you need to know about CSS:
Selectors
Value Processing
Cascading
Box Model
Visual Formatting Model
Block Formatting Context
Stacking Context
At-Rules
Units
Presentation with examples:
http://rawgit.com/vzhidal/HTML-CSS-Training-Presentations/master/css-basics.html
html & css powerpoint slide show for presentation. Here, basic concept of css using with html. a webpage decorated by css.
HTML- Hyper text markup language.
CSS- Cascading Style sheet.
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.
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
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)
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.
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
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)
This PPT is about my best friends, HTML, CSS and JS. Here I am just talk/show few features of them. all three combined make our web site more powerful in this WWW world.
HTML, CSS And JavaScript Training Institute in Ambala ! Batra Computer Centrejatin batra
Batra Computer Centre is An ISO certified 9001:2008 training Centre in Ambala.
We Provide HTML, CSS And JavaScript Training in Ambala. BATRA COMPUTER CENTRE provides best training in C, C++, S.E.O, Web Designing, Web Development and So many other courses are available.
You've been tasked with developing a new front end feature. HTML, CSS, and JavaScript are nothing new to you, in fact you even know a few tricks to get this feature out the door. It doesn't take you long and the code works like a charm, yet you have a looming suspicion that some of the code might not be up to par. You're likely right, and you're definitely better than that.
We often write code without paying attention to the bigger picture, or overall code base. Upon stepping back we notice areas of duplicate code, ripe for refactoring. It's time to build more modular front ends, focusing on the reusability of HTML, CSS, and JavaScript, and to take maintainability to heart.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Dive into the innovative world of smart garages with our insightful presentation, "Exploring the Future of Smart Garages." This comprehensive guide covers the latest advancements in garage technology, including automated systems, smart security features, energy efficiency solutions, and seamless integration with smart home ecosystems. Learn how these technologies are transforming traditional garages into high-tech, efficient spaces that enhance convenience, safety, and sustainability.
Ideal for homeowners, tech enthusiasts, and industry professionals, this presentation provides valuable insights into the trends, benefits, and future developments in smart garage technology. Stay ahead of the curve with our expert analysis and practical tips on implementing smart garage solutions.
2. PRESENTATION SUMMARY
-> What is CSS ?
-> CSS and HTML
-> The Box Model.
-> Style Sheet Implementation.
-> CSS Rule Structure.
-> HTML and DIV’s.
-> Common CSS properties.
3. WHAT IS CSS ?
Css stands for cascading style sheet.
It is not a language. It is a pat of
design. CSS is a heart of HTML.
Typical CSS file is a text file with an
extension “.CSS” and contain a
series of commands.
4. HTML WITHOUT CSS:-
“Html without CSS is like a piece of candy without
a pretty wrapper.”
Without CSS, HTML elements typically flow from
top to bottom of the page and position
themselves to the left by default .
With CSS help, we can create containers or DIV’s
to better organize content and make a Web page
visually appealing.
5. CSS AND HTML:-
(a)HTML and CSS work together to
produce beautiful and functional Web
sites.
(b) HTML= Structure
(c) CSS= Style
6. THE BOX MODEL:-
CSS works on the box model. A typical
Web page consists of many boxes joined
together from top to bottom . These boxes
can be stacked nested, and float.
7. ATTACHING A STYLE SHEET:-
Attach a style sheet to a page by adding the code to the
<head>
Section of the HTML page. There are 3 ways to attach CSS
to a page:
1.External style sheet:- Best used to control styling
on multiple pages.
<link href=“css/style.css” type=“text/css”
rel=“stylesheet”/>
8. 2.Internal style sheet:-Best used to control
styling in the page.
<style type=“type=“text/css”>
H1 { color : red }
</style>
3.Inline Style Sheet:- CSS is not attached in the
<header> but is used directly within HTML tages.
<p style=“color : red”> Some Text </p>
9. CSS RULE STRUCTURE:-
A CSS RULE is made up of a selector and a declaration. A
declaration consists of property and value.
Selector { property : value ; }
Declaration
10. SELECTOR:-
A selector, here in green, is often an element of
HTML.
body { property : value; }
h1 { property : value; }
em { property : value; }
p { property : value; }
11. PROPERTIES AND VALUES:-
body { background ; purple; }
h1 { color : green; }
h2 { font-size: large ; }
p { color : #FFF ; }
Properties and Values tell an HTML elements how to display.
body
{
background : purple ;
color : green ;
}
12. COMMENT IN CSS:-
. Explain the purpose of the coding.
. Help others read and understand the code.
. Server as a reminder to you for what it all
means.
. Starts with /* and ends with */.
14. TYPICAL WEB PAGE (HTML)
Typical HTML Web page is made up of containers(boxes)
or DIV’s. Each DIV is assigned an ID or a class.
<div id =“ container”>
<div id=“ header”> Insert Tittle </div>
<div id=“ main”> content
<div id=“ menu ”> content </div>
</div>
<div id=“ footer ”> content </div>
</div>
15. TYPICAL WEB PAGE (CSS)
The CSS file users t he same DIV / I D / C LASS
names as the HTML and uses them to style
the elements.
# container { property : value ; }
# menu { property : value ; }
# main { property : value ; }
# footer { property : value ; }
16. IDS AND CLASSES:-
. IDs (#) are unique and can only be used once on
the page.
. Classes ( . ) can be used as many times needed.
HTML codes:-
<h1 id =“ main heading”> Names</h1>
<p class =“name”>xyz</p>
CSS codes:-
#main heading { color : green}
.name { color :red}
19. BACKGROUND IMAGE
The background-image property specifies an image
to use as the background of an element.
By default, the image is repeated so it covers the
entire element.
Example:-
body {
background-image: url("paper.gif");
}
20. CSS BORDER STYLE:-
The border-style property specifies what kind of border to
display.
The following values are allowed:
-dotted - Defines a dotted border
-dashed - Defines a dashed border
-solid - Defines a solid border
-double - Defines a double border
-none - Defines no border
-hidden - Defines a hidden border
21. CSS BORDER COLOR:-
The border-color property is used to set the color of the
four borders.
The color can be set by:
name - specify a color name, like "red"
Hex - specify a hex value, like "#ff0000"
Example
p.one {
border-style: solid;
border-color: red;
}
22. CSS HEIGHT AND WIDTH:-
The height and width properties are used to set the
height and width of an element.
The height and width can be set to auto (this is
default. Means that the browser calculates the
height and width), or be specified in length
values, like px, cm, etc., or in percent (%) of the
containing block.
Example:-
div {
width: 500px;
height: 100px;
border: 3px solid #73AD21;
}
23. CSS MARGIN:-
The CSS margin properties set the size of the white
space OUTSIDE the border.
CSS has properties for specifying the margin for each side
of an element:
-margin-top
-margin-right
-margin-bottom
-margin-left
24. CSS PADDING:-
The CSS padding properties define the white space between the
element content and the element border.
The padding clears an area around the content (inside the
border) of an element.
CSS has properties for specifying the padding for each side of an element:
-padding-top
-padding-right
-padding-bottom
-padding-left
25. CSS FONTS:-
The CSS font properties define the font family, boldness,
size, and the style of a text.
(a) CSS Font Families:-
In CSS, there are two types of font family names:
generic family - a group of font families with a similar look
(like "Serif" or "Monospace")
font family - a specific font family (like "Times New
Roman" or "Arial")
26. (b) Font Family:-
The font family of a text is set with the font-
family property.
Example
p {
font-family: "Times New Roman", Times, serif;
}
27. (c) Font Style:-
The font-style property is mostly used to specify italic text.
This property has three values:
normal - The text is shown normally
italic - The text is shown in italics
Example:-
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
28. (d) Font Size:-
The font-size property sets the size of the text.
Always use the proper HTML tags, like <h1> -
<h6> for headings and <p> for paragraphs.
29. ADVANTAGES OF CSS:-
-Easier to maintain and update.
-Greater consistency in design.
-More formatting options.
-Lightweight code.
-Faster download times.
-Search engine optimization benefits.
-Ease of presenting different styles to different
viewers.
-Greater accessibility.