basics of css
Post on 20-Jan-2017
393 Views
Preview:
TRANSCRIPT
An
Introduction
to CSS
(Cascading
stylesheet)
Priya Goyal
CSS stands for Cascading Style Sheet.
Typical CSS file is a text file with an
extention.css and contains a series of commands or rules. These rules tell the HTML how to display.
*To create a style sheet, create a file using Notepad or Text Editor and
save it as a .css document and start writing the CSS code.
CSS Benefits
• 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
“HTML without CSS is like a piece of candy without a pretty wrapper.”
Without CSS, HTML elements typically flow from top to bottom of the page and position themselves to the left by default.
With CSS help, we can create containers or DIVs to better organize content and make a Web page visually appealing.
Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the <head> section of the HTML page.
There are 3 ways to attach CSS to a page:
1. External Style Sheet: Best used to control styling on multiple pages.
<link rel="stylesheet" type="text/css" href="css/styles.css" />
.css file
body {background-color: lightblue;
}h1 {
color: navy;margin-left: 20px;
}
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is used directly within HTML
tags.
<p style=“color: red”>Some Text</p>
CSS Rule Structure
A CSS RULE is made up of a selector
and a declaration. A declaration consists
of property and value.
selector {property: value;}
declaration
body { property: value; }
h1 { property: value; }
em { property: value; }
p { property: value; }
Universal SelectorThe universal selector is an asterisk.matches all element types in the document.*{ }
The Type Selectorthe same rules to several elements.h1, h2, h3 {}
The Class Selector< p class=”student” >…… < /p ><div class=“student”>…….</div>
‘ . ‘ is used to denote a classWe can use a class selector in one of two ways here.
1)One way is to directly assign the class name ‘student’. By using this, same rules will be applied to all elements whose class name is ‘student’..student {}
2)We can apply the attributes to specific elements.p.student {
text-align: center;color: red;
}
The ID SelectorThe id selector works just like a class selector, but works on the value of id attributes
#para1 {text-align: center;color: red;
}
The Border Properties
There are three properties of a border you can change:border - color border - style border - width
The border - color Propertyp {border-color:#ff0000;}
It may beborder - bottom - colorborder - right - colorborder - top - colorborder - left – color
The border - width Propertyp {border-width:4px;}
The value of the border - width property cannot be given as a percentage.. It may be
thinmediumThick
Can also giveborder - bottom - widthborder - right - widthborder - top - widthborder - left - width
The border - style Propertyp {border-style : solid;}
border - bottom - styleborder - right - styleborder - top - styleborder - left - style
The padding PropertyThe padding property allows you to specify how much space should appear between the content of an element and its border:
td {padding:5px;}
padding - bottompadding - toppadding - leftpadding - right
Background Color
With CSS, a color is most often specified by:a HEX value - like "#ff0000"an RGB value - like "rgb(255,0,0)"a color name - like "red"
body {background-color: #b0c4de;
}
Background Image
body {background-image: url("paper.gif");
}
Background-repeat-sets the background image position
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
body {background-image: url("img_tree.png");background-repeat: no-repeat;
}
Two background images
body {background-image: url("img_tree.gif"), url("img_flwr.gif");background-color: #cccccc;
}
Background Position
background-position: left top|left center|left bottom|right top|right center|rightbottom|center top|center center|center bottom|x% y% (The right bottom corner is 100% 100%)|xpos ypos(0px 0px)|Initial|inherit;
Body{Background-position : left top;}
If you only specify one keyword, the other value will be "center“.
Background Attachment
background-attachment: scroll|fixed|local|initial|inherit;
TEXT FORMATTING
Text Color
The color property is used to set the color of the text. With CSS, a color is most often specified by:
color: color|initial|inherit;
body {color: blue;
}h1 {
color: #00ff00;}
Value Description
color Specifies the text color.
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Text Alignment
The text-align property is used to set the horizontal alignment of a text.
Text-align:center|right|left|justify
h1 {text-align: center;
}
p.date {text-align: right;
}
p.main {text-align: justify;
}
Vertical-align Property
vertical-align: baseline|length|sub|super|top|text-top|middle|bottom|text-bottom|initial|inherit;
baseline Align the baseline of the element with the baseline of the parent element. This is default
length Raises or lower an element by the specified length. Negative values are allowed
% Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
sub Aligns the element as if it was subscript
super Aligns the element as if it was superscript
top The top of the element is aligned with the top of the tallest element on the line
text-top The top of the element is aligned with the top of the parent element's font
middle The element is placed in the middle of the parent element
bottom The bottom of the element is aligned with the lowest element on the line
text-bottom The bottom of the element is aligned with the bottom of the parent element's font
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
img {vertical-align: text-top;
}
Text Decoration
The text-decoration property is used to set or remove decorations from text.
Text-decoration:none|overline|underline|line-through;
a {text-decoration: none;
}h1 {
text-decoration: overline;}
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
p.class1 {text-transform: uppercase;
}
h1{text-transform:lowercase;}
Text IndentationThe text-indent property is used to specify the indentation of the first line of a text.
text-indent: length|initial|inherit;
p {text-indent: 50px;
}
It may be both in percentage or in pixels
length Defines a fixed indentation in px, pt, cm, em, etc. Default value is 0
% Defines the indentation in % of the width of the parent element
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
word-spacing Property
word-spacing: normal|length|initial|inherit;
p {word-spacing: 30px;
}
Value Description
normal Defines normal space between words . This is default
length Defines an extra space between words in px, pt, cm, em, etc. Negative values are allowed
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
letter-spacing Property
letter-spacing: normal|length|initial|inherit;
h1 {letter-spacing: 2px;
}
h2 {letter-spacing: -3px;
}
Value Description
normal No extra space between characters. This is default
length Defines an extra space between characters (negative values are allowed)
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Direction Property
direction: ltr|rtl|initial|inherit ;
div {direction: rtl;
}
Value Description
ltr The writing direction is left-to-right. This is default
rtl The writing direction is right-to-left
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Text-shadow Property
text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;
h1 {text-shadow: 2px 2px #ff0000;
}
h-shadow Required. The position of the horizontal shadow. Negative values are allowed
v-shadow Required. The position of the vertical shadow. Negative values are allowed
blur-radius Optional. The blur radius. Default value is 0
color Optional. The color of the shadow.
none Default value. No shadow
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
Unicode-bidi Property
unicode-bidi: normal|embed|bidi-override|intitial|inherit;
div {direction: rtl;unicode-bidi: bidi-override;
}
Value Description
normal Does not use an additional level of embedding. This is default
embed Creates an additional level of embedding
bidi-override Creates an additional level of embedding. Reordering depends on the direction property
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
White-space Property
white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;
p {white-space: nowrap;
}
Value Description
normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
Nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
Pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML
pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks
pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks
initial Sets this property to its default value.
inherit Inherits this property from its parent element.
CSS Font
"Sans" means without
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
p.ex1 {font: 15px arial, sans-serif;
}
font-style: normal|italic|oblique|initial|inherit;
Font-style
p.oblique {font-style: italic
}
Font-variant
font-variant: normal|small-caps|initial|inherit;
p.small {font-variant: small-caps;
}I/P-FONT-VARIANT: SMALL-CAPS;O/P-MY NAME IS HEGE REFSNES.
font-weightfont-weight: normal|bold|bolder|lighter|number|initial|inherit;
p.normal {font-weight: normal;
}
font-sizefont-size:medium|xx-small|x-small|small|large|x-large|xxlarge|smaller|larger|length|initial|inherit;
h1 {font-size: 250%;
}h1 {
font-size: 2.5em; /* 40px/16=2.5em */}Note-Smaller-Sets the font-size to a smaller size than the parent element
%-Sets the font-size to a percent of the parent element's font size
font-family
font-family: font|initial|inherit;p {
font-family: Times New Roman;}
Styling Links
The four links states are:a:link - a normal, unvisited linka:visited - a link the user has visiteda:hover - a link when the user’s mouse over ita:active - a link the moment it is clicked
/* unvisited link */a:link {
color: #FF0000;text-decoration: none;}
/* visited link */a:visited {
color: #00FF00;text-decoration: underline;}
/* mouse over link */a:hover {
color: #FF00FF;background-color: #FF704D;
}
/* selected link */a:active {
color: #0000FF;}
a:hover MUST come after a:link and a:visiteda:active MUST come after a:hover
List
In HTML, there are two types of lists:unordered lists (<ul>) - the list items are marked with bulletsordered lists (<ol>) - the list items are marked with numbers or letters
list-style: list-style-type list-style-position list-style-image|initial|inherit;
list-style-type: disc|circle|decimal|decimal-leading-zero|lower-alpha|lower-latin|lower-roman|none|square|upper-alpha;
list-style-position: inside|outside|initial|inherit;
list-style-image: none|url|initial|inherit;ul {
list-style-image: url('sqpurple.gif');}
Table
Table Borderstable, th, td {
border: 1px solid black;}
Collapse bordertable {
border-collapse: collapse;}table, th, td {
border: 1px solid black;}
Table Width and Heighttable {
width: 100%;}th {
height: 50px;}
Horizontal Text Alignmentth {
text-align: left;}
Vertical Text Alignmenttd {
height: 50px;vertical-align: bottom;
}
Table Paddingtd {
padding: 15px;}
Table Colorth {
background-color: green;color: white;
}
div {width: 300px;padding: 25px;border: 25px solid navy;margin: 25px;
}
CSS Box Model
Padding
padding: 25px 50px 75px 100px;top padding is 25pxright padding is 50pxbottom padding is 75pxleft padding is 100px
padding: 25px 50px 75px;top padding is 25pxright and left paddings are 50pxbottom padding is 75px
padding: 25px 50px;top and bottom paddings are 25pxright and left paddings are 50px
padding: 25px;all four paddings are 25px
padding-top: 25px;padding-right: 50px;padding-bottom: 25px;padding-left: 50px;
Length may be in percentage, pixels, pt, em.
Margin
The margin property can have from one to four values. (same as padding).
margin-top: 100px;margin-bottom: 100px;margin-right: 150px;margin-left: 50px;
Float and Clear
Clear
used to control the behavior of floating elementsClear property specifies on which sides of an element floating elements are not allowed to float.
div {clear: left;
}
Float
used to wrap text around images.img {float: right;margin: 0 0 10px 10px;
}
p {max-height: 10px;background-color: yellow;
}
p {min-height: 2px;background-color: yellow;
}
Max height of p must be <=10;
Min height of p must be >=2;
CSS Dimension
Display and Visibility
Hiding an Element - display:none or visibility:hidden
h1.hidden {visibility: hidden;
}
h1.hidden {display: none;
}
Visibility : hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
Display : none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there.
Block and Inline Elements
Examples of block elements (has a line break before and after it):<h1><p><li><div>
Examples of inline elements (does not force line breaks):<span><a>
Changing How an Element is Displayed
li {display: inline;
}span {
display: block;}
Positioning
Static Positioning(by default)
Fixed Positioningwill not move even if the window is scrolled
Relative Positioning• positioned relative to its normal position• Relatively positioned elements are often used as container blocks for absolutely
positioned elements. (do not overlap)h2.pos_left {
position: relative;left: -20px;
}
h2.pos_right {position: relative;left: 20px;
}
position: fixed;
position: relative;
Absolute Positioning• positioned relative to the first parent element that has a position other
than static. If no such element is found, the containing block is <html>• Absolutely positioned elements can overlap other elements.
h2 {position: absolute;left: 100px;top: 150px;
}
Overlapping ElementsThe z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
img {position: absolute;left: 0px;top: 0px;z-index: -1;
}
Outline
Property Description Values
outline Sets all the outline properties in one declaration outline-coloroutline-styleoutline-widthinherit
outline-color Sets the color of an outline color_namehex_numberrgb_numberinvertinherit
outline-style Sets the style of an outline nonedotteddashedsoliddoublegrooveridgeinsetoutsetinherit
outline-width Sets the width of an outline thinmediumthicklengthinherit
References
1. http://www.w3schools.com/css/
Thank you
top related