ABDI PANDU KUSUMA, S.Kom., M.T
CSS Introduce CSS → ??? CSS : A technology used to facilitate the creation of a website. CSS Advantage: ✓ Can quickly apply a style to a particular tag. ✓ Can put CSS in a file so that it can be used by many pages at once. ✓ Can insert comments on CSS (enclosed in characters (/ * ... * /). CSS Tags: <style> ... </style> (written in the <head> ... </head> tag)
(...continous) example: In the example above we format all the text in the body tag to be of Verdana font size of 11 pixels. The body tag in the example is called the selector. The style attribute in it is called a declaration. Declarations are marked with curly brackets {...}.
Kinds of CSS a) Inline Style Sheet ➢ CSS is defined directly on the HTML tag in question. ➢ The way to write is to add the attribute style = \"...\" in the HTML tag. ➢ The style will only apply to the tag in question, and will not affect other HTML tags. Example:
Kinds of CSS b) Embedded Style Sheet ➢ CSS is defined first in the <style> ... </style> tag above the <body> tag. ➢ In this definition mentioned CSS attributes that will be used for HTML tags, which can then be used by the HTML tags concerned. Example:
Kinds of CSS c) Link Style Sheet (Eksternal CSS) ➢ External CSS is used to make websites more efficient by placing CSS files in a separate file. Example: hal1.html style1.css
CSS To determine the size in CSS, the following attributes can be specified: Attribute Description em To determine the size of a fraction (decimal) ex x-height, used to determine the size of which vertical px Pixels, determine pixel size such as font size
1st training Create html to display the sentence “Latihan mencoba CSS Dasar” using basic CSS! In head tags: In body tags:
2nd training Create the following html display using external CSS! Solution: CSS file seperated
(...continous) In HTML file: ( took after title tags) ( took in body tags) Running.
Background Styling Background Color: The \"background-color\" property is used to set the background of an element with a color value. Tag Form: background-color: color-value; Color values in CSS usually use color codes in several variants, namely Hexadesimal color, RGB color and Color-name. The color codes include:
Background Styling Task 3: Show the web in below: Solution:
Background Styling Background Image: The \"background-image\" property is used to make an image file the background of an HTML element. Tag Form: background-image: url(‘url-file-gambar’); ✓The image file used can be a file * .jpg, * .png or * .gif. ✓ By default, images used as background will be displayed repeatedly, horizontally and vertically. ✓The url file image can use relative path or absolute url.
Background Styling Task 4: Show the web in below: Solution: Add this tag in body style:
Background Styling Background-Repeat: The \"background-repeat\" property is used to set the repetition of images displayed as background with the \"background-image\" property. The repetition of the image can be adjusted horizontally (x axis) or vertically (y axis). Tag Form: Background-repeat: repeat | no-repeat | repeat-x | repeat-y; Background-Position: The \"background-position\" property is used to set the position or position of an image file that is used as the background. Tag Form: background-position: top | bottom | left | center | right;
Text Styling There are properties in CSS that are used for formatting text including: No Property Tags Description 1 color color: color-value; Color-value can use hexadecimal, RGB, or color name. 2 Text-align text-align: left | center | right | The \"text-align\" property is justify; used to adjust text alignment horizontally. 3 Text-decoration text-decoration : none | underline | The \"text-decoration\" property overline | line-through | is used to add or remove blink; certain ornaments to text. 4 Text-indent text-indent: length; Length: determine the length of the text indent, can use units of pixels (px), point (pt), Ems (em), centimeter (cm) and percent (%). 5 Text-transform text-transform: none | capitalize | The \"text-transform\" property is uppercase | lowercase; used to transform text forms, such as making capital, lowercase, or uppercase.
Font Styling There are properties in CSS that are used for font style including: Font-Size The \"font-size\" property is used to specify the size of the font to be displayed. Tag form: font-size: <absolute-size> | <relative-size> | <length> | <percent>; Example: h1 { font-size: 40px; } h2 { font-size: 30px; } p { font-size: 14px; } h1 { font-size: 2.5em; } → 40px/16 = 2.5em h2 { font-size: 1.875em; } → 30px/16 = 1.875em p { font-size: 0.875em; } →14px/16 = 0.875em To calculate the pixel value into units of em, that is based on that 1em is the normal size for a text, where 1em = 16px. So to convert pixel values into em it can be calculated with the formula em = pixel / 16.
Font Styling Font-Family There are two types of font-family in CSS, including: ✓ Font Family; i.e the name of a specific font type, such as: \"Times New Roman\" or \"Arial\". ✓ Generic Family; i.e. family font groups that have similar appearance, such as \"serif\", \"sans-serif\" or \"monospace\". Tag form: font-family: <family-name> | <generic-family>; Font-Style The \"font-style\" property is generally used to set the appearance of italic text. This property has three values: normal, italic and oblique. Tag form: font-style : normal | italic | oblique; Font-variant The \"font-variant\" property is used to make variations on text, where the value of this property is \"normal\" and \"small-caps\". Tag form: font-variant: normal | small-caps;
Font Styling Font-weight The \"font-weight\" property is used to determine the font thickness value. The value of this property is: \"normal\", \"bold\", \"bolder\", \"lighter\" or by using values between 100, 200, to 900. Tag form: font-weight : normal | bold | bolder | lighter | <100 s/d 900>
??? ANY QUESTION ???
Final Project (UAS) Make a web application using HTML & CSS. Final project made by a group from lecture. Free theme, consist minimal of 6 pages. Send a proposal report in doc file via edlink until November 13th , 2022. (6 PM). Send a web file & final project report (Doc) via edlink until November 18th , 2022 (6 AM). All of file must to be upload in lead group gdrive, and send the link via edlink.
Search
Read the Text Version
- 1 - 21
Pages:
