Presentation is loading. Please wait.

Presentation is loading. Please wait.

Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web.

Published byBarnard Hopkins Modified over 8 years ago

Similar presentations

Presentation on theme: "Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web."— Presentation transcript:

1 Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web

2 1. Float an image to the right Apply float: right to the image – float: right; Add margin – margin: 0 0 10px 10px; Add a border – border: 1px solid #666; Add padding – padding: 2px;

3 CSS CODE.floatright { float: right; margin: 0 0 10px 10px; border: 1px solid #666; padding: 2px; } HTML CODE Lorem ipsum dolor sit amet, consectetuer...

4 2. Floating an image and caption Add a div around image and caption – Apply "float: right" and width to the div – float: right; width: 100px; Apply margin to the div – margin: 0 0 10px 10px; Add a background color – background-color: #ddd; Add padding – padding: 10px; Add a border to the div – border: 1px solid #666; Add a border to the image – width: 102px; div.floatright img { border: 1px solid #000; } Remove margin-top on the paragraph – p { margin-top: 0; }

5 CSS CODE.floatright { float: right; width: 103px; margin: 0 0 10px 10px; background-color: #fff; padding: 10px; border-top: 1px solid #999; border-right: 2px solid #555; border-bottom: 2px solid #555; border-left: 1px solid #999; } p { margin-top: 0; } HTML CODE Caption here Lorem ipsum dolor sit amet, consectetuer...

6 3. Floating a series of "clear: right" images Apply float: right to the images –.floatright { float: right; } Add margin – margin: 0 0 10px 10px; Add "clear: right“ – clear: right; Remove margin-top on the paragraph – p { margin-top: 0; }

7 CSS CODE.floatright { float: right; margin: 0 0 10px 10px; clear: right; }.containingbox p { margin-top: 0;} HTML CODE Lorem ipsum dolor … Duis autem vel eum iriure … Lorem ipsum dolor sit amet…,

8 4. Floating an image thumbnail gallery Float the divs –.thumbnail { float: left; width: 60px; } Add a border – border: 1px solid #999; Add margin – margin: 0 15px 15px 0; Forcing a new line –.clearboth { clear: both; } Add padding – padding: 5px;

9 CSS CODE.thumbnail { float: left; width: 60px; border: 1px solid #999; margin: 0 15px 15px 0; padding: 5px; }.clearboth { clear: both; } HTML CODE Caption Caption.. Caption

10 5. Floating next and back buttons using lists Remove bullets – ul#navigation { list-style-type: none; } Remove padding and margins – margin: 0; padding: 0; Float the list items – ul#navigation.left { float: left; width: 5em; } ul#navigation.right { float: right; width: 5em; } Adding a line above the list – border-top: 1px solid #666; Adding padding below the line – padding:.5em 0; Display block – ul#navigation li a { display: block; } Moving the width – width: 5em; Add a background color – color: #FFF; background-color: #036; Add padding – padding:.2em 0; Text decoration and alignment – text-align: center; text-decoration: none; Add a hover state – ul#navigation li a:hover { color: #FFF; background-color: #69C; }

11 CSS CODE ul#navigation { list-style-type: none; margin: 0; padding:.5em 0; border-top: 1px solid #666; } ul#navigation li a { display: block; width: 5em; color: #FFF; background-color: #036; padding:.2em 0; text-align: center; text-decoration: none; } ul#navigation li a:hover { color: #FFF; background-color: #69C; } ul#navigation.left { float: left; } ul#navigation.right { float: right; } HTML CODE Lorem ipsum dolor sit amet... Back Next

12 6. Floating inline list items Remove the bullets – ul#navlist { list-style-type: none; } Remove padding and margins – padding: 0; margin: 0; Display inline – ul#navlist li { display: inline; } – Step 5 - float the "a" state – ul#navlist li a { float: left; width: 5em; } Add a background color – color: #fff; background-color: #036; Add padding to the "a" state – padding: 0.2em 1em; Removing text decoration – text-decoration: none; Add a border to separate the list items – border-right: 1px solid #fff; Add a rollover color – ul#navlist li a:hover { background-color: #369; color: #fff; } Float the UL – float: left; width: 100%; Add a background color to the UL – color: #fff; background-color: #036;

13 CSS CODE ul#navlist { padding: 0; margin: 0; list-style-type: none; float: left; width: 100%; color: #fff; background-color: #036; } ul#navlist li { display: inline; } ul#navlist li a { float: left; width: 5em; color: #fff; background-color: #036; padding: 0.2em 1em; text-decoration: none; border-right: 1px solid #fff; } ul#navlist li a:hover { background-color: #369; color: #fff; } HTML CODE Item one Item two Item three

14 7. Floating a scaleable drop cap Add a span around the first letter – L orem ipsum dolor sit amet, consectetuer... Float the first letter –.dropcap { float: left; width:.7em; } Increase the font size – font-size: 4em; Set a line-height – line-height: 83%;

15 CSS CODE.dropcap { float: left; width:.7em; font-size: 4em; line-height: 83%; } HTML CODE L orem ipsum dolor sit amet, consectetuer...

16 Liquid two column layout Add width and margin to the container – #container { width: 90%; margin: 10px auto; } Add color, background color and border – #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; } Add line height – line-height: 130%; Styling the top banner – #top { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; } Remove margins and padding from the h1 – #top h1 { padding: 0; margin: 0; } Apply "float" to the leftnav – #leftnav { float: left; width: 160px; } Add margin and padding to the leftnav – margin: 0; padding: 1em; Setting margins to the "content" div – #content { margin-left: 200px; border-left: 1px solid gray; } Add padding to the "content" div – padding: 1em; Styling the footer – #footer { clear: both; margin: 0; padding:.5em; } Add color and background color to the footer – background-color: #ddd; Add a border to the footer – border-top: 1px solid gray; Removing top margins – #leftnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0.5em 0; } Setting a maximum line length – #content { max-width: 36em; }

17 CSS CODE #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; } #top { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; } #top h1 { padding: 0; margin: 0; } #leftnav { float: left; width: 160px; margin: 0; padding: 1em; } HTML CODE Header Lorem ipsum dolor sit amet,... Subheading Lorem ipsum dolor sit amet, … Ut wisi enim ad minim … Footer #content { margin-left: 200px; border-left: 1px solid gray; padding: 1em; max-width: 36em; } #footer { clear: both; margin: 0; padding:.5em; color: #333; background-color: #ddd; border-top: 1px solid gray; } #leftnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0.5em 0; }

18 Liquid three column layout Add width and margin to the container – #container { width: 90%; margin: 10px auto; } Add color, background color and border – background-color: #fff; color: #333; border: 1px solid gray; } Add line height – line-height: 130%; Styling the top banner – #top { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; } Remove margins and padding from the h1 – #top h1 { padding: 0; margin: 0; } Apply "float", margin and padding to the leftnav – #leftnav { float: left; width: 160px; margin: 0; padding: 1em; } Apply "float", margin and padding to the rigthnav – #rightnav { float: right; width: 160px; margin: 0; padding: 1em; } Setting margins to the "content" div – #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; } Add padding to the "content" div – padding: 1em; Styling the footer – #footer { clear: both; margin: 0; padding:.5em; } Add color and background color to the footer – color: #333; background-color: #ddd; Adding border to the footer – border-top: 1px solid gray; Removing top margins – #leftnav p, #rightnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0.5em 0; } Setting a maximum line length – #content { max-width: 36em; }

19 #rightnav { float: right; width: 160px; margin: 0; padding: 1em; } #content { margin-left: 200px; border-left: 1px solid gray; margin-right: 200px; border-right: 1px solid gray; padding: 1em; max-width: 36em; } #footer { clear: both; margin: 0; padding:.5em; color: #333; background-color: #ddd; border-top: 1px solid gray; } #leftnav p, #rightnav p { margin: 0 0 1em 0; } #content h2 { margin: 0 0.5em 0; } CSS CODE #container { width: 90%; margin: 10px auto; background-color: #fff; color: #333; border: 1px solid gray; line-height: 130%; } #top { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; } #top h1 { padding: 0; margin: 0; } #leftnav { float: left; width: 160px; margin: 0; padding: 1em; } HTML CODE Header Lorem ipsum dolor sit amet, … Lorem ipsum dolor sit amet, … Subheading Lorem ipsum dolor sit amet, …. Ut wisi enim ad minim veniam, … Footer

20 1. Background images for bullets Remove the bullets ul { list-style-type: none; } Remove padding and margins padding: 0; margin: 0; Add your own indent margin-left: 1em; Add the background image li { background-image: url(arrow.gif); } Set no-repeat background-repeat: no-repeat; Position the image background-position: 0.4em; Move the content padding-left:.6em;

21 CSS CODE ul { list-style-type: none; padding: 0; margin: 0; } li { background-image: url(arrow.gif); background-repeat: no-repeat; background-position: 0.4em; padding-left:.6em; } HTML CODE Milk Eggs Cheese Vegetables Fruit

22 2. Simple CSS rollover lists Remove the bullets #navcontainer ul { list-style-type: none; } Remove padding and margins margin: 0; padding: 0; Display block #navcontainer a { display: block; } Add a background color color: #FFF; background-color: #036; Set the list width width: 9em; Add padding padding:.2em.8em; Text decoration text-decoration: none; Add a rollover color #navcontainer a:hover { background-color: #369; color: #FFF; } Separate the list items #navcontainer li { margin: 0 0.2em 0; }

23 CSS CODE #navcontainer ul { margin: 0; padding: 0; list-style-type: none; } #navcontainer li { margin: 0 0.2em 0; } #navcontainer a { display: block; color: #FFF; background-color: #036; width: 9em; padding:.2em.8em; text-decoration: none; } #navcontainer a:hover { background-color: #369; color: #FFF; } HTML CODE Milk Eggs Cheese Vegetables Fruit

24 3. Nested lists Remove the bullets #navcontainer ul { list-style-type: none; } Remove padding and margins margin: 0; padding: 0; Display block #navcontainer a { display: block; } Add a background color color: #FFF; background-color: #036; Set the list width width: 9em; Add padding padding: 3px 12px 3px 8px; Text decoration text-decoration: none; Add a rollover color #navcontainer a:hover { background-color: #369; color: #FFF; } Separate the list items #navcontainer li { margin: 0; } border-bottom: 1px solid #fff; Duplicating the main rule set #navcontainer li li a { display: block; color: #FFF; background-color: #036; width: 9em; padding: 3px 12px 3px 8px; text-decoration: none; border-bottom: 1px solid #fff; } Change nested list background color background-color: #69C; Adding padding-left to nested items padding: 3px 3px 3px 17px;

25 CSS CODE #navcontainer ul { margin: 0; padding: 0; list-style-type: none; } #navcontainer a { display: block; color: #FFF; background-color: #036; width: 9em; padding: 3px 12px 3px 8px; text-decoration: none; border-bottom: 1px solid #fff; font-weight: bold; } HTML CODE Milk Goat Cow Eggs Free-range Other Cheese Smelly Extra smelly #navcontainer a:hover {background-color:#369; color: #FFF; } #navcontainer li li a { display: block; color: #FFF; background-color: #69C; width: 9em; padding: 3px 3px 3px 17px; text-decoration: none; border-bottom: 1px solid #fff; font-weight: normal; }

26 4. Horizontal lists Remove the bullets #navcontainer ul { list-style- type: none; } Remove padding and margins { margin: 0; padding: 0; list-style-type: none; } Display inline #navcontainer ul li { display: inline; } Removing text decoration #navcontainer ul li a { text- decoration: none; } Padding around list items padding:.2em 1em; Adding background color color: #fff; background-color: #036; Add a rollover color #navcontainer ul li a:hover { color: #fff; background-color: #369; }

27 CSS CODE #navcontainer ul { margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: inline; } #navcontainer ul li a { text-decoration: none; padding:.2em 1em; color: #fff; background-color: #036; } #navcontainer ul li a:hover { color: #fff; background-color: #369; } HTML CODE Milk Eggs Cheese Vegetables Fruit

Download ppt "Cascading Style Sheet (CSS) SAMPLE IT133 Pengembangan Web."

Similar presentations

Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.

Slide 1 CMPS 211 Internet Programming Spring 2008 Dynamic Effects with Styles Chapter 12 2/6/08.
Very quick intro HTML and CSS. Sample html A Web Title.

Very quick intro HTML and CSS. Sample html A Web Title.
Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.

Advance CSS (Menu and Layout) Miftahul Huda. CSS Navigation MENU It's truly remarkable what can be achieved through CSS, especially with navigation menus.
CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.

CIS 1310 – HTML & CSS 6 Layout. CIS 1310 – HTML & CSS Learning Outcomes  Describe & Apply the CSS Box Model  Configure Float with CSS  Designate Positioning.
Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:

Class four: the box model and positioning. is an HTML tag which allows you to create an element out of inline text. It doesn’t mean anything! try it:
Unit 20 - Client Side Customisation of Web Pages

Unit 20 - Client Side Customisation of Web Pages
Today’s objectives Site performance Padding, Margins, Borders

Today’s objectives Site performance Padding, Margins, Borders
Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.

Week 9 Using the Box Properties. 9-2 The CSS Visual Formatting Model Describes how the element content boxes should be displayed by the browser –Based.
Working with Cascading Style Sheets

Working with Cascading Style Sheets
Cascading Style Sheets (Formatting. Slide 2 Lecture Overview At this point, you have learned how and where to create styles You have not learned much.

Cascading Style Sheets (Formatting. Slide 2 Lecture Overview At this point, you have learned how and where to create styles You have not learned much.
Web Authoring: Using Cascading Style Sheets ITNW 6030.

Web Authoring: Using Cascading Style Sheets ITNW 6030.
CS4370/6370 Web Development Cascading Style Sheets (CSS)

CS4370/6370 Web Development Cascading Style Sheets (CSS)
CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.

CASCADING STYLE SHEETS CSS. 2 What CSS means?  CSS is an extension to basic HTML that allows you to style your web pages.  It separates the part that.
Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.

Basics of Web Design Chapter 6 More CSS Basics Key Concepts 1.
Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!

Text Properties, Line Box, CSS. Text Properties Properties related to the display of text. Text-align : left, right, center I like FSU!
Web Design & Development Cascading Style Sheets (CSS)

Web Design & Development Cascading Style Sheets (CSS)
Chapter 9. Links  When styling a link, you must tell CSS both what you want to style, and when you want the style to happen  Web browsers keep track.

Chapter 9. Links  When styling a link, you must tell CSS both what you want to style, and when you want the style to happen  Web browsers keep track.
Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:

Beginning Web Site Creation: Dreamweaver CS4. XHTMLCSS  Describes the structure  Content  Collection of styles  Formatting body { background-color:
1 Using Cascading Style Sheets For Design Cascading Style Sheets sound intimidating. In reality, however, CSS is one of the most convenient tools available.

1 Using Cascading Style Sheets For Design Cascading Style Sheets sound intimidating. In reality, however, CSS is one of the most convenient tools available.
CSS II Digital Media: Communication and design 20.03.2007 IT University of Copenhagen.

CSS II Digital Media: Communication and design IT University of Copenhagen.

Similar presentations

Ads by Google