Pemrograman Web 2 - CSS
0 likes166 views
CSS is a style sheet language used to describe the presentation of HTML documents, including how elements are displayed on the page, how they are laid out, and their colors, fonts, etc. CSS allows customization of HTML elements through declarations that specify element names and property-value pairs to style elements, and different selectors like classes, IDs, elements are used to target specific elements for styling. The CSS box model describes the layout of elements as boxes that can have properties like margins, borders, padding, and dimensions set to control appearance.
More Related Content
What's hot (19)
Similar to Pemrograman Web 2 - CSS (20)
More from Nur Fadli Utomo (20)
Recently uploaded (20)
Pemrograman Web 2 - CSS
- 2. Make-up-ing your boring HTML view Customization that you can’t do on pure HTML code Make your front-end debugging easier
- 5. CSS IS A LANGUAGE THAT DESCRIBES THE STYLE OF AN HTML DOCUMENT CSS DESCRIBES HOW HTML ELEMENTS SHOULD BE DISPLAYED
- 7. p { text-align: center; color: red; }
- 8. #param1 { text-align: center; color: red; }
- 9. .center { text-align: center; color: red; } p.center { text-align: center; color: red; }
- 10. <p class="center large">This paragraph refers to two classes.</p> p.center { text-align: center; color: red; } p.large { font-size: 300%; }
- 11. • Use a class when you want to consistently style multiple elements throughout the page/site. Classes are useful when you have, or possibly will have in the future, more than one element that shares the same style. An example may be a div of "comments" or a certain list style to use for related links • Use the ID when you have a single element on the page that will take the style. Remember that IDs must be unique. In your case this may be the correct option, as there presumably will only be one "main" div on the page
- 12. background-color: red; background-color: rgb(255, 0, 0); background-color: #ff0000;
- 13. background-color: blue; background-image: url(“gambar.jpg”); background-repeat: repeat-x; background-attachment: fixed; background-position: right top;
- 14. border-style dotted - Defines a dotted border dashed - Defines a dashed border solid - Defines a solid border double - Defines a double border groove - Defines a 3D grooved border. The effect depends on the border-color value ridge - Defines a 3D ridged border. The effect depends on the border-color value inset - Defines a 3D inset border. The effect depends on the border-color value outset - Defines a 3D outset border. The effect depends on the border-color value none - Defines no border hidden - Defines a hidden border
- 16. • auto - the browser calculates the margin • length - specifies a margin in px, pt, cm, etc. • % - specifies a margin in % of the width of the containing element • inherit - specifies that the margin should be inherited from the parent element
- 18. max-width: 500px; height: 200px; width: 50%; background-color: powderblue;
- 19. All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
- 21. Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent
- 22. div { width: 300px; border: 25px solid green; padding: 25px; margin: 25px; } div { width: 320px; padding: 10px; border: 5px solid gray; margin: 0; }