Web Development (WD) (3151606)

Unit-2
Part-2

Cascading Style
Sheets (CSS)
Computer Engineering Department
SVBIT, Gandhinagar
 Outline
Looping

 Introduction to CSS
 Basics of CSS
 Background
 Fonts & Text
 Box Model
 List
 Links
 CSS Positioning
 CSS Layers
 CSS Floating Property
 Introduction to CSS3
What is CSS?
 Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

 CSS defines layout of HTML documents.

 For example, CSS covers Fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things.

 CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs, variations in display for different
devices and screen sizes as well as a variety of other effects.
What is 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 of CSS
 CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.

 Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every
time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code
means faster download times.

 Easy maintenance − To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.

 Superior styles to HTML − CSS has a much wider array of attributes than HTML, so you can give
a far better look to your HTML page in comparison to HTML attributes.
Advantages of CSS
 Multiple Device Compatibility − Style sheets allow content to be optimized for more than one
type of device. By using the same HTML document, different versions of a website can be
presented for handheld devices such as PDAs and cell phones or for printing.

 Global web standards − Now HTML attributes are being deprecated and it is being recommended
to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible
to future browsers.
Basic Syntax of CSS
 A CSS rule has two main parts: a selector, and one or more declarations
 The selector can be HTML element, id or class.

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

 Each declaration consists of a property and a value.

 The property is the style attribute you want to change. Each property has a value.
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>
How are you
</h1>
Output
Hello Friends
How are you
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
Different ways to write CSS
 There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
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, and inline 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.
HTML

<p style="background: blue; color: white;"> My Inline CSS </p>

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
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's content!</p></body>
</html>
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>.
External Style Sheet
 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>
External Style Sheet
 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.
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?
Assign Multiple Classes
 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> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head> . class2
<body> {
text-align : center;
<h1 class=“class1 class2”> }
How are you?
</h1> Output

</body>
How are you?
</html>
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> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>
<h1>Hello Friends…</h1>
<div>
<h1>How are you?</h1> Output
</div> Hello Friends…
How are you?
</body>
</html>
Background Property
Property Name

 Background Color (background-color)

 Background Image (background-image)
 Background Image Repeat (background-repeat)
 Fixed Background Image (background-attachment)
 Background Image Positioning (background-position)
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);
}
Background Color
 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’);
}
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
{
background-image : url(‘pathToImage.jpg’);
background-repeat : repeat;
background-repeat : repeat-x;
background-repeat : repeat-y;
background-repeat : no-repeat;
}
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-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}
Background Image Positioning
 The background-position property sets the starting position of a background image.

test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;
background-position: top center;
}
CSS Font
 CSS font properties define the font family, boldness, size, and the style of a text.

Property Name

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)
CSS Font (Cont.)
h4{
 Font Color color : red;
 Set the text-color for different elements }

h4{
 Font Family font-family : sans-serif;
 The font family of a text is set with the font-family property. }

h4{
font-size: 120%;
 Font Size font-size : 10px;
font-size : small;
 The font-size property sets the size of the text.
font-size : smaller;
 font-size : 120% font-size : x-small;
 font-size : 10px; font-size : xx-small;
 font-size : x-large; font-size : large;
font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
}
CSS Font (Cont.)
 Font Style h4{
font-style: italic ;
 The font-style property is mostly used to specify italic text. }

 Font Weight h4{

 The font-weight property sets how thick or thin characters in text font-weight : 300;
font-weight : bolder;
should be displayed.
font-weight : lighter;
}
 Font Variant
 The font-variant property specifies whether or not a text should be h4{
displayed in a small-caps font. font-variant: small-caps;
 font-variant : small-caps;
}
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.

Property Name

1. Text Decoration (text-decoration)

2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
CSS Text Property (Cont.)
 Text Decoration h4{
 The text-decoration property is used to set or remove text-decoration : line-through;
decorations from text. text-decoration : overline;
text-decoration : underline;
 The text-decoration property is mostly used to remove
text-decoration : none;
underlines from links for design purposes. }

 Text Indent h4{

 The text-indentation property is used to specify the text-indent : 20px;
indentation of the first line of a text. text-indent : 30%;
}

 Text Align h4{

 The text-align property is used to set the horizontal text-align : right;
text-align : justify;
alignment of a text.
text-align : left;
text-align : center;
}
CSS Text Property (Cont.)
 Letter Spacing
 With the CSS attribute letter-spacing you are able to h4{
specify the exact value of the spacing between your letter-spacing : 3px;
}
letters.
 Letter-spacing should be defined with exact values.

 Line Height h4{

 The line-height attribute will set the height of the line in line-height : 10px;
the page. }
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.
The Box Model
 The image below illustrates the box model:

Margin
Border
Padding
Content
The Box Model
 The image below illustrates the box model:
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
CSS Padding
 The CSS padding properties define the space h4{
between the element border and the element padding : 10px;
}
content.

h4{
padding-top : 10px;
 The top, right, bottom, and left padding can be padding-right : 20px;
changed independently using separate properties. padding-bottom : 30 px;
padding-left : 40 px;
}

h4{
 A shorthand padding property can also be used, to padding : 10px 20px 30px 40px;
change all padding at once. }
CSS Margin
 The CSS margin properties define the space h4{
margin: 10px;
around elements }

h4{
margin -top : 10px;
 The top, right, bottom, and left margin can be margin -right : 20px;
changed independently using separate properties. margin -bottom : 30 px;
margin -left : 40 px;
}

h4{
 A shorthand margin property can also be used, to margin : 10px 20px 30px 40px;
}
change all margins at once.
CSS List
ul{
 The CSS list properties allow you to: list-style-type: circle;
 Set different list item markers for ordered & unordered list-style-type: disc;
lists list-style-type: square;
 Set an image as the list item marker list-style-type: armenian;
list-style-type: cjk-ideographic;
 Set the position of the marker
list-style-type: decimal-leading-zero;
list-style-type: georgian;
 CSS List Style Type list-style-type: hebrew;
list-style-type: katakana;
list-style-type: lower-greek;
}
 CSS List with Image
ol{
list-style-image : url(‘imgPath’);
 CSS List Position }

ol{
list-style-position : outside;
list-style-position : inside;
}
Styling Links
 Anchor/Link States a:link{
 The four links states are: color:#FF0000;
/*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 mouse over it text-decoration : none;
4. a:active - a link the moment it is clicked /*visited link*/
}
a:hover{
color:#00FF00;
/*mouse over link*/
}

a:active{
color:#0000FF;
/*selected link*/
}
CSS Positioning
 Absolute Positioning h1{
 With absolute positioning, you define the exact pixel value where position : absolute;
the specified HTML element will appear. left : 50px;
 The point of origin is the top-left of the browser's viewable area, so top : 100px;
}
be sure you are measuring from that point.

h1{
 Relative Positioning position : relative;
 Relative positioning changes the position of the HTML element left : 50px;
relative to where it normally appears. top : 100px;
}

 Fixed Positioning
h1{
 The element is positioned relative to the browser window, in fixed
position : fixed;
position, element will be in the same place even we scroll the top : 50px;
screen. left : 100px;
}
CSS Layers
 CSS allows you to control which item will appear on top with the use of CSS
layers. #division1{
position : absolute;
height : 100px;
 In CSS, each element is given a priority. width : 100px;
left : 100px;
top : 150px;
 If there are two overlapping CSS positioned elements, the element with background-color : red;
the higher priority will appear on top of the other. z-index : 5;
}
#division2{
 To manually define a priority, set the z-index value. The larger the value, position : absolute;
the higher the priority the element will have. height : 200px;
width : 200px;
HTML left : 50px;
top : 100px;
<div id="division1"> background-color : blue;
</div> z-index : 2;
<div id="division2"> }
</div>
CSS Float Property
 The CSS float property defines that an element should be taken out of HTML
the normal flow of the document and placed along the left or right side
<div id="division1">
of its containing block. ABC Content
</div>
<div id="division2">
 Text and inline elements will then wrap around this element. XYZ Content
</div>

CSS
#division1{
background-color : red;
float : left;
width: 40%;
}
#division2{
background-color : blue;
float : right;
width: 40%;
}
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.
Introduction to CSS3
 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
Advanced CSS3
 CSS3 Animations
 CSS3 Tooltip
 CSS3 Style Images
 CSS3 Variables
 CSS3 Flex box
 CSS3 Media Queries