CSS (1) Abdi Pandu Kusuma, S.Kom, M.T
Pengantar CSS 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.
ABDI PANDU KUSUMA, S.Kom., M.T
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 1: 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 2: 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>
Click to edit Master title style CSS (3) Abdi Pandu Kusuma, S.Kom., M.T 21 21
CLliisctkStoyleindgit Master title style We know that in HTML divided into 3 kinds, including: Ordered list and Unordered list. List styling in CSS have three properties, including: Marker Type Description a) list-style-type, Circle Circular bullet b) list-style-position, and Disk Black round bullet c) list-style-image. Square Square bullet a) List-style-type. Decimal Numbering in the form of decimal numbers (1, 2, ➔used to adjust the form of bullets or numbering used. 3 etc.) Tag form: Decimal-leading- Numbering is a decimal number with 0 in front list-style-type : <marker-type> | none ; zero (01, 02, 03, etc.) Lower-alpha Lowercase numbering (a, b, c, etc.) Lower-roman Numbering in the form of small roman numerals (i, ii, iii, iv etc.) Upper-alpha Uppercase numbering (A, B, C, etc.) Upper-roman Numbering in the form of large roman numbers (I, II, III, etc.) 22 22
CLliisctkStoyleindgit Master title style b) List-style-position ➔used to set the position of bullets or numbering on the list element. Tag Form: list-style-position: outside | inside; c) List-style-image ➔used to replace the bullets forms on the list element into special bullets forms that we create in the form of image files. Tag Form: list-style-image : url(‘url-file-gambar’); • The default value of this property is none. • Images can use PNG, GIF or JPG file types. 23 23
C1lsitcTkratoineindgit Master title style Solution Create the following web appearance: 24 24
CLliinckk Sttoyelidnigt Master title style Link styling in CSS have four properties, including: ✓ a: link ➔ normal state where an HTML element becomes a link. ✓ a: visited ➔ circumstances where a link has been visited / seen the link. ✓ a: hover ➔ a state where the mouse pointer over a link. ✓ a: active ➔ the state where the link is being clicked. When formatting for several states of a hyperlink, the writing rules: ✓ a: hover must be writing after a:link and a:visited. ✓ a: active must be writing after a:hover. 25 25
C2lnidckTrtaoineidnigt Master title style Create the following web appearance: Solution: 26 26
CTalibckletSoteyldiintgMaster title style Table styling in CSS have four properties, including: a) Border. Border in making a table is certainly inseparable from the shape and appearance of a table. Tag Form: border: <width> <style> <color>; ✓ Width determines the thickness of the border. The values are \"thin\", \"medium\" and \"thick\", or you can also use values in units of pixels (1px, 2px, 3px, etc.) ✓ Style determines the type of border. The values are \"hidden\", \"dotted\", \"dashed\", \"solid\", \"double\", \"groove\", \"inset\", \"outset\" and \"none\". ✓ Color determines the color of the border. Can use hexadecimal, RGB or color-name values. 27 27
CTalibckletSoteyldiintgMaster title style b) Border-collapse. Used to remove the distance in table cells in HTML which by default are spaced 1px apart on each side. Tag Form: Border-collapse: collapse | separate; ✓The value of \"collapse\" produces cells without a distance. ✓The value of \"separate\" produces a table without spaces in each cell. c) Width & Height. d) Padding. used to determine the width and height of tables in HTML. Tag Form: used to determine the distance from the cell's Width: length | percent; outline to the text in the cell. Height: : length | percent; Tag Form: Padding: length; 28 28
C3lridcTkrtaoineindgit Master title style Create the following web appearance: Solution: Fix it, when the appeareance is not accordance 29 29
CSS (IV) Abdi Pandu Kusuma, S.Kom., M.T
CSS Box Model CSS Box Model ?? The area that covers an HTML element, which consists of: margin, border, padding and content.
CSS Box Model The properties used to specify the size of an HTML element are the \"width\" and \"height\" properties. Tag Form: width: auto | length | percent ; height: auto | length | percent ;
CSS Box Model 1st Training: Solution:
CSS Box Model Margin. Margin → The distance of an HTML element with other HTML elements that intersect. The area of each margin can be adjusted by using the following property: ❖ \"margin-top\" - for the upper margin. ❖ \"margin-right\" - for the right margin. ❖ \"margin-bottom\" - for the lower margin. ❖ \"margin-left\" - for the left margin. Tag Form: margin-top: auto | length | percent; margin-right: auto | length | percent; margin-bottom: auto | length | percent; margin-left: auto | length | percent;
CSS Box Model Simplify of Property Margin: Tag Form: margin:<margin-top> <margin-right> <margin-bottom> <margin-left>; Value of Property Margin can consist of one to four values, the rules are as follows: ✓\"Margin\" property with 4 values: margin: 10px 20px 30px 40px; Top margin = 10px Right margin = 20px Bottom margin = 30px Left margin = 40px (read clockwise) ✓ \"Margin\" property with 3 values margin: 10px 20px 30px; Top margin = 10px Right and left margin = 20px Bottom margin = 30px ✓ \"Margin\" property with 2 values margin: 10px 20px; Upper and lower margins = 10px; Right and left margin = 20px ✓ \"Margin\" property with 1 value margin: 10px; Margins on all four sides (top-right-bottom-left) = 10px
CSS Box Model Border Border → a boundary line that surrounds an HTML element, its position outside the Content but inside the Margin. Border-style Border-style property used to determine the shape of a border. Value of this property can use: \"dotted\", \"dashed\", \"solid\", \"double\", \"inset\", \"outset\", \"ridge\", \"groove\", \"hidden\" and \"none\".
CSS Box Model Border-style Tag Form: border-style: <border-top-style> < border-left-style > < border-bottom-style > < border-right-style >; Value of Property Border can consist of one to four values, the rules are as follows: ✓Border-style with 4 values border-style: dashed solid dotted solid; Border-top-style = dahsed Border-right-style = solid Border-bottom-style = dotted Border-left-style = solid (read clockwise) ✓Border-style with 3 values border-style: dashed solid dotted; Border-top-style = dahsed Border-right-style and border-left-style = solid Border-bottom-style = dotted ✓Border-style with 2 values border-style: dashed solid; Border-top-style and border-bottom-style = dahsed Border-right-style and border-left-style = solid ✓Border-style with 1 value border-style: dashed; Border-style for all four sides = dashed
CSS Box Model Border Width The \"border-width\" property is used to set the thickness of the border. Tag Form: border-width : thin | medium | thick | <length>; Border Color The \"border-color\" property is used to determine the color of the border in HTML elements. Tag Form: border-color : color-value | transparent;
CSS Box Model 2nd Training. Add the tag style: class container: class artikel: class img:
CSS Box Model Padding Padding → an empty area that surrounds an HTML element and gives a distance between Content and Border. Tag Form: padding-top: length | percent; padding-right: length | percent; padding-bottom: length | percent; padding-left: length | percent; Simplify Tag Form: padding:< padding-top> < padding-right> <padding-bottom> <padding- left>;
CSS Box Model Outline Outline → a line surrounding an HTML element, located outside the border. Outline consists of 3 basic elements namely thickness, shape and color. Each of these elements is defined by property: ✓ outline-width: to determine the thickness of the outline, ✓ outline-style: to determine the shape of the outline, ✓ outline-color: to determine the color of the outline. Tag Form: outline: <outline-width> <outline-style> <outline-color>;
CSS Box Model 3rd Training: Add the tag style: Add in tag body: <img class=\"img1\" src=\"wallpaper.jpg\" /> Fix it, when the appeareance is not accordance
CSS Box Model ??? ANY QUESTION ???
Task 3: Make a web display of at least 3 pages using HTML and CSS with free themes! Send the task (RAR Files) via WA Grup with format “Tugas2_SP_NIM_Name_WebThemes” until January 17th, 2022 at 06.00 PM.
Search
Read the Text Version
- 1 - 44
Pages:
