Differences

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

--- tanszek:oktatas:techcomm:cascading_style_sheets [2024/10/01 09:04] – [3. Defining CSS styles] 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 99: / Line 100: @@
 ==== 4. CSS comments ====
-CSS comments are placed between ''/* */''.
+Comments in CSS are used to add notes, explanations, or temporarily disable code without affecting the styles applied to a webpage. They are not displayed in the browser and do not impact the page's layout or design.
 <code CSS>
-/*  This is a CSS comment,
+/* Formatting rules for paragraphs */
-    which can span multiple lines. */
+p {
+    color: black; /* Set the text color to black */
+    font-size: 16pt; /* Set font size to 16 pts */
+}
 </code>
-==== 5. Element, ID, and class Selectors ====
+==== 5. Selecting elements, classes and IDs ====
-* **Element selector**: Applies to all specified elements.
+CSS selectors are patterns used to select and style HTML elements. Three common types of selectors are **element**, **class**, and **ID** selectors, each serving a unique purpose and offering different levels of specificity.
-* **ID selector**: Targets a specific element based on its unique ID.
-* **Class selector**: Targets one or more elements with a specific class.
-<code CSS>
+An **element selector** targets all instances of a specific HTML element on a webpage. It is defined by simply using the element’s name, such as ''p'', ''h1'', or ''div''. For example, the selector ''p'' will apply styles to every ''<p>'' tag in the document. In this example, all ''<p>'' elements on the page will be displayed with a font size of 16px and black text color:
-/* Element selector, applies to all paragraphs */
-p {
-    color: blue;
-}
-/* ID selector, applies to the element with the specific ID "header" */
+<code XML>
-#header {
+<!DOCTYPE html>
-    font-size: 24px;
+<html>
-}
+<head>
+    <style>
+        p {
+            font-size: 16px;
+            color: black;
+        }
+    </style>
+</head>
+<body>
+    <p>This is a paragraph styled using an element selector.</p>
+    <p>Another paragraph with the same styles.</p>
+</body>
+</html>
+</code>
-/* Class selector, applies to all elements with the class "button" */
+A **class selector** targets one or more elements that have the same ''class'' attribute. Class selectors are defined using a period (''.'') followed by the class name. In this example, both the ''<p>'' and ''div'' elements with the class highlight will have a yellow background and bold font weight. Since classes can be reused across multiple elements, class selectors offer greater flexibility in styling.
-.button {
-    background-color: green;
+<code XML>
-}
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        .highlight {
+            background-color: yellow;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <p class="highlight">This paragraph is styled using a class selector.</p>
+    <p>This paragraph is not highlighted.</p>
+    <div class="highlight">This div is also styled using the same class selector.</div>
+</body>
+</html>
 </code>
+An **ID selector** targets a single, unique HTML element by referencing its ''id'' attribute. ID selectors are denoted using the ''#'' symbol followed by the ID name. Here, only the ''<h1>'' element with ''id="main-header"'' is styled, while other elements remain unaffected. This makes ID selectors ideal for targeting only specific elements.
+<code XML>
+<!DOCTYPE html>
+<html>
+<head>
+    <style>
+        #main-header {
+            font-size: 24px;
+            text-align: center;
+        }
+    </style>
+</head>
+<body>
+    <h1 id="main-header">This is a header styled using an ID selector.</h1>
+    <p>This paragraph is not affected by the ID selector.</p>
+</body>
+</html>
+</code>
+In summary, element selectors are used for broad styling, ID selectors offer targeted styling for unique elements, and class selectors provide versatility by enabling the styling of multiple elements at once. Understanding these selectors and how to use them together is key to writing efficient and maintainable CSS.
+Element selectors are marked with the name of the member, class selectors are marked with a ''.'' and the name of the class, and ID selectors are marked with a ''#'' and the identifier:
+^ Selector type     ^ HTML example                   ^ CSS selector  |
+| Element selector  | <p>Test</p>                    | p             |
+| Class selector    | <p class="highlight">Test</p>  | .highlight    |
+| ID selector       | <p id="main-text">Test</p>     | #main-text    |
 ==== 6. Cascading ====
-When multiple rules target the same selector, the later rule will override the previous one.
+By default, when multiple rules target the same selector, the later rule will override the previous one:
 <code XML>
@@ Line 150: / Line 205: @@
 </code>
-==== 7. Role of ''span'' and ''div'' elements ====
+==== 7. Role of span and div elements ====
-* ''span'': An inline element, which is used to mark a portion of text.
+The **span** and **div** elements are fundamental components in HTML used for grouping and organizing content. They serve as containers that can be styled using CSS.
-* ''div'': A block element, which is used to group multiple contents into a block.
+The ''span'' element is an **inline container**, meaning it only takes up as much width as its content. It is typically used to style or manipulate small portions of text. In this example, the ''span'' is used to color only the word "blue" without affecting the rest of the text. It is perfect for applying specific styles or behaviors to parts of a sentence, such as changing text color or font weight:
+<code XML>
+<p>This is a <span style="color: blue;">blue</span> word in a paragraph.</p>
+</code>
+The ''div'' element is a **block-level container**, meaning it takes up the full width of its parent element by default and creates a line break before and after it. It is commonly used to group larger sections of content, such as paragraphs, images, or other block-level elements. For example:
 <code XML>
-<p>This is a <span style="color: red">red</span> text.</p>
+<div style="background-color: lightgrey;">
-<div style="font-weight: bold">
+    <h1>Section Title</h1>
-    <p>This is bold text.</p>
+    <p>This paragraph is inside a div container.</p>
-    <p>So is this.</p>
-    <p>And this too.</p>
 </div>
 </code>
@@ Line 166: / Line 226: @@
 ==== 8. Background styling ====
-The ''background'' property defines the background style of an element.
+Background styling in CSS allows developers to customize the appearance of an element's background, enhancing the overall visual appeal of a webpage. There are several properties associated with background styling that can be used to control color, images, gradients, and positioning. For example:
 <code CSS>
@@ Line 180: / Line 240: @@
 ==== 9. Margin, padding and border ====
-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."
+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.
 {{:tanszek:oktatas:techcomm:pasted:20240905-153005.png}}
-<code CSS>
+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.
-div {
-    margin: 10px;
+The example below shows how to format a button. Try what happens when you change the button's border, margin and padding properties!
-    padding: 20px;
-    border: 1px solid black;
+<code XML>
-    border-radius: 5px;
+<!DOCTYPE html>
-}
+<html>
+<head>
+    <title>Styled Button Example</title>
+    <style>
+        .styled-button {
+            color: green;
+            background-color: lightgreen;
+            margin: 10px;
+            padding: 20px;
+            border: 1px solid red;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
+    <button class="styled-button">Click me!</button>
+    <p>Maecenas sapien arcu, finibus eget dignissim quis, placerat vel ante.</p>
+</body>
+</html>
 </code>
@@ Line 214: / 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}}