Css training tutorial css3 & css4 essentials

CASCADING STYLE
SHEETS
Compiled by
K.Subba Raju
QATRAININGHUB.COM - Best Software Training Institute

CSS stands for Cascading Style Sheets
CSS, or Cascading Styles Sheets, is a way to style HTML.
Whereas the HTML is the content, the style sheet is the
presentation of that document.
Styles don't smell or taste anything like HTML, they have a format
of 'property: value' and most properties can be applied to most
HTML tags.
Cascading: Multiple styles can overlap in order to specify a range
of style from a whole web site down to a unique element. Which
style gets applied pertains to the rules of CSS cascading logic.
Style: CSS deals specifically with the presentation domain of
designing a web page (color, font, layout, etc).
Sheet: Normally, CSS is a file separate from the HTML file –linked
to the HTML file through its <head> (exceptions apply).

WHAT IS CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display (X)HTML elements
 Styles are normally stored in Style Sheets
 Multiple style definitions will cascade into one
 CSS stands for Cascading Style Sheets.
 It is also called as Style Sheets or Styles.
 CSS is used to add more effects for our html page to make it
more attractive.
 Cascading means inheriting the features (styles).
 We can embed CSS in HTML, JavaScript, Asp, etc.,
 The extension for css file is .css (contains only styles)

WHY CSS?
 Allows for much richer document appearances than HTML.
 Reduce workload by centralizing commands for visual
appearance instead of scattered throughout the HTML doc.
 Use same style on multiple pages.
 Reduce page download size.
 Styles define how to display HTML elements
 Styles were added to HTML 4.0 to solve a problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
QATRAININGHUB.COM-BestSoftwareTrainingInstitute

CSS VERSIONS HISTORY
 The first CSS specification, CSS1, became a World Wide Web Consortium
(W3C) recommendation in December 1996. It included properties for
controlling typography, such as fonts, text alignment, spacing, margins, and
list formatting.
 CSS2 came out in 1998, and contained a lot of the features that designers had
been longing for. Boxes could be made to behave like HTML table cells, or
they could be positioned in different ways; more powerful selectors were
available.
 CSS3-2008 is currently in the works. CSS3 is split up into "modules". The old
specification has been split into smaller pieces, and new ones are also added.
any of the new CSS3 properties have been implemented in modern
browsers.
 CSS 4 is W3C started drafting CSS 4 on Sep 29, 2009

WHY TO USE STYLES?
 Documents written with CSS are
 more flexible
 short
 clear
 Basic formating tool
 Easy multiple document managment
 Save time by using selector classes
 New opportunities in formating

CSS ADVANTAGES
Flexibility: CSS layouts separates presentation from coding. By
using an external style sheet for a website, designers can now
amend the layout through this style sheet and all the pages will
be updated accordingly.
Codes Rendering: CSS layouts reduce the amount of codes in a
file as compared to the traditional table-based designs. This
reduction in codes will improve the website performance in the
user-end.
Accessibility: Accessibility is very important as it make sure a
web page can be properly interpreted by all users.

Code: CSS is the standard for coding in HTML. CSS is
compatible with most browsers. CSS reduces the length
of the codes of web page, which decreases the page
size, making it easy and fast to load in browsers
Design: Use of CSS makes the design simple. CSS
makes the management of the entire website easy to
maintain by just changing the CSS file which contains
the style details.
Bandwidth: CSS reduces the HTML coding and page
size. This reduces the bandwidth usage.
Consistency: It is easy to maintain, handle and control
the whole website made on CSS based HTML.

CSS STRUCTURE
<html>
<head>
<style type=“text/css”>
{
---------------
---------------
}
</style>
</head>
<body>
---------------
---------------
</body>
</html> QATRAININGHUB.COM - Best Software Training Institute

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;
font-family:arial;
}

{ BASIC SYNTAX
 Made up of three parts:
selector {property: value}
 The selector is normally the HTML element/tag you wish to define
 The property is the attribute you wish to change
 Every property has the value

TYPES OF STYLESHEETS/APPLYING CSS
 There are three ways to apply CSS to HTML.
 INLINE STYLES
 INTERNAL/Embedded STYLE SHEETS
 EXTERNAL STYLE SHEETS
INLINE STYLE SHEETS
we specify styles inside the tag in the body part. These styles will
be applied only for that particular line.
They look something like this:
<p style="color: red">text</p> This will make that specific
paragraph red.
<span style="color:blue">BLUE</span> This will make that text
style in blue color.

INTERNAL/EMBEDDED STYLE SHEETS
 If we specify the styles in our html file itself, then they are called
as internal styles.
 These styles cannot be used in other files (i.e., if we want the
same styles in other files, we should write them again in that
other file)
 Embedded, or internal styles are used for the whole page. Inside
the head tags, the style tags surround all of the styles for the
page. SYNTAX : <html>
<head>
<style type=“text/css”>
</style>
</head>
<body>
</body></html>

EXTERNAL STYLE SHEETS
If we declare the styles outside our html file (as
another file), then they are called External Styles.
These styles can be reusable i.e., they can be used for
more than one file.
We save the external file consisting of styles with .css
file extension.
The changes made in external files will effect all the
html files which are using those styles.
SYNTAX:
<head>
<link rel=“stylesheet” href=“#” type=“text/css”>
</head> QATRAININGHUB.COM - Best Software Training Institute

SELECTORS

Introduction: In the CSS, a class selector is a name
preceded by a full stop (.) and an ID selector is a
name preceded by a hash character (#). So the
CSS might look something like:

#top {

background-color: #ccc;

padding: 1em

}

.intro {

color: red;

font-weight: bold;

} QATRAININGHUB.COM - Best Software Training Institute


CLASS Selector

ID Selector

DESCENDANT Selector

GROUPING Selector
Class Selector : Allow you to associate a class with a
particular subset, or class, of elements. so if we had
following rule:
Example:
p.bold { font-weight: bold; }
<p class="bold">Naresh i Technologies in Bold.</p>
 ID selectors works like class selectors except that they
can only be used on one element per page
 Example:
 p#bold { font-weight: bold; }
 <p id="bold">Naresh i Technologies in Bold</p>

 DESCENDENT SELECTORS specify that styles should
only be applied, when the element in question is a
descendent(for example a child or grand child) of
another element).so this
 Example:
h3 em { color: white; background-color:black; }
 plus this html
 <h3>welcome to <em>html</em></h3>
 GROUPING SELECTORS can also specify the same set
of rules for more than one selector, like this :
 p,h1,h2{text-align:left;}
 Just place a comma between each one.
 You can even get more complex and group multiple
class and id selectors :
 p.navigation, h1#content{font-weight:bold;}

LENGTHS AND PERCENTAGES
 There are many property-specific units for values used in CSS, but
there are some general units that are used in a number of properties
and it is worth familiarizing yourself with these before continuing.
 em (such as font-size: 2em) is the unit for the calculated size of a font.
So "2em", for example, is two times the current font size.
 px (such as font-size: 12px) is the unit for pixels.
 pt (such as font-size: 12pt) is the unit for points.
 % (such as font-size: 80%) is the unit for... wait for it... percentages.
 Other units include pc (picas), cm (centimetres), mm (millimetres) and
in (inches).

THE <DIV> TAG
 The <div> tag is a block-level tag because it encloses other tags
and, importantly, it forces a line break on the page. Because it
creates a line break before and after its enclosed content. Use
of the <div> tag.
 <div style="text-indent:25px; margin-left:30px; margin-right:30px;
text-align:justify">
 <p>This paragraph has first-line indention of 25 pixels. It has both
left and right margins of 30 pixel and its alignment is justified
between the two margins.</p>
 <p>This paragraph also has first-line indention of 25 pixels. It
has both left and right margins of 30 pixel and its alignment is
justified between the margins. Both paragraphs are styled with
an enclosing division tag to apply
 these styles to both paragraphs.</p>
 </div>

THE <SPAN> TAG
 A <span> tag is an in-line tag placed around text for the purpose of
identifying a string of characters to which this tag’s style sheet is
applied. The tag can enclose a single letter, a word, a phrase, a
sentence, or any other sub-string of text for the purpose of identifying
it for application of styling. As an in-line tag, the <span> tag surrounds
a string of text enclosed inside a block-level container.
 Example:
 <p>this is <span style=”color:green”>span </span>tag</p>

POSITIONS IN CSS: Static:
 This is normal position scheme. The left and top properties do
not apply.
 Relative:
 Offsets are relative to the box's normal position.
 Absolute:
 Offsets are relative to the box's containing block.
 Fixed:
 Offsets are the same as in the absolute model,but are
fixed with respect to a particular point of reference.
For example when viewed in a browser,fixed elements
won't move when scrolled.

COLORS
CSS brings 16,777,216 colors to your disposal. They can take the form of
a name, an rgb (red/green/blue) value or a hex code.
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
#ff0000
#f00
There are 17 valid predefined colour names. They are aqua, black,
blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,
red, silver, teal, white, and yellow. transparent is also a valid value.

BACKGROUND PROPERTIES
 background-image
 background-repeat
 background-attachment
 background-position
 background:<color><image><repeat><attachme
nt><position> Text
 You can alter the size and shape of the text on a web page with a
range of properties, outlined below: font-family. This is the font itself,
such as Times New Roman, Arial, or Verdana.
 font-size, font-weight, font-style, text-decoration, text-transform
Text spacing

TEXT COLOR
<html><head>
<style type="text/css">
h1 {color: green}
h2 {color: #dda0dd}
p {color: rgb(0,0,255)}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
This is header 1
This is header 2
This is a paragraph

Margins and Padding
margin and padding are the two most commonly used properties for
spacing-out elements. A margin is the space outside of the element,
whereas padding is the space inside the element.
The Box Model
Margins, padding and borders (see next page) are all part of what's
known as the Box Model. The Box Model works like this: in the middle you
have the content area (let's say an image), surrounding that you have
the padding, surrounding that you have the border and surrounding that
you have the margin
CSS Borders
Borders can be applied to most HTML elements within the body. To
make a border around an element, all you need is border-style. The
values can be solid, dotted, dashed, double, groove, ridge, inset and
outset

BOX MODEL
MARGIN
BORDER
PADDING
CONTENT

LAYOUT PROPERTIES
 BORDER
 MARGIN
 PADDING
 POSITIONING
 FLOAT
 CLEAR
 Z-INDEX
 OVERFLOW
 VISIBLE

TYPOGRAPHY
 font-family
 font-style
 font-weight
 font-size
 font-variant
 line-height
 text-indent
 text-decoration
 text-align

CSS LIMITATIONS
 Some noted disadvantages of using "pure" CSS
include
 Inconsistent browser support
 Absence of expressions
 Lack of Variables
 Lack of multiple backgrounds per element
 Control of Element Shapes

THANK YOU
QATRAININGHUB
CSS
IT Software Training Institute
For CSS & Css3 Course : CSS3&4 Training

Css training tutorial css3 & css4 essentials

Recommended

More Related Content

What's hot (17)

Similar to Css training tutorial css3 & css4 essentials (20)

More from QA TrainingHub (7)

Recently uploaded (20)