css v1 guru

What is CSS
• Cascading Style Sheets
• Contains the rules for the presentation of HTML.
+ =
HTML CSS Web Page
• CSS was introduced to keep the presentation information separate from
HTML markup (content).

Before CSS
• Initially Designers used presentation tags like (FONT, B, BR, TABLE etc.) and
spacers GIFs to control the design of web pages.

• Any modification in the design of websites was a very difficult and
boring task , as it evolves manually editing every HTML page.

Providing support for multiple browsers was a
difficult task.

CSS – brief history
• Style sheets have existed in one form or another since the beginnings
of SGML in the 1970s.
• In 1996, CSS level 1 Recommendation was published in December.
• CSS level2 was published as a W3C Recommendation on May 12,
1998
• CSS level3
• level4 (I am coming….)

Sources of Styles
Author (developer) Styles
• Inline Styles - As inline attribute “style” inside HTML tags
<div style=“font-weight: bold;”>I am bold</div>
• Embedded Styles - As embedded style tag with in HTML document.
<html>
<head>
<title>Welcome to Vendio!</title>
<style>
.footer {
width:90%;
}
</style>
-------
</html>
• Linked Styles - Inside separate files with .css extension
<link rel="stylesheet" href=“external.css" type="text/css" />

Sources of Styles(contd.)
• User Style sheets
• Browser default style sheet(User agent)
• Web page style sheet

Cascade
The CSS cascade assigns a weight to
each style rule. When several rules
apply, the one with the greatest weight
takes precedence.
Order of preference for various styles:
• Default browser style sheet
(weakest)
• User style sheet
• Author style sheet
• Author embedded styles
• Author inline styles (strongest)

CSS Selectors
• ID based ( #)
HTML CSS
<div id=“content”> #content {
Text width: 200px;
</div> }
ID selectors should be used with single elements.

Class based selector
• Class (.)
HTML CSS
<div class=“big”> .content {
Text width: 200px;
</div> }
<div>
<span class=“big”>some text </span>
</div>
Class based styles can be used by multiple HTML elements.
We can add multiple class based selector by giving space
Eg: green big

Tag based selectors
• Tag (Tag name)
HTML CSS
<div> DIV {
Text width: 200px;
</div> }
<div> SPAN {
<span>some text </span> font-size:130%;
</div> }
<span>some other text </span>

Grouping
• Multiple selectors can be grouped in a single style declaration by
using , .
H1, P , .main {
font-weight:bold;
color:red;
}
P{
color:blue;
}

Descendant selectors
Descendant selectors are used to select elements that are
descendants (not necessarily children) of another element
in the document tree.
HTML CSS
<div class=“abc”> abc P {
<div> font-weight:bold;
<P> }
Hello there! </p>
</div>
</div>

Child selectors
A child selector is used to select an element that is a direct
child of another element (parent). Child selectors will not
select all descendants, only direct children.
HTML CSS
<div > DIV.abc > P {
<div class=“abc”> font-weight:bold;
<P> }
Hello there! </p>
</div>
</div>

Universal selectors
Universal selectors are used to select any element.
* {
color: blue;
}

Adjacent sibling selectors
Adjacent sibling selectors will select the sibling immediately following
an element.
DIV.abc + P {
font-weight: bold;
}
will work for
<div>
<div class=“abc”>Message</div>
<P>Hello there!</p>
</div>

Attribute selectors
Attribute selectors selects elements based upon the attributes
present in the HTML Tags and their value.
IMG[src="small.gif"] {
border: 1px solid #000;
}
will work for
<img sr
c=“small.gif” dir=“abc”/>

CSS Pseudo-classes
selector:pseudo-class { property: value }
:link
:visited } Link (A tag) related pseudo classes
:hover
:active
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
First-child,focus,disabled,checked and many more..
http://www.w3schools.com/css/css_pseudo_classes.asp

CSS Pseudo-element
selector::pseudo-element { property: value }
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
h1::before {
content: url(smiley.gif);
}
http://www.w3schools.com/css/css_pseudo_elements.asp

CSS Values
• Words: text-align:center;.
• Numerical values: Numerical values are usually followed by a
unit type.
font-size:12px;
12 is the numerical value and px is the unit type pixels.
• Absolute Values – in, pc, px, cm, mm, pt
• Relative Values – em, rem, %,vw,vh
• Color values: color:#336699 or color#369.

Box model
http://www.w3schools.com/css/css_boxmo
del.asp

The Display Property
• Block Level elements, such as DIVs, paragraphs, headings, and lists, sit one
above another when displayed in the browser.
HTML
<body>
<div id=“div1”></div>
</body>
CSS
#div1 { width:300px;background:yellow;}
#div1 { width:300px;background:blue;}
#div1 { width:300px;background:orange;}

Inline Elements
• Inline elements such as a, span, and img, sit side by side when they are
displayed in the browser and only appear on a new line if there is
insufficient room on the previous one.
<div id="row1" >
<span class="norm">This is
small text and </span>
<span class="big">this is
big</span>
<span class="italicText"> I am
Italic</span>
</div>
.norm {
color:red;
}
.big {
color:blue;
font-weight:bold;
}
.italicText {
color:green;
font-style:italic;
}
#row1 {
padding:10px;
border:solid 1px #000;
}

Display property
none inline
block list-item
run-in compact
marker table
inline-table inline-block
table-row-group table-header-group
table-footer-group table-row
table-column-group table-column
table-cell
table-caption
FLEX

Visibility
Visible : The element is visible (default).
Hidden : The element is invisible (but still takes up space)
.big {
visibility:hidden;
}

Floating
float:left, right, none;
A floated box is laid out according to the normal flow, then taken out of the
flow and shifted to the left or right as far as possible.
IMG {
float:left;
}

Floating multiple elements
Floated boxes will move to the left or right until their outer edge
touches the containing block edge or the outer edge of another float.
<ul>
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
After applying
LI {
float:left;
}

Clearing Floats
Clear:both ;
Or
<style type="text/css">
.clearfix:after {
content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {display: inline-block;} /* for IE/Mac */
</style>

Positioning - static
position:static; (Default option) the element occurs in the normal flow
(ignores any top, bottom, left, right, or z-index declarations)

Positioning - relative
position:relative; Generates a relatively positioned element, positioned
relative to its normal position, use bottom, right, top and left property
to place element. Default flow of other elements don’t change.

Positioning - absolute
position:absolute; Generates an absolutely positioned element,
positioned relative to the first parent element that has a position other
than static (if none is found, relative to document’s BODY). use bottom,
right, top and left property to place element

Positioning - fixed
position: fixed; A fixed element is positioned relative to the viewport,
which means it always stays in the same place even if the page is
scrolled.

z-index
The z-index property specifies the stack order of an element.
An element with greater stack order is always in front of an
element with a lower stack order.
only works on positioned elements (position:absolute,
position:relative, or position:fixed).

Inheritance
• Styles that relate to text and appearance are inherited by the
descendant elements.
• Styles that relate to the appearance of boxes created by styling DIVs,
paragraphs, and other elements, such as borders, padding, margins
are not inherited.
https://www.w3.org/TR/CSS21/propidx.html

Refrences
• www.w3schools.com
• www.w3.org
• World wide web

css v1 guru

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to css v1 guru (20)

css v1 guru