Cascading Style Sheets
This document was uploaded by user and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this DMCA report form. Report DMCA
Overview
Download & View Cascading Style Sheets as PDF for free.
More details
- Words: 2,467
- Pages: 71
Cascading Style Sheets (CSS) -Tutorial - Lesson
Cascading Style Sheets (CSS) • Software yang dibutuhkan: browser dan teks editor • CSS adalah style language untuk mendefinisikan layout dokumen HTML ex. Fonts, colours, margins,lines, height, width, background images, advanced positions, etc..
Cascading Style Sheets (CSS) • Perbedaan CSS & HTML: HTML digunakan untuk membuat structure content. CSS digunakan untuk formatting structured content. • Keuntungan menggunakan CSS: – Mengkontrol layout banyak dokumen dari satu style sheet. – Lebih akurat dalam mengkontrol layout – Mengaplikasikan perbedaan layout ke berbagai jenis media ex. Screen, print, etc.. – Dapat menggunakan teknik-teknik tertentu.
HTML vs. XHTML • • •
Strict Transitional FramesetMy XHTML Page
Cara Kerja CSS • Sintaks dasar CSS: HTML -> CSS -> body {background-color: #FF0000;} Selector {property: value;} Lokasi tempat pemformatan dilakukan pada tag(s) HTML Yang dilakukan property Nilai dari property
Applying CSS to an HTML Document • In-line (the attribute style) Menggunakan atribut style HTML ex.Example
Applying CSS to an HTML Document •
Internal (the tag style) Menyertakan kode CSS menggunakan tag HTML <style> ex.Example <style type="text/css"> body {background-color: #FF0000;}
Applying CSS to an HTML Document • External (link to a style sheet) ex.
Applying CSS to an HTML DocumentMy document
...
Applying CSS to an HTML Document default.htmMy document
Colors & Backgrounds • • • • • • •
color background-color background-image background-repeat background-attachment background-position background
Colors & Backgrounds Foreground color: the 'color' property h1 { color: #ff0000; } Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors ("red") or rgbvalues (rgb(255,0,0)).
Colors & Backgrounds The 'background-color' property body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Background images [background-image] body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
Notice how we specified the location of the image as url("butterfly.gif"). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url("../images/butterfly.gif") or even on the Internet indicating the full address of the file: url("http://www.html.net/butterfly.gif").
Colors & Backgrounds Repeat background image [background repeat] Value background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat Example: body {
background-repeat: no repeat background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat;
} h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Lock background image [background-attachment] The property background-attachment specifies whether a background picture is fixed or scrolls (scroll) along with the containing element. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Place background image [background-position]
Value
Description
background-position: 2cm 2cm
The image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25%
The image is centrally positioned and one fourth down the page
background-position: top right
The image is positioned in the top-right corner of the page
Colors & Backgrounds body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Compiling [background]
With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read. background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Dapat di tulis langsung: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; Urutan: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] Apabila tidak diisi maka akan diset sebagai default.
Fonts • Font family [font-family] h1 {font-family: arial, verdana, sans-serif; } h2 {font-family: "Times New Roman", serif; }
Fonts Font style [font-style] The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with will be shown in italics. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; font-style: italic; } Layout: Heading 1 written in Arial And heading 2 in Times New Roman - italic
Fonts Font size [font-size] The size of a font is set by the property font-size. h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
Fonts Compiling [font] p{ font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Dapat dipersingkat: p { font: italic bold 30px arial, sans-serif; } Urutan: font-style | font-variant | font-weight | font-size | font-family
TEXT Text indention [text-indent] The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with
Identification and grouping of elements (class and id)
Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.
Identification and grouping of elements (class and id) Dalam HTML
Identification and grouping of elements (class and id) a{ color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }
Identification of element using id In addition to grouping elements, you might need to identify one unique element.
Identification of element using id Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS: #c1-2 { color: red; }
Grouping of elements (span and div) Grouping with <span> The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.
span.benefit { color:red; }
Grouping of elements (span and div) Grouping with
Cascading Style Sheets (CSS) • Software yang dibutuhkan: browser dan teks editor • CSS adalah style language untuk mendefinisikan layout dokumen HTML ex. Fonts, colours, margins,lines, height, width, background images, advanced positions, etc..
Cascading Style Sheets (CSS) • Perbedaan CSS & HTML: HTML digunakan untuk membuat structure content. CSS digunakan untuk formatting structured content. • Keuntungan menggunakan CSS: – Mengkontrol layout banyak dokumen dari satu style sheet. – Lebih akurat dalam mengkontrol layout – Mengaplikasikan perbedaan layout ke berbagai jenis media ex. Screen, print, etc.. – Dapat menggunakan teknik-teknik tertentu.
HTML vs. XHTML • • •
Strict Transitional Frameset
This is my first XHTML page.
Cara Kerja CSS • Sintaks dasar CSS: HTML -> CSS -> body {background-color: #FF0000;} Selector {property: value;} Lokasi tempat pemformatan dilakukan pada tag(s) HTML Yang dilakukan property Nilai dari property
Applying CSS to an HTML Document • In-line (the attribute style) Menggunakan atribut style HTML ex.
This is a red page
Applying CSS to an HTML Document •
Internal (the tag style) Menyertakan kode CSS menggunakan tag HTML <style> ex.
This is a red page
Applying CSS to an HTML Document • External (link to a style sheet) ex.
Applying CSS to an HTML Document
...
Applying CSS to an HTML Document default.htm
My first stylesheet
style.css body { background-color: #FF0000; }Colors & Backgrounds • • • • • • •
color background-color background-image background-repeat background-attachment background-position background
Colors & Backgrounds Foreground color: the 'color' property h1 { color: #ff0000; } Colors can be entered as hexadecimal values as in the example above (#ff0000), or you can use the names of the colors ("red") or rgbvalues (rgb(255,0,0)).
Colors & Backgrounds The 'background-color' property body { background-color: #FFCC66; } h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Background images [background-image] body { background-color: #FFCC66; background-image: url("butterfly.gif"); } h1 { color: #990000; background-color: #FC9804; }
Notice how we specified the location of the image as url("butterfly.gif"). This means that the image is located in the same folder as the style sheet. You can also refer to images in other folders using url("../images/butterfly.gif") or even on the Internet indicating the full address of the file: url("http://www.html.net/butterfly.gif").
Colors & Backgrounds Repeat background image [background repeat] Value background-repeat: repeat-x background-repeat: repeat-y background-repeat: repeat Example: body {
background-repeat: no repeat background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat;
} h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Lock background image [background-attachment] The property background-attachment specifies whether a background picture is fixed or scrolls (scroll) along with the containing element. body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; } h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Place background image [background-position]
Value
Description
background-position: 2cm 2cm
The image is positioned 2 cm from the left and 2 cm down the page
background-position: 50% 25%
The image is centrally positioned and one fourth down the page
background-position: top right
The image is positioned in the top-right corner of the page
Colors & Backgrounds body { background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; } h1 { color: #990000; background-color: #FC9804; }
Colors & Backgrounds Compiling [background]
With background you can compress several properties and thereby write your style sheet in a shorter way which makes it easier to read. background-color: #FFCC66; background-image: url("butterfly.gif"); background-repeat: no-repeat; background-attachment: fixed; background-position: right bottom; Dapat di tulis langsung: background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom; Urutan: [background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position] Apabila tidak diisi maka akan diset sebagai default.
Fonts • Font family [font-family] h1 {font-family: arial, verdana, sans-serif; } h2 {font-family: "Times New Roman", serif; }
Fonts Font style [font-style] The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with
will be shown in italics. h1 { font-family: arial, verdana, sans-serif; } h2 { font-family: "Times New Roman", serif; font-style: italic; } Layout: Heading 1 written in Arial And heading 2 in Times New Roman - italic
Fonts Font variant [font-variant] The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. h1 { font-variant: small-caps; } h2 { font-variant: normal; }
Fonts Font weight [font-weight] The property font-weight describes how bold or "heavy" a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font Ex. p{ font-family: arial, verdana, sans-serif; } td { font-family: arial, verdana, sans-serif; font-weight: bold; }
Fonts Font weight - Lesson 4, Example 4 | CSS Tutorial | HTML.net <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
| Text in bold in the cells |
Normal text here
Fonts Font size [font-size] The size of a font is set by the property font-size. h1 {font-size: 30px;} h2 {font-size: 12pt;} h3 {font-size: 120%;} p {font-size: 1em;}
Fonts Compiling [font] p{ font-style: italic; font-weight: bold; font-size: 30px; font-family: arial, sans-serif; } Dapat dipersingkat: p { font: italic bold 30px arial, sans-serif; } Urutan: font-style | font-variant | font-weight | font-size | font-family
TEXT Text indention [text-indent] The property text-indent allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a 30px is applied to all text paragraphs marked with
: p{ text-indent: 30px; }
TEXT Text alignment [text-align] th { text-align: right; } td { text-align: center; } p{ text-align: justify; }
TEXT Text decoration [text-decoration] h1 { text-decoration: underline; } h2 { text-decoration: overline; } h3 { text-decoration: line-through; }
TEXT Letter space [letter-spacing] h1 { letter-spacing: 6px; } p{ letter-spacing: 3px; }
TEXT Text transformation [text-transform] The text-transform property controls the capitalization of a text. You can choose to capitalize, use uppercase or lowercase regardless of how the original text is looks in the HTML code. •
capitalize –
•
uppercase –
•
Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE".
lowercase –
•
Capitalizes the first letter of each word. For example: "john doe" will be "John Doe".
Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe".
none –
No transformations - the text is presented as it appears in the HTML code.
h1 { text-transform: uppercase; } li { text-transform: capitalize; }
Links a{ color: blue; } a:link { color: blue; } a:visited { color: red; } a:active { background-color: #FFFF00; } a:hover { color: orange; font-style: italic; }
Links a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; } Menghilangkan garis bawah pada link a{ text-decoration:none; }
Identification and grouping of elements (class and id) Grouping elements with class Ex. In HTML
Grapes for white wine:
Grapes for red wine:
Identification and grouping of elements (class and id)
Then we want the white wine links to be yellow, the red wine links to be red and the rest of the existing links on the webpage to stay blue.
Identification and grouping of elements (class and id) Dalam HTML
Grapes for white wine:
Grapes for red wine:
Identification and grouping of elements (class and id) a{ color: blue; } a.whitewine { color: #FFBB00; } a.redwine { color: #800000; }
Identification of element using id In addition to grouping elements, you might need to identify one unique element.
Chapter 1
...Chapter 1.1
...Chapter 1.2
...Chapter 2
...Chapter 2.1
...Chapter 2.1.2
…Chapter 1
...Chapter 1.1
...Chapter 1.2
...Chapter 2
...Chapter 2.1
...Chapter 2.1.2
...Identification of element using id Let us say that the headline for chapter 1.2 must be in red. This can be done accordingly with CSS: #c1-2 { color: red; }
Grouping of elements (span and div) Grouping with <span> The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.
Early to bed and early to rise makes a man <spanclass="benefit">healthy, <span class="benefit">wealthy and <span class="benefit">wise.
span.benefit { color:red; }
Grouping of elements (span and div) Grouping with
Whereas <span> is used within a block-level element as seen in the previous example,
is used to group one or more block-level elements.
Grouping of elements (span and div) #democrats { background:blue; } #republicans { background:red; }
The box model The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:
The box model
Margin and padding Set the margin in an element An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document)
Margin and padding CSS code: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Kompilasi: body { margin: 100px 40px 10px 70px; }
Margin and padding body { margin: 100px 40px 10px 70px; } p{ margin: 5px 50px 5px 50px; }
Margin and padding Set padding in an element Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. h1 { background: yellow; } h2 { background: orange; }
Margin and padding h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }
Borders The width of borders [border-width]
Borders The color of borders [border-color] The property border-color defines which Borders color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow"
Borders Types of borders [border-style]
Borders Examples of defining borders p{
h1 {
border-width: 1px; border-style: dashed; border-color: blue;
border-width: thick; border-style: dotted; border-color: gold; } ul {
} h2 {
border-width: thin; border-style: solid; border-color: orange;
border-width: 20px; border-style: outset; border-color: red; }
}
Borders h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Borders Compilation [border] p{ border-width: 1px; border-style: solid; border-color: blue; } Dikompilasi: p{ border: 1px solid blue; }
Height and width Setting the width [width] div.box { width: 200px; border: 1px solid black; background: orange; }
Height and width Setting the height [height] div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
Floating elements (floats) An element can be floated to the right or to left by using the property float
Floating elements (floats) 
Floating elements (floats) Another example: columns HTML Code:
Floating elements (floats) CSS Code float can be set as either left, right or none. #column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; }
Floating elements (floats)
Floating elements (floats) The property clear The clear property is used to control how the subsequent elements of floated elements in a document shall behave.
Floating elements (floats) #picture { float:left; width: 100px; } .floatstop { clear:both; }
Positioning of elements The principle behind CSS positioning h1 { position:absolute; top: 100px; left: 200px; }
Positioning of elements Absolute positioning #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }
Positioning of elements
Layer on layer with z-index (Layers) #ten_of_diamonds { position: absolute; left: 100px; bottom: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; bottom: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; bottom: 130px; z-index: 3; }
#king_of_diamonds { position: absolute; left: 145px; bottom: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; bottom: 160px; z-index: 5; }
Layer on layer with z-index (Layers) 
Web-standards and validation • W3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others) • The idea of having standards is to agree upon a common denominator on how to use web technologies
Web-standards and validation CSS validator To make it easier to observe the CSS standard, W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validate http://jigsaw.w3.org/css-validator/
- Franklin D. Roosevelt
- Harry S. Truman
- John F. Kennedy
- Lyndon B. Johnson
- Jimmy Carter
- Bill Clinton
- Dwight D. Eisenhower
- Richard Nixon
- Gerald Ford
- Ronald Reagan
- George Bush
- George W. Bush
Grouping of elements (span and div) #democrats { background:blue; } #republicans { background:red; }
The box model The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed:
The box model
Article 1:
All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood
Margin and padding Set the margin in an element An element has four sides: right, left, top and bottom. The margin is the distance from each side to the neighboring element (or the borders of the document)
Margin and padding CSS code: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Kompilasi: body { margin: 100px 40px 10px 70px; }
Margin and padding body { margin: 100px 40px 10px 70px; } p{ margin: 5px 50px 5px 50px; }
Margin and padding Set padding in an element Padding can also be understood as "filling". This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. h1 { background: yellow; } h2 { background: orange; }
Margin and padding h1 { background: yellow; padding: 20px 20px 20px 80px; } h2 { background: orange; padding-left:120px; }
Borders The width of borders [border-width]
Borders The color of borders [border-color] The property border-color defines which Borders color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow"
Borders Types of borders [border-style]
Borders Examples of defining borders p{
h1 {
border-width: 1px; border-style: dashed; border-color: blue;
border-width: thick; border-style: dotted; border-color: gold; } ul {
} h2 {
border-width: thin; border-style: solid; border-color: orange;
border-width: 20px; border-style: outset; border-color: red; }
}
Borders h1 { border-top-width: thick; border-top-style: solid; border-top-color: red; border-bottom-width: thick; border-bottom-style: solid; border-bottom-color: blue; border-right-width: thick; border-right-style: solid; border-right-color: green; border-left-width: thick; border-left-style: solid; border-left-color: orange; }
Borders Compilation [border] p{ border-width: 1px; border-style: solid; border-color: blue; } Dikompilasi: p{ border: 1px solid blue; }
Height and width Setting the width [width] div.box { width: 200px; border: 1px solid black; background: orange; }
200px width <div> with text
Text
Height and width Setting the height [height] div.box { height: 500px; width: 200px; border: 1px solid black; background: orange; }
200px width and 500px height <div> with text
Text
Floating elements (floats) An element can be floated to the right or to left by using the property float
Floating elements (floats)
causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
#picture { float:left; width: 100px; }Floating elements (floats) Another example: columns HTML Code:
Haec disserens qua de re agatur et in quo causa consistat non videt...
causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
nam nihil esset in nostra potestate si res ita se haberet...
Floating elements (floats) CSS Code float can be set as either left, right or none. #column1 { float:left; width: 33%; } #column2 { float:left; width: 33%; } #column3 { float:left; width: 33%; }
Floating elements (floats)
Floating elements (floats) The property clear The clear property is used to control how the subsequent elements of floated elements in a document shall behave.
Bill Gates
causas naturales et antecedentes, idciro etiam nostrarum voluntatum...
Floating elements (floats) #picture { float:left; width: 100px; } .floatstop { clear:both; }
Positioning of elements The principle behind CSS positioning h1 { position:absolute; top: 100px; left: 200px; }
Positioning of elements Absolute positioning #box1 { position:absolute; top: 50px; left: 50px; } #box2 { position:absolute; top: 50px; right: 50px; } #box3 { position:absolute; bottom: 50px; right: 50px; } #box4 { position:absolute; bottom: 50px; left: 50px; }
Positioning of elements
Layer on layer with z-index (Layers) #ten_of_diamonds { position: absolute; left: 100px; bottom: 100px; z-index: 1; } #jack_of_diamonds { position: absolute; left: 115px; bottom: 115px; z-index: 2; } #queen_of_diamonds { position: absolute; left: 130px; bottom: 130px; z-index: 3; }
#king_of_diamonds { position: absolute; left: 145px; bottom: 145px; z-index: 4; } #ace_of_diamonds { position: absolute; left: 160px; bottom: 160px; z-index: 5; }
Layer on layer with z-index (Layers)
Web-standards and validation • W3C is the World Wide Web Consortium, which is an independent organization that manages code standards on the web (e.g. HTML, CSS, XML and others) • The idea of having standards is to agree upon a common denominator on how to use web technologies
Web-standards and validation CSS validator To make it easier to observe the CSS standard, W3C has made a so-called validator which reads your stylesheet and returns a status listing errors and warnings, if your CSS does not validate http://jigsaw.w3.org/css-validator/
Related Documents
Cascading Style Sheets
November 2019 22
Cascading Style Sheets
June 2020 15
Cascading Style Sheets
November 2019 45
Cascading Style Sheets (css)
December 2019 56
Cascading Style Sheets And Themes
July 2020 11