Scribd
Upload
34 views

Cascading Style Sheets (CSS) : Desain Web - SIF15012 Aryo Pinandito, ST, M.MT

The document provides an introduction to Cascading Style Sheets (CSS) including what CSS is, how style sheets are structured using rules and declarations, the three scopes of CSS (local, internal, external), selector types, values for properties like lengths, colors, strings, and positioning properties. It also discusses the CSS box model and provides examples of how to style text, lists, images, and position elements using CSS.

Uploaded by

Novia Indahsari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
34 views

Cascading Style Sheets (CSS) : Desain Web - SIF15012 Aryo Pinandito, ST, M.MT

The document provides an introduction to Cascading Style Sheets (CSS) including what CSS is, how style sheets are structured using rules and declarations, the three scopes of CSS (local, internal, external), selector types, values for properties like lengths, colors, strings, and positioning properties. It also discusses the CSS box model and provides examples of how to style text, lists, images, and position elements using CSS.

Uploaded by

Novia Indahsari
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

Cascading Style

Sheets (CSS)
Desain Web – SIF15012
Aryo Pinandito, ST, M.MT
Introduction to CSS
What is CSS?
—  Cascading Style Sheets (CSS):
is a simple mechanism for
adding style (e.g. fonts, colors,
layouts) to Web documents.

—  Styles provide powerful control


over the presentation of web
pages.
Internal Style Sheet
—  A style sheet consists of a set of rules.
—  Each rule consists of one or more selectors and a
declaration block.

—  A declaration block consists of a list of


declarations in curly braces ({}).

—  Each declaration consists of a property, a colon (:),


a value, then a semi-colon (;).
Style Sheet Syntax

selector { property: value; }


Three Scopes of CSS
—  Local
—  confined to a single element (tag)

—  Internal
—  affect elements in an entire page
—  External
—  can affect multiple pages
—  Precedence
—  Local > Internal > External
Local Style Sheet
—  Example
<h1  style="color:white;  background:orange;  font-­‐
weight:bold;">Internal  Style  Sheet  Applied  to  Header  
1</h1>  

—  Practice
—  add “text-align” property to make it centered
—  add “border” property to let it has black, 1px thick, solid
border at left, right, top, and bottom

—  Tip: use “border:  <top>  <right>  <bottom>  <left>;”


format for 4 sides; use “border-<side>: xx yy zz;” for a
particular side, where <side> can be left, right, top or
bottom. Can apply to other similar properties.
Internal Style Sheet
—  How to create?
—  Put <style>  </style> tag between
<head>  and  </head> tags of your HTML page
—  Use type attribute to indicate the style sheet type,
usually type=“text/css”  
—  Specify a default style sheet language for the whole
document by
<meta  http-­‐equiv="Content-­‐Style-­‐Type"  
content="text/css"  />  
—  Put your set of style sheet rules in between <style>
and </style> tags
Internal Style Sheet
—  Practice
—  Create same style in the example in the local style
sheet section, but using internal style sheet instead.
External Style Sheet
—  An external style sheet is simply a text-only file that
contains only CSS rules.

—  How to link to external style sheet?


—  <link  href=“URL  of  CSS  File"  rel="stylesheet"  
type="text/css"  />  

—  Practice
—  Create a file called “mystyle.css” and do the
example in local style sheet, but as external style
sheet
Selector Type
—  Tag
—  redefines the look of a specific tag
body  {background-­‐color:  #000000;}  

—  Class
—  can apply to any tag
.indent{margin-­‐right:5%;margin-­‐left:  5%;}  
In HTML, <p  class="indent">  

—  Advanced
—  IDs, pseudo-class selectors
#myId  {  color:  #38608A;  }  
a:hover  {  color:  #FF0000;  }  
Values - Lenghts
—  Lengths [a number + unit identifier]
—  Unit identifier can be
em (font size of the relevant font),
ex (x-height of the relevant font),
px (pixels),
in (inches), cm (centimeter), mm,
pt (points, =1/72 in), pc (picas, 1 pc = 12 pt)
—  E.g.
h1  {  margin:  0.5em  },  h1  {  margin:  1ex  },  
p  {  font-­‐size:  12px  },  h2  {  line-­‐height:  3cm  },    
h4  {  font-­‐size:  12pt  },  h4  {  font-­‐size:  1pc  }  
Values – Percentages &
URIs
—  Percentages [a number + %]
—  p  {  line-­‐height:  120%  }  

—  URLs & URIs


—  url(“<A URI/URL>”), or
—  url(<A URI/URL>)
—  li  {  list-­‐style:  url(http://ptiik.ub.ac.id/image/
bullet2.jpg)  disc  }  
—  body  {  background:  url("yellow.png")  }
Note: “yellow.png” location is relative to the URI of the
style sheet.
Values - Colors
—  Colors
—  A color is either a keyword (e.g. white, red), or a
numerical RGB specification (e.g. ).
—  A numerical RGB specification can be:
—  An RGB value in hexadecimal notation, which is a ‘#’
immediately followed by a 6 digit or 3 digit
hexadecimal number, i.e.
#rrggbb or #rgb.
e.g. #ff0000, #f00  
—  An RGB value in functional notation, i.e.
rgb(rrr,ggg,bbb),  rgb(r%,g%,b%)
e.g. rgb(255,0,0),  rgb(100%,0%,0%)  
Values - Colors
—  16 original predefined color codes (names)
—  http://www.elizabethcastro.com/html/colors/
sixteencolors.html

—  216 browser safe colors


—  Colors display correctly on all color monitors
—  http://webdesign.about.com/od/colorcharts/l/
bl_colors.htm
Values - Strings
—  String
—  Sequence of characters written inside double quotes
("") or single quotes ('').

—  Examples
"this  is  a  'string'"    
"this  is  a  \"string\""  
'this  is  a  "string"'  
'this  is  a  \'string\''  
CSS Box Model
Box Model
Box Properties
—  margin : <length>
—  border : <style> <width> <color>
—  padding : <length>
—  width & height : <length>
—  Examples: p  {  
 margin:  50px;  
 padding:  30px;  
 float:  right;  
 height:  200px;  
 width:  400px;  
 border:  5px  solid  #006633;  
}
Box Properties
—  Practice
—  Create an internal style called “boxStyle”
—  Insert an image that fits into one page.
—  Apply the “boxStyle” to the image
—  Color value: #9DACBF
Text Properties
—  font-family : <font name>, | <font name>, …
—  font-size : <length> | <percentage> | inherit
—  font-weight : normal | bold | lighter | 100 | 200 ...
—  normal = 400, bold = 700, lighter is relative

—  font-style : normal | italic | oblique | inherit


—  line-height : normal | <length> | <percentage> | inherit
—  text-transform : capitalize | uppercase | lowercase | none | inherit
—  color : <color>
—  text-indent : <length> | <percentage> | inherit
—  text-align : left | right | center | justify | inherit
Text Properties Practice
—  Practice
—  Create a paragraph text
—  Create internal style for <p> tag as following
p  {  
 margin:  50px;  
 padding:  50px;  
 clear:  right;  
 float:  right;  
 border:  10px  solid  #0066CC;  
}
—  Create a internal style called “textStyle” and apply it
to paragraph text
Text Properties Practice

Color is #666666; font-family is Arial, Helvetica, sans-


serif; text-indent is 20%;
Positioning Properties
—  height : <length> | <percentage> | inherit
—  width : <length> | <percentage> | inherit
—  left : <length> | <percentage> | auto | inherit
—  top : <length> | <percentage> | auto | inherit
—  right : <length> | <percentage> | auto | inherit
—  bottom : <length> | <percentage> | auto | inherit
—  position : static | relative | absolute | fixed | inherit
—  left/top/right/bottom usually used when position is
specified as absolute.
Values for position property
—  static
—  Default. An element with position: static always has the position the normal
flow of the page gives it (a static element ignores any top, bottom, left, or right
declarations)

—  relative
—  An element with position: relative moves an element relative to its normal
position, so "left:20" adds 20 pixels to the element's LEFT position

—  absolute
—  An element with position: absolute is positioned at the specified coordinates
relative to its containing block. The element's position is specified with the
"left", "top", "right", and "bottom" properties

—  fixed
—  An element with position: fixed is positioned at the specified coordinates
relative to the browser window. The element's position is specified with the
"left", "top", "right", and "bottom" properties. The element remains at that
position regardless of scrolling. Works in IE7 (strict mode)
Positioning Properties
—  A floated box is shifted to the left or right until its
outer edge touches the containing block edge or the
outer edge of another float.

—  Example
.positionStyle  {  
 height:  400px;  
 width:  200px;  
 left:  50px;  
 top:  50px;  
 right:  50px;  
 bottom:  50px;  
 position:absolute;  
 float:  right;  
}
Positioning Properties
—  Practice – thumbnail image
—  Create a table with only one cell
—  Insert the following image 10 times inside the only
cell of the table.

—  Create a rule called “.thumbImg” which floats to left,


has a margin of 20 pixels on the top & bottom and
15 pixels on the left & right; has a 5-pixel solid border
with silver color
—  Apply the rule to all the 10 images
List Properties
—  list-style: [disc | circle | square | decimal | lower-
roman | upper-roman | lower-alpha | upper-alpha |
none] || [inside | outside] || [<url> | none]
—  Example
li  {    
   list-­‐style:  url(https://cdn1.iconfinder.com/data/  
   icons/Momentum_GlossyEntireSet/32/bullet-­‐  
   black.png)  disc  inside;    
}  

—  Can use the list-style-type, list-style-image, list-


style-position separately.
List Properties
—  Difference between inside and outside

Outside
Background Properties
—  background-­‐color:  <color>  |  transparent  |  
inherit  
—  background-­‐image:  <uri>  |  none  |  inherit  
—  background-­‐position:  [[  <percentage>  |  <length>  
|  left  |  center  |  right  ]  [<percentage>  |  
<length>  |  top  |  center  |  bottom  ]?  ]  |  [  [  left  
|  center  |  right  ]  ||  [  top  |  center  |  
bottom  ]  ]  |  inherit  
—  background-­‐repeat:  repeat  |  repeat-­‐x  |  repeat-­‐y  
|  no-­‐repeat  |  inherit  
—  background-­‐attachment:  scroll  |  fixed  |  inherit  
Background Properties
—  Practice

body  {  
 background-­‐image:    url(http://ptiik.ub.ac.id/labkcv/
assets/img/logo.png);  
 background-­‐repeat:no-­‐repeat;  
 color:  #FFFFFF;  
 background-­‐position:center  center;  
 background-­‐color:  #666666;  
 background-­‐attachment:  fixed;  
}  
<div> and <span> tags
—  <div>  
—  is a generic block-level tag

—  <span>  
—  is a generic inline tag, it spans a series of characters
—  Example
.subTitle  {  
 font-­‐family:  Georgia,  Times,  serif;  
 font-­‐size:  14px;  font-­‐weight:  bold;  
color:  #960000;  
}
<p>blah blah blah <span class="subTitle">some text in
different style</span> text text text text</p>
Assignment
Assignment: CSS
—  From the previous assignments, apply CSS to
beautify the page.
—  Apply CSS for:
—  Fonts
—  Color
—  Background
—  Border
—  Floats
Any Questions?

You might also like