CSS Cascading Style Sheets
Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Membuat Web sederhana dengan menggunakan CSS
Outline Materi Definition Creating an Internal Style Sheet Creating an External Style Sheet The Class Selector The Id Selector Defining Styles for Links Formatting Text with Styles Layout with Styles CSS Comments The Advantages of Using Style Sheets
CSS Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents. Syntax : The CSS syntax is made up of three parts : a selector, a property and a value. The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value.
CSS (cont..) Body element will be displayed in black text color Example : Body element will be displayed in black text color If the value is multiple words, put quotes around the value If you wish to specify more than one property, you must separate each property with a semicolon. You can group selectors. All header elements will be displayed in green text color
Creating an Internal Style Sheet Internal style sheets are ideal for individual pages with lots of text. They let you set the styles at the top of your page that should be used throughout an HTML document At the top of your HTML document, between the <head> and </head> tags, type <style> Type the name of the tag and properties you wish to define Type </style>
Creating an Internal Style Sheet (cont..)
Creating an External Style Sheet External style sheets are ideal for giving all the pages on your Web site a common look. If you plan to apply the style sheet to more than one page, you’re better off using external style sheets. Create a new text document Type the name of the tag and properties you wish to define Save the style sheet as Text Only and give it the .css extension. To use an external style sheet : In the head section of each and every HTML page in which you wish to use the style sheet, type <link rel=stylesheet type=“text/css” href=“url.css”>
Creating an External Style Sheet (cont..) The .css file The .html file
The Class Selector With the class selector you can define different styles for the same type of HTML element.
The Id Selector You can define styles for HTML elements with the id selector. The id selector is defined as a #. Instead of creating a whole class of HTML tags, you can also identify individual tags. Each id in an HTML document must be unique.
Defining Styles for Links You can change the background and foreground color of your links. A:visited to change the appearance of links that the visitor has already clicked A:active to change the appearance of links when clicked A:hover to change the appearance of links when pointed to Example :
Formatting Text with Styles Property Description font-family: familyname To set the font family font-style: italic/oblique/normal To create italics/oblique/normal text font-weight: bold/normal To apply bold/normal formatting font-size: sizept, e.g., 12pt To set the font size line-height: sizept, e.g., 12pt To set the line height color: #rrggbb To set the text color background: #rrggbb To set the text background text-align: left/right/center/justify To align text text-decoration: underline/overline/line-through/blink/none To underline/overline/line-through/blink text
Layout with Styles Property Description height: size, e.g., 200 Setting the element’s height width: size, e.g., 200 Setting the element’s width border-top/bottom/left/right: thin/medium/thick or sizepx Setting the border padding-top/bottom/left/right: size, e.g., 10 Adding padding around the element margin-top/bottom/left/right: size, e.g., 10 Setting the margins around an element Vertical-align: baseline/middle/sub/super/text-top/text-bottom/top/bottom Aligning elements vertically
CSS Comments Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with "/*", and ends with "*/"
The Advantages of Using Style Sheets Styles save time Styles are easy to change Computers are better at applying styles consistently than you are Styles let you control text in ways that are out of reach of HTML tags Styles make it easy to create a common format for all your Web pages