iFour ConsultancyCascading Style Sheet (CSS)

 Introduction of CSS
 Style Sheet Syntax
 Selectors
 Values in CSS Rule
 Linking HTML and CSS
 Inline Style
 External Style
 Text-related CSS properties
 CSS Rule for Fonts
 Background
 Borders
 Width and Height
 Margins and Paddings and Float
 Benefits of CSS
 New Features in CSS3
INDEX
http://www.ifourtechnolab.com/ C# Software Development Companies India

Cascading Style Sheets (CSS)
 Cascading Style Sheets (CSS)
• Used to describe the presentation of documents
• Define sizes, spacing, fonts, colors, layout, etc.
• Improve content accessibility and flexibility
 Designed to separate presentation from content
 CSS style sheets are the modern way to control the appearance and layout of your web pages
 4.0 and up Navigator and IE fully support CSS
 They are used to control how elements are presented in the Web page
 Work with the common visual browsers (Internet Explorer, Firefox, Opera)
 Used properly, can great simplify visual design, site management and content maintenance
http://www.ifourtechnolab.com/ C# Software Development Companies India

Style Sheets Syntax
 Style sheets consist of rules, selectors, declarations, properties and values
 Selectors are separated by commas
 Declarations are separated by semicolons
 Properties and values are separated by colons
4
h1,h2,h3 { color: green; font-weight: bold; }
http://www.ifourtechnolab.com/ C# Software Development Companies India

Selectors
 Determines which element the rule applies to:
• All elements of specific type (tag)
• Those that mach a specific attribute (id, class)
• Elements may be matched depending on how they are nested in the document tree (HTML)
 Examples:
5
.header a { color: green }
#menu>li { padding-top: 8px }
http://www.ifourtechnolab.com/ C# Software Development Companies India

Selectors
 Three primary kinds of selectors:
• By tag (type selector):
• By element id:
• By element class name (only for HTML):
 Selectors can be combined with commas:
This will match <h1> tags, elements with class link, and element with id top-link
6
h1 { font-family: verdana,sans-serif; }
#element_id { color: #ff0000; }
.myClass {border: 1px solid red}
h1, .link, #top-link {font-weight: bold}
http://www.ifourtechnolab.com/ C# Software Development Companies India

Selectors
 Pseudo-classes define state
• :hover, :visited, :active , :lang
 Pseudo-elements define element "parts" or are used to generate content
• :first-line , :before, :after
7
a:hover { color: red; }
p:first-line { text-transform: uppercase; }
.title:before { content: "»"; }
.title:after { content: "«"; }
http://www.ifourtechnolab.com/ C# Software Development Companies India

Selectors
 Match relative to element placement:
This will match all <a> tags that are inside of <p>
 * – universal selector (avoid or use with care!):
This will match all descendants of <p> element
 + selector – used to match “next sibling”:
This will match all siblings with class name link that appear immediately after <img> tag
8
p a {text-decoration: underline}
p * {color: black}
img + .link {float:right}
http://www.ifourtechnolab.com/ C# Software Development Companies India

Selectors
 > selector – matches direct child nodes:
This will match all elements with class error, direct children of <p> tag
 [ ] – matches tag attributes by regular expression:
This will match all <img> tags with alt attribute containing the word logo
 .class1.class2 (no space) - matches elements with both (all) classes applied at the same
time
9
p > .error {font-size: 8px}
img[alt~=logo] {border: none}
http://www.ifourtechnolab.com/ C# Software Development Companies India

Values in the CSS Rules
 Colors are set in RGB format (decimal or hex):
• Example: #a0a6aa = rgb(160, 166, 170)
• Predefined color aliases exist: black, blue, etc.
 Numeric values are specified in:
• Pixels, ems, e.g. 12px , 1.4em
• Points, inches, centimeters, millimeters
• E.g. 10pt , 1in, 1cm, 1mm
• Percentages, e.g. 50%
• Percentage of what?
• Zero can be used with no unit: border: 0;
10
http://www.ifourtechnolab.com/ C# Software Development Companies India

Linking HTML and CSS
 HTML (content) and CSS (presentation) can be linked in three ways:
• Inline: the CSS rules in the style attribute
• No selectors are needed
• Embedded: in the <head> in a <style> tag
• External: CSS rules in separate file (best)
• Usually a file with .css extension
• Linked via <link rel="stylesheet" href=…> tag or @import directive in embedded CSS
block
 Using external files is highly recommended
• Simplifies the HTML document
• Improves page load speed as the CSS file is cached
11
http://www.ifourtechnolab.com/ C# Software Development Companies India

Inline Styles: Example
12
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Inline Styles</title>
</head>
<body>
<p>Here is some text</p>
<!--Separate multiple styles with a semicolon-->
<p style="font-size: 20pt">Here is some
more text</p>
<p style="font-size: 20pt;color:
#0000FF" >Even more text</p>
</body>
</html>
inline-styles.html
http://www.ifourtechnolab.com/ C# Software Development Companies India

External CSS Styles
 External linking
• Separate pages can all use a shared style sheet
• Only modify a single file to change the styles across your entire Web site (see
http://www.csszengarden.com/)
 link tag (with a rel attribute)
• Specifies a relationship between current document and another document
• link elements should be in the <head>
13
<link rel="stylesheet" type="text/css” href="styles.css">
http://www.ifourtechnolab.com/ C# Software Development Companies India

External CSS Styles: Example
14
/* CSS Document */
a { text-decoration: none }
a:hover { text-decoration: underline;
color: red;
background-color: #CCFFCC }
li em { color: red;
font-weight: bold }
ul { margin-left: 2cm }
ul ul { text-decoration: underline;
margin-left: .5cm }
styles.css
http://www.ifourtechnolab.com/ C# Software Development Companies India

Text-related CSS Properties
 color – specifies the color of the text
 font-size – size of font: xx-small, x-small, small, medium, large, x-large, xx-large, smaller,
larger or numeric value
 font-family – comma separated font names
• Example: verdana, sans-serif, etc.
• The browser loads the first one that is available
• There should always be at least one generic font
 font-weight can be normal, bold, bolder, lighter or a number in range [100 … 900]
15
http://www.ifourtechnolab.com/ C# Software Development Companies India

CSS Rules for Fonts
 font-style – styles the font
• Values: normal, italic, oblique
 text-decoration – decorates the text
• Values: none, underline, line-trough, overline, blink
 text-align – defines the alignment of text or other content
• Values: left, right, center, justify
16
http://www.ifourtechnolab.com/ C# Software Development Companies India

Backgrounds
 background-image
• URL of image to be used as background, e.g.:
 background-color
• Using color and image and the same time
 background-repeat
• repeat-x, repeat-y, repeat, no-repeat
 background-attachment
• fixed / scroll
17
background-image:url("back.gif");
http://www.ifourtechnolab.com/ C# Software Development Companies India

Borders
 border-width: thin, medium, thick or numerical value (e.g. 10px)
 border-color: color alias or RGB value
 border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
 Each property can be defined separately for left, top, bottom and right
• border-top-style, border-left-color, etc
18
http://www.ifourtechnolab.com/ C# Software Development Companies India

Borders
 border-width: thin, medium, thick or numerical value (e.g. 10px)
 border-color: color alias or RGB value
 border-style: none, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset
 Each property can be defined separately for left, top, bottom and right
• border-top-style, border-left-color, etc
19
http://www.ifourtechnolab.com/ C# Software Development Companies India

Width and Height
 width – defines numerical value for the width of element, e.g. 200px
 height – defines numerical value for the height of element, e.g. 100px
• By default the height of an element is defined by its content
• Inline elements do not apply height, unless you change their display style.
20
http://www.ifourtechnolab.com/ C# Software Development Companies India

Margin and Padding
 margin and padding define the spacing around the element
• Numerical value, e.g. 10px or -5px
• Can be defined for each of the four sides separately - margin-top, padding-left, …
• margin is the spacing outside of the border
• padding is the spacing between the border and the content
• What are collapsing margins?
21
http://www.ifourtechnolab.com/ C# Software Development Companies India

Float
 float: the element “floats” to one side
• left: places the element on the left and following content on the right
• right: places the element on the right and following content on the left
• floated elements should come before the content that will wrap around them in the code
• margins of floated elements do not collapse
• floated inline elements can apply height
22
http://www.ifourtechnolab.com/ C# Software Development Companies India

Benefits of using CSS
 More powerful formatting than using presentation tags
 Your pages load faster, because browsers cache the .css files
 Increased accessibility, because rules can be defined according given media
 Pages are easier to maintain and update
23
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Selectors
 Using these selectors you can choose DOM elements based on their attributes. So you don't
need to specify classes and IDs for every element. Instead, you can utilize the attribute field to
style them.
 CSS
 Html
New Features in CSS3
<style> p[title^="car"] {color: red;} img[src*="birth"] {border:3px solid green;} </style>
<div class="code">
<img src="happy_birthdays.jpg" />
<p title="container">Displaying a container. And this attribute won't match me. </p>
<p title="carousel">This carousel will match</p>
</div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Border Image
 The property border-image allows you to specify an image to display instead of a plain solid-
colored border.
 CSS
 Html
New Features in CSS3
<style>
#col { border-image:url(border_image.png) 100 100 100 100 round round; border-
width: 10px; }
</style>
<div class="code"><div id="col">my content</div></div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Gradient
 A box shadow allows you to create a drop shadow for an element.
 CSS
 Html
New Features in CSS3
<style>
#gradient { background-image: -webkit-gradient(linear,left bottom,left top,color-
stop(0, #E6C674),color-stop(1, #F7ECCA)); background-image: -moz-linear-
gradient(center bottom , #E6C674 0pt, #F7ECCA 100%); height: 50px;}
</style>
<div class="code">
<p id="gradient">My text is more beautiful, than a normal webfont</p>
</div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Transform
 Transform enables rotating Web elements on a webpage. As of now, if a designer wants to
rotate of an element, he or she uses JavaScript.
 CSS
 Html
New Features in CSS3
<style>
p{ -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg);}
</style>
<div class="code">
<p>I can rotate this element, by 180degree using -moz-transform property</p>
</div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Rounded Corners
 CSS 3 addresses this problem by introducing the border-radius property, which gives you the
same rounded-corner effect and you don't have to write all the code.
 CSS
 Html
New Features in CSS3
<style>
.box{ border: 2px solid orange; border-radius : 25px; width: 100px; padding: 10px;
text-align:center; }
</style>
<div class="code"><div class="box">Submit</div></div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Box Shadow
 A box shadow allows you to create a drop shadow for an element.
 CSS
 Html
New Features in CSS3
<style>
.shadow{ background-color: #EEEEEE; box-shadow:3px 3px 3px 2px #797979; height:
50px; width: 100px; padding: 5px;}
</style>
<div class="code"><div class="shadow"> my content </div></div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Text Shadow
 The new text-shadow property allows you to add drop shadows to the text on a webpage.
 CSS
 Html
New Features in CSS3
<style>
p{ text-shadow: #aaa 2px 2px 2px; }
</style>
<div class="code"><p>My text is more beautiful, than a normal webfont</p></div>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Multicolumn Layout
 Almost every webpage today is divided into columns or boxes, and adjusting these boxes so
they display correctly on different browsers takes a toll on Web designers. CSS 3 solves this
problem with the multicolumn layout property
 CSS
 Html
New Features in CSS3
<div class="code"><div id="col"> text truncated, due to length</div></div>
<style>
#col{-moz-column-count:3;-webkit-column-count:3;}
</style>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 Web Fonts
 CSS 3 also facilitates embedding any custom font on a webpage.
 Fonts are dependent on the client system and Web pages can render only fonts that are
supported by the browser or the client machine.
 By using the @font-face property. This is really helpful in regional websites, where it provides
support to various region-specific fonts such as Japanese, Devanagari, and so on
 CSS
New Features in CSS3
<style>
@font-face { src: url("myfont.ttf"); font-family: "myfont_bold"; }
</style>
http://www.ifourtechnolab.com/ C# Software Development Companies India

 http://www.w3schools.com/css/
 https://www.tutorialspoint.com/css/index.htm
 http://www.w3schools.com/css/css3_intro.asp
 https://www.tutorialspoint.com/css/css3_tutorial.htm
References
http://www.ifourtechnolab.com/ C# Software Development Companies India

Questions?
http://www.ifourtechnolab.com/ C# Software Development Companies India