Unit - 4 CSS: Computer Engineering

Unit - 4
CSS
Computer Engineering
Outline
1. Introduction to CSS
• What is CSS?
• Importance of CSS
2. Basics of CSS
• Basic Syntax & Structure
• Class & ID
• Types of CSS
• Multiple selector, Multilevel selector
3. Background
4. Fonts & Text 2
Unit-4 CSS
Outline (Cont.)
5. Box Model
• Margin
• Border
• Padding
6. List
• List Type
• List with Image
• List Position
7. Links
8. CSS Positioning 3
Unit-4 CSS
Outline (Cont.)
9. CSS Layers
10. CSS Floating Property
11. Introduction to CSS3
Unit-4 CSS
What is CSS?
 CSS stands for Cascading Style Sheets
 Styles define how to display HTML elements
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
Unit-4 CSS
Importance of CSS
 CSS defines HOW HTML elements are to be displayed.
 Styles are normally saved in external .css files.
 External style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one single file.
 Advantages :
• Improves Website Presentation
• Makes Updates Easier and Smoother
• Helps Web Pages Load Faster
 Disadvantages :
• Browser Dependent
• Difficult to retrofit in old websites
Unit-4 CSS
Basic Syntax of CSS
 A CSS rule has two main parts: a selector, and one or more
declarations
Selector Declaration Declaration
h1 {color:blue; font-size: 12px;}
property value property value

 The selector is normally the HTML element you want to style.
 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each
property has a value.
7
Unit-4 CSS
The “id” selector
 The id selector is used to specify a style for a single, unique
element.
 The id selector uses the id attribute of the HTML element, and is
defined with a "#“ in css.
 The style rule below will be applied to the element with
id="para1":
HTML CSS
<h1 id=“para1”> #para1{
Hello Friends color: blue;
</h1> }
<h1> Output
How are you Hello Friends
</h1> How are you
8
Unit-4 CSS
The “class” selector
 The class selector is used to specify a style for a group of
elements.
 The class selector uses the HTML class attribute, and is defined
with a ".“ in css.
HTML CSS
<h1 class=“myClass”> .myClass{
Hello Friends color: blue;
</h1> }
<h1>
How are you
</h1> Output
<h1 class=“myClass”> Hello Friends
How are you How are you
</h1> How are you
9
Unit-4 CSS
Different ways to write CSS
 There are three ways of inserting a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
10
Unit-4 CSS
1) Inline Style
 It is possible to place CSS right in your HTML code, and this method
of CSS usage is referred to as Inline CSS.
 Inline CSS has the highest priority out of external,
internal/embedded CSS.
 This means that you can override styles that are defined in external
or internal by using inline CSS.
 If you want to add a style inside an HTML element all you have to do
is specify the desired CSS properties with the style HTML attribute.
 Example:
<p style="background: blue; color: white;"> My Inline CSS
</p>
11
Unit-4 CSS
2) Internal Style Sheet
 This type of CSS is only for Single Web Page.
 When using internal CSS, we must add a new tag, <style>, inside the <head> tag.
 The HTML code below contains an example of <style>'s usage.
<html>
<head>
<style type="text/css">
p { color: red;}
</style>
</head>
<body>
<p>Your page's content!</p>
</body> 12
</html>
Unit-4 CSS
3) External Style Sheet
 When using CSS it is preferable to keep the CSS separate from
your HTML.
 Placing CSS in a separate file allows the web designer to
completely differentiate between content (HTML) and design
(CSS).
 External CSS is a file that contains only CSS code and is saved with
a ".css" file extension.
 This CSS file is then referenced in your HTML using the <link>
instead of <style>.
13
Unit-4 CSS
3) External Style Sheet (Cont.)
 Example :
Demo.html test.css
<html> #para1{
<head> text-align: center;
<link rel=“stylesheet” type=“text/css” }
href=“test.css”> p
</head> {
<body> color : blue;
}
<p> Hello Friends </p>
<p id=“para1”> How are you? </p> Output
Hello Friends
</body> How are you?
</html>
14
Unit-4 CSS
3) External Style Sheet (Cont.)
 Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have, simply
have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in
a single CSS file.
15
Unit-4 CSS
Multiple Selection
 We can apply same css to multiple selectors using comma
separated selector list, for example :
Demo.html test.css
<html> p, h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>
<p> Hello Friends </p>

<h1> How are you? </h1> Output
Hello Friends
</body>
</html>
How are you?
16
Unit-4 CSS
Assign Multiple Class
 We can apply different class to same html element by giving space
separated class names in the class attribute:
Demo.html test.css
<html> . class1
<head> {
</head> . Class2
<body> {
text-align : center;
<h1 class=“class1 class2”> }
How are you?
</h1> Output
</body>
How are you?
</html>
17
Unit-4 CSS
Multi-level Selection
 We can use hierarchical path to target html element by space
separated element/class/id names, for example :
Demo.html test.css
<html> div h1
<head> {
</head>
<body>
<h1>Hello Friends…</h1>
<div>
<h1>How are you?</h1> Output
</div> Hello Friends…
</body>
How are you?
</html>
18
Unit-4 CSS
CSS Background Property
 CSS Background Color (background-color)
 CSS Background Image (background-image)
 Background Image Repeat (background-repeat)
 CSS Fixed Background Image (background-attachment)
 CSS Background Image Positioning (background-position)
19
Unit-4 CSS
CSS Background Color
 The background-color property specifies the background color of
an element.
 The background color of a page is defined in the body selector:
 Below is example of CSS backgrounds
test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}
20
Unit-4 CSS
CSS Background Image
 The background-image property specifies an image to use as the
background of an element.
 For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
}
21
Unit-4 CSS
CSS Background Image Repeat
 You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
test.css
body
{
no-repeat
repeat-y
background-repeat : repeat;
repeat-x
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
}
22
Unit-4 CSS
CSS Fixed Background Image
 The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
 For Example,
test.css
body
{
background-attachment : fixed;
}
23
Unit-4 CSS
CSS Background Image Positioning
test.css
body
{
background-position: 20px 10px;
30% 30%
background-position: 30%30%;
background-position: top center;
}
24
Unit-4 CSS
CSS Font
 CSS font properties define the font family, boldness, size, and the
style of a text.
1. Font Color (color)
2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
25
Unit-4 CSS
CSS Font (Cont.)
h4{
 CSS Font Color color : red;
• Set the text-color for different elements }
h4{
 CSS Font Family font-family : sans-serif;
• The font family of a text is set with the }
font-family property. h4{
font-size: 120%;
 CSS Font Size font-size : 10px;
• The font-size property sets the size of font-size : small;
font-size : smaller;
the text.
font-size : x-small;
• font-size : 120% font-size : xx-small;
• font-size : 10px; font-size : large;
• font-size : x-large; font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
} 26
Unit-4 CSS
CSS Font (Cont.)
 CSS Font Style h4{
font-style: italic ;
• The font-style property is mostly used to }
specify italic text.
h4{
 CSS Font Weight font-weight : 300;
• The font-weight property sets how thick font-weight : bolder;
or thin characters in text should be font-weight : lighter;
}
displayed.
 CSS Font Variant h4{
font-variant: small-caps;
• The font-variant property specifies
whether or not a text should be }
displayed in a small-caps font.
• font-variant : small-caps;
27
Unit-4 CSS
CSS Text Property
 While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
alignment of your text.
1. Text Decoration (text-decoration)
2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. CSS White Space (white-space)
6. CSS Word Spacing (word-spacing)
7. CSS Letter Spacing (letter-spacing)
8. CSS Line Height (line-height)
28
Unit-4 CSS
CSS Text Property (Cont.)
 Text Decoration
h4{
• The text-decoration property is used to text-decoration : line-through;
set or remove decorations from text. text-decoration : overline;
text-decoration : underline;
• The text-decoration property is mostly
text-decoration : none;
used to remove underlines from links for }
design purposes.
 Text Indent h4{
• The text-indentation property is used to text-indent : 20px;
text-indent : 30%;
specify the indentation of the first line of }
a text. h4{
 Text Align text-align : right;
text-align : justify;
• The text-align property is used to set the text-align : left;
horizontal alignment of a text. text-align : center;
} 29
Unit-4 CSS
 Text Transform h4{
• The text-transform property is used to text-transform : capitalize;
text-transform : uppercase;
specify uppercase and lowercase letters text-transform : lowercase;
in a text. }
 CSS White Space
h4{
• The white-space attribute allows you to white-space : nowrap;
prevent text from wrapping until you }
place a break <br /> into your text.
 CSS Word Spacing h4{
• With the CSS attribute word-spacing you word-spacing : 10px;
}
are able to specify the exact value of the
spacing between your words. Word-
spacing should be defined with exact
values. 30
Unit-4 CSS
 CSS Letter Spacing h4{
• With the CSS attribute letter-spacing you letter-spacing : 3px;
}
are able to specify the exact value of the
spacing between your letters. Letter-
spacing should be defined with exact
values.
 CSS Line Height
h4{
• The line-height attribute will set the height
line-height : 10px;
of the line in the page. }
 CSS Text-Shadow h1{

text-shadow: 3px 2px red;
• horizontal shadow (3px), the position of
}
the vertical shadow (2px) and the color of
the shadow (red):
31
Unit-4 CSS
The Box Model
 All HTML elements can be considered as boxes. In CSS, the term
"box model" is used when talking about design and layout.
 The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
 The box model allows us to place a border around elements and
space elements in relation to other elements.
32
Unit-4 CSS
The Box Model (Cont)
 The image below illustrates the box model:
Margin
Border
Padding
Content
33
Unit-4 CSS
The Box Model (Cont)
margin-top
border-top
padding-top
padding-right
margin-right
border-right
padding-left
margin-left
border-left
Content
padding-bottom
border-bottom
margin-bottom
34
Unit-4 CSS
CSS Padding
 The CSS padding properties define h4{
padding : 10px;
the space between the element }
border and the element content.
 The top, right, bottom, and left h4{
padding-top : 10px;
padding can be changed padding-right : 20px;
independently using separate padding-bottom : 30 px;
padding-left : 40 px;
properties. }
 A shorthand padding property can h4{
also be used, to change all padding padding : 10px 20px 30px 40px;
}
at once.
35
Unit-4 CSS
CSS Border
 The CSS border properties allow you to specify the h4{
style and color of an element's border. border : 1px solid red;
 Border Style Types }
• The border-style property specifies what kind of border h4{
to display. border-style : solid;
 Border Width border-style : dotted;
• The border-width property is used to set the width of border-style : double;
the border. }
 Border Color h4{
• The border-color property is used to set the color of the border-width : 7px;
border. }
• Border colors can be any color defined by RGB,
hexadecimal, or key terms. Below is an example of each h4{
of these types. border-color : red;
}
 The top, right, bottom, and left border can be
changed independently using separate properties. h4{
border-top : 1px solid red;
} 36
Unit-4 CSS
CSS Margin
 The CSS margin properties define the h4{
margin: 10px;
space around elements }
 The top, right, bottom, and left h4{

margin -top : 10px;
margin can be changed margin -right : 20px;
margin -bottom : 30 px;
independently using separate margin -left : 40 px;
properties. }
 A shorthand margin property can h4{

margin : 10px 20px 30px 40px;
also be used, to change all margins }
at once.
37
Unit-4 CSS
CSS List
 The CSS list properties allow you to: ul{
list-style-type : lower-greek;
• Set different list item markers for
list-style –type : decimal;
ordered & unordered lists list-style-type : circle;
• Set an image as the list item marker list-style-type : none;
}
• Set the position of the marker
ol{
 CSS List Style Type list-style-image : url(‘imgPath’);
 CSS List with Image }
 CSS List Position ol{

list-style-position : outside;
list-style-position : inside;
}
38
Unit-4 CSS
Styling Links
 Anchor/Link States a:link{
color:#FF0000;
• The four links states are:
/*unvisited link*/
1. a:link - a normal, unvisited link }
2. a:visited - a link the user has visited a:visited{
3. a:hover - a link when the user text-decoration : none;
/*visited link*/
mouse over it
}
4. a:active - a link the moment it is
a:hover{
clicked color:#00FF00; /*mouse
over link*/
}
a:active{
color:#0000FF; /*selected
link*/
}
39
Unit-4 CSS
CSS Positioning
 Absolute Positioning h1{
• With absolute positioning, you define position : absolute;
left : 50px;
the exact pixel value where the specified top : 100px;
HTML element will appear. }
• The point of origin is the top-left of the
browser's viewable area, so be sure you
are measuring from that point. h1{
 Relative Positioning position : relative;
left : 50px;
• Relative positioning changes the
top : 100px;
position of the HTML element relative to }
where it normally appears.
h1{
 Fixed Positioning position : fixed;
• The element is positioned relative to the top : 50px;
browser window left : 100px;
} 40
Unit-4 CSS
CSS Layers
 CSS allows you to control which item will CSS
appear on top with the use of layers. #division1{
position : absolute;
 In CSS, each element is given a priority. height : 100px;
 If there are two overlapping CSS positioned width : 100px;
elements, the element with the higher left : 100px;
top : 150px;
priority will appear on top of the other. background-color : red;
 To manually define a priority, set the z-index z-index : 5;
value. The larger the value, the higher the }
#division2{
priority the element will have. position : absolute;
height : 200px;
HTML
width : 200px;
left : 50px;
<div id="division1">
top : 100px;
</div>
background-color : blue;
</div>
} 41
Unit-4 CSS
CSS Float Property
 With CSS float, an element can be pushed to the left or right,
allowing other elements to wrap around it.
 Wrapping text around an image is easy when using the CSS Float
attribute.
 You have a choice to either float the picture to the left or to the
right.
CSS
HTML
#division1{
background-color : red;
float : left;
ABC Content
}
</div>
#division2{
background-color : blue;
XYZ Content
float : right;
</div>
}
42
Unit-4 CSS
Introduction to CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier versions of
CSS.
 CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
 CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur
on :hover or :focus, to occur smoothly over a specified duration –
rather than happening instantaneously as is the normal behaviour.
 Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.
43
Unit-4 CSS
Introduction to CSS3 (Cont)
 Some of the most important CSS3 modules are:
• CSS Animations and Transitions
• Calculating Values With calc()
• Advanced Selectors
• Generated Content and Counters
• Gradients
• Webfonts
• Box Sizing
• Border Images
• Media Queries
• Multiple Backgrounds
• CSS Columns
Courtesy : http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/
44
Unit-4 CSS
Thank You
45

Unit - 4 CSS: Computer Engineering

Uploaded by

Copyright:

Available Formats

Unit - 4 CSS: Computer Engineering

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit - 4 CSS: Computer Engineering

Uploaded by

Copyright:

Available Formats

Unit - 4

h1 {color:blue; font-size: 12px;}

property value property value

<p> Hello Friends </p>

 CSS Text-Shadow h1{

 The top, right, bottom, and left h4{

 A shorthand margin property can h4{

 CSS List Position ol{

You might also like