Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
2. 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).
3. 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)
QATRAININGHUB.COM - Best Software Training Institute
4. 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
5. 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
6. 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
QATRAININGHUB.COM - Best Software Training Institute
7. 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.
QATRAININGHUB.COM - Best Software Training Institute
8. 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.
QATRAININGHUB.COM - Best Software Training Institute
10. 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;
}
QATRAININGHUB.COM - Best Software Training Institute
11. { 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
QATRAININGHUB.COM - Best Software Training Institute
12. 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.
QATRAININGHUB.COM - Best Software Training Institute
13. 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>
QATRAININGHUB.COM - Best Software Training Institute
14. 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
15. 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
16.
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>
QATRAININGHUB.COM - Best Software Training Institute
17. 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;}
18. 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).
QATRAININGHUB.COM - Best Software Training Institute
19. 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>
QATRAININGHUB.COM - Best Software Training Institute
20. 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>
QATRAININGHUB.COM - Best Software Training Institute
21. 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.
QATRAININGHUB.COM - Best Software Training Institute
22. 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%)
Which is the same as
#ff0000
Which is the same as
#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.
QATRAININGHUB.COM - Best Software Training Institute
23. 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
QATRAININGHUB.COM - Best Software Training Institute
24. 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
QATRAININGHUB.COM - Best Software Training Institute
25. 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
QATRAININGHUB.COM - Best Software Training Institute
27. LAYOUT PROPERTIES
BORDER
MARGIN
PADDING
POSITIONING
FLOAT
CLEAR
Z-INDEX
OVERFLOW
VISIBLE
QATRAININGHUB.COM - Best Software Training Institute
28. TYPOGRAPHY
font-family
font-style
font-weight
font-size
font-variant
line-height
text-indent
text-decoration
text-align
QATRAININGHUB.COM - Best Software Training Institute
29. 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
QATRAININGHUB.COM - Best Software Training Institute