Embed Size (px)
DESCRIPTION
A try to help the newcomers on CSS.. read it and rate it... :)
Citation preview
1
Speciman
Editionc
[Design Web on your think…]
Year
2014
[Hemant patidar] [Maulana Azad National Institute of Technology, Bhopal]
[year 2012-16]
2
CSS (Cascading Style Sheets)
Table of Content:
0. CSS
1. Advantage of CSS
2. CSS History
3. CSS Syntax
4. Types of CSS files
5. Selector In CSS
6. Inheritance In CSS & HTML Inheritance Tree
7. CSS units
8. CSS Background
9. Font & text
10. Styling Link
11. Styling List
12. Styling Table
13. Div & Span
14. Positioning
15. Display
3
CSS
CSS handles the look and feel part of a web page.
Using CSS, We can control..
The color of the text
The style of fonts
The spacing b/w paragraph
Column are sized and laid out
Background Image and color
Variety of other effects
4
Advantage Of CSS
CSS saves time
Pages load faster
Easy maintenance
Superior styles to HTML
Multiple device compatibility
5
CSS History
CSS is created and maintained through a group of people within the W3C called the CSS Working
Group.
The CSS working Group creates documents called Specifications. When a specification has been
discussed and officially ratified by W3C members, it becomes a Recommendation.
TThheessee ssppeecciiffiiccaattiioonnss aarree ccaalllleedd rreeccoommmmeennddaattiioonnss bbeeccaauussee tthhee WW33CC hhaass nnoo ccoonnttrrooll oovveerr tthhee aaccttuuaall
iimmpplleemmeennttaattiioonn ooff tthhee llaanngguuaaggee.. IItt ddeeppeennddss oonn tthhee bbrroowwsseerr
Cascading Style Sheets, level 1 in December 1996.
CSS2 in May 1998.
6
CSS Syntax
The Syntax for CSS is different than that of HTML markup but is case insensitive.
Selector {property: value}
Selector: A selector is an HTML tag at which style will be applied. This could be any tag like
<h1> or <table> etc.
Property: A property is a type of attribute of HTML tag. All HTML attributes are converted into
CSS properties. They could be color or border etc.
Value: Value are assigned to properties. For example color property can have value either red
or #F1F1F1 etc.
7
Types of CSS Files
Internal CSS: In this we place CSS code within the <head></head> tags.
<head>
<title> </title>
<style type=”text/css”>
CSS content goes here
</style>
</head>
<body>
External CSS: In this we place CSS code within a separate file and save it with .css extension.
<head>
<title> </title>
<link rel=”stylesheet” type=”text/css” href=”path to css file”/>
</head>
<body>
Inline CSS: Inline styles are CSS styles that are applied to one element using the “style”
attribute.
<body>
<tag style=”css property”> some text </tag>
</body>
8
Selector In CSS
Selector is used to select or point a specific element within the page.
Universal Selector
Type Selector
ID Selector
Class Selector
Universal Selector: The universal selector is indicated by * and applies to all the element of a page.
*
{
font-family: Arial;
}
Type Selector: The type selector allows us to create styles that apply to a specific type of HTML
element.
h1
{
color: green;
}
ID Selector: Allows us to refer to a single element in a page.
#intro
{
font-style: italic;
}
9
Class Selector: The class selector enables us to style multiple HTML elements through the class
attribute.
.highlight
{
font-weight: bold;
}
>> Each element can have only one ID.
>> Each page can have only one element with that ID.
>> We can use the same class on multiple elements.
Grouping Selector: Apply same style to different element.
h1,h2,h3,h4,h5,h6
{
color: red;
}
Combination Selector: We can hierarchically point to aspecific element within the page.
p.main
{
font-size: 26px;
}
The above rule applies to only those "paragraphs" which have a class "main".
Descendant Selector: Descendant means an element that is a child, grand child, great grand child
and so on of another element.
Apply style based on whether one element contains another.
p a
{
10
font-weight: bold
}
The above rule applies to all the anchors which are placed within the <p> tag.
11
Inheritance In CSS & HTML Inheitance tree
Inheritance is a process of receiving values of properties by a child element from its parent element.
-------------------------------------------------------------------------------------------------------------------
12
Background in CSS
Background Shorthand: background: color image repeat attachment position.
13
Text and Font
There Are 3 ways to apply font:
Single font name
Font Family keywords
Multiple Font Names
Font Weight
Using Numbers: Range from 100 to 900. (100 lighter and 900 is darkest)
Using keyword: Normal, bold, bolder and lighter.
Font Style
Normal, italic and oblique
Aligning Text
14
Left, center, right and justify
Text Decoration
Underline, Overline, None, Line-through and blink
Line Height
Normal, Inherit, %, px and em
Text transform
None, Capitalize, Lowercase, Uppercase and Inherit
15
Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background etc.)
This will style all aspects of the link (hover, visited and active).
To style each part separately, we use pseudoclasses.
:link – This is the default style for the link.
:visited – After a link has been clicked.
:hover – as a mouse is paused over a link (pre-click).
:active – Right as the link is being clicked.
16
Styling Lists
- None - inside - url
- Disc - outside - path to image
- Circle
- Square
(Shorthand) List style: type position image.
Styling List
List-style-type List-style-position
List-style-image
17
Styling Tables
“Border-style” shorthand-
Border-style: dotted dashed solid double;
It means- top border is dotted
-right border is dashed
-bottom border is solid
-left border is dashed
“Border” shorthand-
Border: width style color;
Border-collapse: collapse;
Styling table
Border-style Border-width Border-color Individual sides
- None
- Dotted
- Dashed
- Solid
- Double
- Groove
- Ridge
- Inset
- Outset
- Thin
- Medium
- Thick
-
- Name
- rgb
- hex
transparent
-Border-top-style
-Border-right-
style
-Border-bottom-
style
-Border-left-style
18
Aligning table text: Horizontal (left, right, center)
Vertical (top, middle, bottom)
Colors in table: border color… background color… color…
tr:hover { /*css rules*/} – change the appearance of mouse of row when the user hovers the
mouse over it.
Other attribute
Width & height Aligning table text padding Colors in table
19
Div and Span
The <div> tag is used to specify a section within an HTML document. Anything
from text to images to video can be placed within a div.
<span> Same as div, but it doesn’t has any style of it’s own.
<span> is an inline element and <div> is a block level element.
20
21
CSS Postioning
Positioning means placing the elements at precise location in the browser.
3 important terms:
Box model
Padding
Margin
Every element in a doc is considered to be a Rectangular box which has a content area surrounded by
padding , border & margins.
Box Types
There are two basic types of boxes, block & inline.
Block boxes are generated by elements such as p, div or table.
Inline boxes are generated by tags such as B, I or span. And content like text & images.
Margins
Space b/w the frame and the next item.
3 choices for margin values:-
Length
Percentage
Auto
Syntax:- margin-(top/left/right/bootom): value;
Padding
Padding manages the space b/w element and it’s border.
Both length & percentage values are same but no auto value.
22
Positioning types
Static Fixed Relative Absolute
Always positioned
according to the
normal flow of the
page.
Fixed positioning
allows us to fix the
position of an
element to a
particular spot on
the page.
Relative positioning
changes the
position of the
HTML element
relative to where it
normally appears.
Absolute position
element is
positioned relative
to the first parent
element that has a
position other than
static.
23
Display CSS
Visibility: The property can control if an element is visible or not.
Possible values:- visible, hidden or collapse…
Display Property: The property can perform 2 task.
a. remove an element.
b. change it’s rendering from inline to block and vice versa.
Possible values:- none, inline, block or list-item.
