Differences

This shows you the differences between two versions of the page.

--- tanszek:oktatas:techcomm:cascading_style_sheets [2024/10/01 09:37] – [9. Margin, padding and border] kissa
+++ tanszek:oktatas:techcomm:cascading_style_sheets [2024/10/01 10:32] (current) – [3. Defining CSS styles] kissa
@@ Line 90: / Line 90: @@
 <code CSS>
+/* styles.css */
 p {
     color: blue;
@@ Line 240: / Line 241: @@
 The **box model** is a fundamental concept in CSS that describes how elements are structured and spaced on a webpage. Every HTML element is represented as a rectangular box consisting of four distinct areas: **margin**, **border**, **padding**, and the **content** itself. Understanding the box model is crucial for effective layout and design.
-The ''margin'' is the outer space around an element, while the ''padding'' is the inner space between the content and the border. The ''border'' defines the outline of the element. This is called the "box model."
 {{:tanszek:oktatas:techcomm:pasted:20240905-153005.png}}
+The ''margin'' is the outer space around an element, while the ''padding'' is the inner space between the content and the border. The ''border'' defines the outline of the element.
 The example below shows how to format a button. Try what happens when you change the button's border, margin and padding properties!
@@ Line 292: / Line 293: @@
     font-weight: bold;
     font-style: italic;
     text-decoration: underline;
     text-align: justify;
 }
 </code>
+If you are interested, [[https://www.w3schools.com/css/tryit.asp?filename=trycss_text|try more here]].
 ==== 12. Exercise ====
-Create the following webpage by using HTML and CSS. Use inline CSS for formatting the text, and also apply class-based and id-based selectors!
+Create the following webpage using HTML and CSS. Use embedded CSS, and format the content with inline, class-based and id-based selectors!
-Feel free to use online resources (e.g. [[https://www.w3schools.com/css/|W3Schools CSS tutorial]]) as help.
+Feel free to use online resources (e.g. [[https://www.w3schools.com/css/|W3Schools CSS tutorial]]) as help. The raw text of the webpage can be found below the screenshot.
 {{:tanszek:oktatas:techcomm:pasted:20240905-153937.png?600}}