Institute of Information Science - University of Miskolc

User Tools

Site Tools

Trace:
tanszek:oktatas:techcomm:cascading_style_sheets

Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
tanszek:oktatas:techcomm:cascading_style_sheets [2024/10/01 09:37] – [9. Margin, padding and border] kissatanszek:oktatas:techcomm:cascading_style_sheets [2026/09/27 17:49] (current) – [Exercise] kissa
Line 1: Line 1:
 ===== CSS (Cascading Style Sheets) ===== ===== CSS (Cascading Style Sheets) =====
  
-==== 1. What is CSS? ====+==== What is CSS? ====
  
 Cascading Style Sheets (CSS) is a fundamental technology used in web development to control the formatting and layout of HTML documents. While HTML provides the structure and content of a web page, CSS allows developers to apply styles, such as colors, fonts, spacing, and positioning, to create visually appealing and user-friendly interfaces. Cascading Style Sheets (CSS) is a fundamental technology used in web development to control the formatting and layout of HTML documents. While HTML provides the structure and content of a web page, CSS allows developers to apply styles, such as colors, fonts, spacing, and positioning, to create visually appealing and user-friendly interfaces.
  
-==== 2. Selectors and declarations ====+==== Development Environment ====
  
-CSS is built around selectors and declarations. +For setting up the development environment, please [[tanszek:oktatas:techcomm:basics_of_the_hypertext_markup_language#development_environment|follow this link]].
- +
- +
-{{:tanszek:oktatas:techcomm:pasted:20241001-085338.png?480}} +
- +
-**Selectors** specify which HTML elements the styles should target. They can be as simple as selecting an element by its name (e.g., ''p'' for all paragraph elements) or as targeting elements based on classes, IDs, attributes. +
- +
-**Declarations** define the style properties and their values that should be applied to the selected elements. A declaration consists of a property (e.g., ''color'') and a value (e.g., ''blue''), separated by a colon and enclosed in curly braces. For example, ''p { color: blue; }'' changes the text color of all paragraphs to blue. +
- +
-Let's see it in a very simple example: +
- +
-<code XML> +
-<!DOCTYPE html> +
-<html> +
-<head> +
-    <title>Blue Paragraph</title> +
-    <style> +
-        p { +
-            color: blue; +
-        } +
-    </style> +
-</head> +
-<body> +
-    <p>This is a blue paragraph.</p> +
-    <p>This is also a blue paragraph.</p> +
-</body> +
-</html> +
-</code>+
  
-==== 3. Defining CSS styles ====+==== Defining CSS styles ====
  
 CSS offers three main methods for applying styles to HTML documents: **inline**, **embedded**, and **external CSS**. Each method has its own use cases, benefits, and limitations. CSS offers three main methods for applying styles to HTML documents: **inline**, **embedded**, and **external CSS**. Each method has its own use cases, benefits, and limitations.
Line 90: Line 63:
  
 <code CSS> <code CSS>
 +/* styles.css */
 p { p {
     color: blue;     color: blue;
Line 97: Line 71:
  
 External CSS is ideal for websites because it allows for a consistent style across multiple pages, simplifies maintenance, and improves load times by enabling browsers to cache the stylesheet. External CSS is ideal for websites because it allows for a consistent style across multiple pages, simplifies maintenance, and improves load times by enabling browsers to cache the stylesheet.
-==== 4. CSS comments ====+ 
 +==== Selectors and declarations ==== 
 + 
 +CSS is built around selectors and declarations. 
 + 
 + 
 +{{:tanszek:oktatas:techcomm:pasted:20241001-085338.png?480}} 
 + 
 +**Selectors** specify which HTML elements the styles should target. They can be as simple as selecting an element by its name (e.g., ''p'' for all paragraph elements) or as targeting elements based on classes, IDs, attributes. 
 + 
 +**Declarations** define the style properties and their values that should be applied to the selected elements. A declaration consists of a property (e.g., ''color'') and a value (e.g., ''blue''), separated by a colon and enclosed in curly braces. For example, ''p { color: blue; }'' changes the text color of all paragraphs to blue. 
 + 
 +Let's see it in a very simple example: 
 + 
 +<code XML> 
 +<!DOCTYPE html> 
 +<html> 
 +<head> 
 +    <title>Blue Paragraph</title> 
 +    <style> 
 +        p { 
 +            color: blue; 
 +        } 
 +    </style> 
 +</head> 
 +<body> 
 +    <p>This is a blue paragraph.</p> 
 +    <p>This is also a blue paragraph.</p> 
 +</body> 
 +</html> 
 +</code> 
 + 
 +=== CSS comments ===
  
 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. 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.
Line 109: Line 115:
 </code> </code>
  
-==== 5. Selecting elements, classes and IDs ====+==== Selecting elements, classes and IDs ====
  
 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. 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.
Line 183: Line 189:
 | ID selector       | <p id="main-text">Test</p>     | #main-text    | | ID selector       | <p id="main-text">Test</p>     | #main-text    |
  
-==== 6. Cascading ==== +==== Role of span and div elements ====
- +
-By default, when multiple rules target the same selector, the later rule will override the previous one: +
- +
-<code XML> +
-<head> +
-    <style> +
-        p { +
-            color: red; +
-        } +
- +
-        p { +
-            color: green; +
-        } +
-    </style> +
-</head> +
-<body> +
-    <p>This paragraph will be green.</p> +
-</body> +
-</code> +
- +
-==== 7. Role of span and div elements ====+
  
 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. 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.
Line 223: Line 208:
 </code> </code>
  
-==== 8. Background styling ====+==== Text styling and element sizing ==== 
 + 
 +There are several properties available for text formatting. 
 + 
 +<code CSS> 
 +p { 
 +    font-family: Arial; 
 +    font-size: 16px; 
 +    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]]. 
 + 
 +The ''width'' and ''height'' properties allow you to set the dimensions of an element. 
 + 
 +<code CSS> 
 +img { 
 +    width: 100px; 
 +    height: 100px; 
 +} 
 +</code> 
 + 
 +==== Background styling and borders ====
  
 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: 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:
Line 237: Line 248:
 </code> </code>
  
-==== 9. Margin, padding and border ====+The ''border'' property adds a line around an element. It combines the border width, style, and color, while ''border-radius'' can be used to round the corners. For example: 
 + 
 +<code CSS> 
 +div { 
 +    border: 1px solid red; 
 +    border-radius: 5px; 
 +} 
 +</code> 
 + 
 +==== 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. 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.
Line 243: Line 263:
 {{:tanszek:oktatas:techcomm:pasted:20240905-153005.png}} {{: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. This is called the "box model."+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. 
 + 
 +==== Margin and padding ====
  
 The example below shows how to format a button. Try what happens when you change the button's border, margin and padding properties! The example below shows how to format a button. Try what happens when you change the button's border, margin and padding properties!
Line 271: Line 293:
 </code> </code>
  
-==== 10. Setting width and height ====+==== Cascading ====
  
-The ''width'' and ''height'' properties allow you to set the dimensions of an element.+By default, when multiple rules target the same selector, the later rule will override the previous one:
  
-<code CSS> +<code XML> 
-img { +<head> 
-    width: 100px; +    <style> 
-    height: 100px; +        p { 
-}+            color: red; 
 +        } 
 + 
 +        p { 
 +            color: green; 
 +        } 
 +    </style> 
 +</head> 
 +<body> 
 +    <p>This paragraph will be green.</p> 
 +</body>
 </code> </code>
  
-==== 11. Text styling ====+==== Specificity ====
  
-There are several properties available for text formatting.+When different selectors target the same element and define different values for the same property, **specificity** helps the browser decide which declaration to apply. For ordinary CSS rules in the same stylesheet, outside cascade layers and without ''!important'', a more specific selector takes priority over a less specific one, even if the less specific rule appears later.
  
-<code CSS> +For the selector types introduced above, the order of priority is:
-p { +
-    font-family: Arial; +
-    font-size: 16px; +
-    font-weight: bold; +
-    font-style: italic;+
  
-    text-decoration: underline; +  * **ID selectors**, such as ''#main-text'', have the highest specificity. 
-    text-align: justify; +  * **Class selectors**, such as ''.highlight'', have higher specificity than element selectors. 
-}+  * **Element selectors**, such as ''p'', have the lowest specificity of these three types. 
 + 
 +Let's see it in a simple example: 
 + 
 +<code XML> 
 +<!DOCTYPE html> 
 +<html> 
 +<head> 
 +    <title>CSS Specificity</title> 
 +    <style> 
 +        #main-text { 
 +            color: red; 
 +        } 
 + 
 +        .highlight { 
 +            color: green; 
 +        } 
 + 
 +        p { 
 +            color: blue; 
 +        } 
 +    </style> 
 +</head> 
 +<body> 
 +    <p id="main-text" class="highlight">This paragraph will be red.</p> 
 +    <p class="highlight">This paragraph will be green.</p> 
 +    <p>This paragraph will be blue.</p> 
 +</body> 
 +</html>
 </code> </code>
  
 +All three selectors match the first paragraph, but the ID selector wins, so its text is red. The second paragraph matches the class and element selectors, so the class selector makes it green. Only the element selector matches the third paragraph, making it blue. The element selector appears last, but this does not allow it to override the more specific selectors.
 +
 +For selectors that combine several parts, specificity is compared by counting **IDs**, then **classes**, then **elements**. The counts are compared in this order, rather than added together into a single score. For example, ''p.highlight'' is more specific than ''.highlight'' because both contain one class selector, but ''p.highlight'' also contains an element selector. Any number of class selectors still cannot outweigh an ID selector. Attribute selectors and pseudo-classes count in the class category, while pseudo-elements count in the element category; some special pseudo-classes have additional rules.
 +
 +If two competing selectors have the **same specificity**, the later declaration wins under the same conditions, as shown in the Cascading example. Specificity is compared separately for each property, so a rule that loses for ''color'' can still provide another property, such as ''font-size''.
 +
 +**Inline styles** normally take priority over normal declarations in stylesheets. The ''!important'' annotation changes a declaration's importance, rather than increasing its selector's specificity, and an important stylesheet declaration can override a normal inline style. Prefer clear selectors and reusable classes instead of relying on ''!important'' to resolve styling conflicts.
  
-==== 12. Exercise ====+==== 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}} {{:tanszek:oktatas:techcomm:pasted:20240905-153937.png?600}}
Line 318: Line 380:
  
 John von Neumann John von Neumann
-Image: https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/JohnvonNeumann-LosAlamos.jpg/462px-JohnvonNeumann-LosAlamos.jpg+Image: https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/JohnvonNeumann-LosAlamos.jpg/960px-JohnvonNeumann-LosAlamos.jpg
  
 Born: December 28, 1903   Born: December 28, 1903  
tanszek/oktatas/techcomm/cascading_style_sheets.1727775450.txt.gz · Last modified: by kissa