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.
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
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
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 PPT is an introduction to PPT about HTML and CSS.
With the help of this powerpoint, people will get know about HTML and CSS. The functionality of the same
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.
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.
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 PPT is an introduction to PPT about HTML and CSS.
With the help of this powerpoint, people will get know about HTML and CSS. The functionality of the same
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.
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.
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.
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
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 ppt will explain you the Defintion ,detailed explanation of phases with necessory diagrams, Applications ,Limitations and scope of Operations Research
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
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
This is a presentation by Dada Robert in a Your Skill Boost masterclass organised by the Excellence Foundation for South Sudan (EFSS) on Saturday, the 25th and Sunday, the 26th of May 2024.
He discussed the concept of quality improvement, emphasizing its applicability to various aspects of life, including personal, project, and program improvements. He defined quality as doing the right thing at the right time in the right way to achieve the best possible results and discussed the concept of the "gap" between what we know and what we do, and how this gap represents the areas we need to improve. He explained the scientific approach to quality improvement, which involves systematic performance analysis, testing and learning, and implementing change ideas. He also highlighted the importance of client focus and a team approach to quality improvement.
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.
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.
2. Contents
• Introduction
• Internal style sheet
• External style sheet
• Controlling Text
• Text Formatting
• Selectors
• Box Model
• Backgrounds
• Tables
• Lists
3. Introduction to CSS
• What is meant by CSS?
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, on
paper, or in other media.
CSS saves a lot of work. It can control the layout of multiple Web pages
all at once
4. What is a cascading style sheet?
Cascading Style Sheets (CSS) is a simple
mechanism for adding style (e.g., fonts, colors,
spacing) to Web documents.
7. The class Selector
• The class selector selects elements with a specific class
attribute.
• To select elements with a specific class, write a period (.)
character, followed by the name of the class.
10. THREE WAYS TO INSERT CSS
There are three ways of inserting a style sheet:
• External style sheet
• Internal style sheet
• Inline style
11.
12. Internal Style sheet
First we will explore the internal method. This way you are simply placing the
CSS code within the <head></head> tags of each (X)HTML file you want to style with
the CSS. The format for this is shown in the example below:
<head>
<title><title>
<style type=”text/css”>
CSS Content Goes Here
</style>
</head>
<body>
With this method each (X)HTML file
contains the CSS code needed to style
the page. Meaning that any changes you
want to make to one page, will have to
be made to all. This method can be
good if you need to style only one page,
or if you want different pages to have
varying styles.
13. External Style sheet
Next we will explore the external method. An external CSS file
can be created with any text or HTML editor such as “Notepad” or
“Dreamweaver”. A CSS file contains no (X)HTML, only CSS. You
simply save it with the .css file extension. You can link to the file
externally by placing one of the following links in the head section
of every (X)HTML file you want to style with the CSS file.
<link rel=”stylesheet” type=”text/css” href=“Path To
stylesheet.css” />
Or you can also use the @import method as shown below
<style type=”text/css”>@import url(Path To stylesheet.css)</style>
14. External Style sheet (contd..)
By using an external style sheet, all of your (X)HTML files link to
one CSS file in order to style the pages. This means, that if you need to
alter the design of all your pages, you only need to edit one .css file to
make global changes to your entire website.
• Here are a few reasons this is better.
• Easier Maintenance
• Reduced File Size
• Reduced Bandwidth
• Improved Flexibility
15. CSS Syntax
A CSS rule has two main parts: a selector, and one or more declarations:
The selector is normally the HTML element you want to style.
Each declaration consists of a property and a value.
The property is the style attribute you want to change. Each property has a value.
CSS declarations always ends with a semicolon, and declaration groups are
surrounded by curly brackets:
p {color:red;text-align:center;}
16. CSS STYLINGBackground Color
The background-color property specifies the background color of an
element.
The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}
The background color can be specified by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000"
17.
18. 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.
The background image for a page can be set like this:
Example
Body {background-image:url('paper.Gif');}
Below is an example of a bad combination of text and background
image.
19. Example
body {background-image:url('bgdesert.jpg');}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image
both horizontally and vertically.
Some images should be repeated only horizontally or vertically,
or they will look strange:
Example
body
{
background-image:url('gradient2.png');
}
20. Background Image - Set position and no-repeat
Remark When using a background image, use an image that does not
disturb the text.
Showing the image only once is specified by the background-repeat
property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
21. Background - Shorthand property
As you can see from the examples above, there are many
properties to consider when dealing with backgrounds.
To shorten the code, it is also possible to specify all the
properties in one single property. This is called a shorthand
property.
The shorthand property for background is simply
"background":
Example
body {background:#ffffff url('img_tree.png') no-repeat right
top;}
22. Text Color
The color property is used to set the color of the text. The color can be specified
by:
* name - a color name, like "red"
* RGB - an RGB value, like "rgb(255,0,0)"
* Hex - a hex value, like "#ff0000"
The default color for a page is defined in the body selector.
Example
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
23. Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified. When
text-align is set to "justify", each line is stretched so that every line has
equal width, and the left and right margins are straight (like in
magazines and newspapers).
Example
h1 {text-align:center;}
h2 {text-align:right;}
h3 {text-align:justify;}
24. Text Decoration
The text-decoration property is used to set or remove
decorations from text. The text-decoration property is
mostly used to remove underlines from links for design
purposes:
Example a {text-decoration:none;}
It can also be used to decorate text:
Example : h1 {text-decoration:overline;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
25. Text Transformation
The text-transform property is used to specify uppercase and
lowercase letters in a text. It can be used to turn everything into
uppercase or lowercase letters, or capitalize the first letter of each
word.
Example p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
26. 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")
Font Family
The font family of a text is set with the font-family property. The font-family
property should hold several font names as a "fallback" system. If the browser
does not support the first font, it tries the next font. Start with the font you want,
and end with a generic family, to let the browser pick a similar font in the generic
family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation
marks, like font-family: "Times New Roman".
More than one font family is specified in a comma-separated list:
Example : p{font-family:"Times New Roman", Times, serif;}
27. 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. Font Size
The font-size property sets the size of the text. Being able
to manage the text size is important in web design.
However, you should not use font size adjustments to
make paragraphs look like headings, or headings look like
paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for
headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
29. Set Font Size With Pixels
Setting the text size with pixels, gives you full control over the text size:
Example : h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}
Set Font Size With Em
To avoid the resizing problem with Internet Explorer, many developers use Em
instead of pixels.
The Em size unit is recommended by the W3C. 1 Em is equal to the current font
size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to Em using this formula: pixels/16=Em
Example : h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */
31. CSS Element Selector
• A CSS declaration always ends with a semicolon, and
declaration groups are surrounded by curly brackets:
• p {color:red;text-align:center;}
• To make the CSS more readable, you can put one
declaration on each line, like this:
• p { color:red; text-align:center; }
32. CSS Comments
• Comments are used to explain your code, and may help you
when you edit the source code at a later date. Comments are
ignored by browsers.
• A CSS comment begins with "/*", and ends with "*/", like this:
• /*This is a comment*/ p { text-align:center; /*This is another
comment*/ color:black;}
33. The id and class Selectors
• In addition to setting a style for a HTML element, CSS
allows you to specify your own selectors called "id" and
"class".
• id is used when we have to apply CSS property to one
attribute only.
• class is used when we have to use CSS property in many
locations within the same page or different.
35. The id Selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with
a "#".
• Example
• Imagine within the body element of our html page, we have the following
paragraph element
• <p id=”welcome”>Welcome to the wonderful world of HTML</p>
• We can then create a CSS rule with the id selector:
• #welcome { text-align:center; color:red; }
36. The class Selector
• The class selector is used to specify a style for a group of
elements. Unlike the id selector, the class selector is most
often used on several elements.
• This allows you to set a particular style for many HTML
elements with the same class.
• The class selector uses the HTML class attribute, and is
defined with a "."
• In the example below, all HTML elements with class="center"
will be center-aligned:
37. The class Selector (Example)
• Imagine within the body element of our html page, we have the following
header element
• <h2 class=”center”>Summary</h2>
• We can then create a CSS rule with the class selector:
.center {text-align:center;}
• You can also specify that only specific HTML elements should be
affected by a class.
• In the example below, all p elements with class="center" will be center-
aligned:
Example
p.center {text-align:center;}
38.
39. Tables
Steps to create table in CSS
• Use the HTML <table> element to define a table.
• Use the HTML <tr> element to define a table row.
• Use the HTML <td> element to define a table data.
• Use the HTML <th> element to define a table heading.
• Use the HTML <caption> element to define a table caption.
• Use the CSS border property to define a border.
40. Table Properties
• The border-collapse specifies whether the browser should control the appearance
of the adjacent borders that touch each other or whether each cell should
maintain its style.
• The border-spacing specifies the width that should appear between table cells.
• The caption-side captions are presented in the <caption> element. By default,
these are rendered above the table in the document. You use the caption-
side property to control the placement of the table caption.
• The empty-cells specifies whether the border should be shown if a cell is empty.
• The table-layout allows browsers to speed up layout of a table by using the first
width properties it comes across for the rest of a column rather than having to
load the whole table before rendering it.
41. Example of table creation in CSS
• <TABLE>
• <CAPTION>This is a simple 3x3 table</CAPTION>
• <TR id="row1">
• <TH>Header 1 <TD>Cell 1 <TD>Cell 2
• <TR id="row2">
• <TH>Header 2 <TD>Cell 3 <TD>Cell 4
• <TR id="row3">
• <TH>Header 3 <TD>Cell 5 <TD>Cell 6
• </TABLE>
42. Example of “Lists” in CSS
ul.circle {list-style-type: circle;}
ul.square {list-style-type: square;}
ol.upper-roman {list-style-type: upper-roman;}
ol.lower-alpha {list-style-type: lower-alpha;}
43. BOX MODEL
• All HTML elements can be considered as boxes. 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
every HTML element. It consists of: margins, borders,
padding, and the actual content. The image below
illustrates the box model
44.
45.
46. • Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is
transparent
• The box model allows us to add a border around elements, and to
define space between elements.