CSS: Difference between revisions

From Computer Science Wiki
No edit summary
(se)
 
(26 intermediate revisions by the same user not shown)
Line 6: Line 6:




==Basic ideas ==
== Basic ideas ==


<html>
<html>
Line 13: Line 13:


* [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started This is an excellent tutorial to get started with CSS]
* [https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started This is an excellent tutorial to get started with CSS]
== CSS Syntax ==
At its most basic level, CSS consists of two building blocks:
* Properties: Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
* Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)
A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. And finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules).<ref>https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax</ref>
[[File:Css syntax.png]]
== Selectors ==
* Selectors define to which elements a set of CSS rules apply. <ref>https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors</ref>
* [https://www.w3schools.com/cssref/trysel.asp Click here for an interactive selector tool]
== Properties and Values==
Mozilla developers network has excellent resources and information for CSS<ref>https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Syntax</ref>
* '''Properties''': Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
* '''Values''': Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)
Please [https://www.w3schools.com/cssref/ click here for a well organized list of properties]
== Units of measurements ==
In CSS you will often specify how large you want something to be (for example, the font size of something, or maybe the width of a border). There are two different categories of measurements, absolute and relative. As usual, our friends at the Mozilla Developers Network have some great material to teach us about CSS Units of measurement<ref>https://developer.mozilla.org/en/docs/Web/CSS/length</ref>
<br />
'''Relative length units'''
Relative lengths describe a length in terms of some other length, such as the size of a specific character in the current font, the size of the parent element, or the size of the viewport. Relative length units indicate which other length the specified value is relative to.
'''Absolute length units'''
Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit, and then defining the others relative to it. The anchor is done differently for low-resolution devices, such as screens, and high-resolution devices, such as printers.
Please do look at the following links. All of them say essentially the same thing in different ways, how units of measurement work in CSS:
* https://www.w3.org/Style/Examples/007/units.en.html
* https://developer.mozilla.org/en/docs/Web/CSS/length
* https://www.w3schools.com/cssref/css_units.asp
== Positioning ==
One of the most helpful things you can do in CSS is to position an elements where you want it. We have three four different ways of positioning an elements and it is helpful to understand how they work.
From W3<ref>https://www.w3schools.com/cssref/pr_class_position.asp</ref>:
{| class="wikitable"
|-
! Position Selector !! Position Description
|-
| static || Default value. Elements render in order, as they appear in the document flow
|-
| absolute || The element is positioned relative to its first positioned (not static) ancestor element
|-
| fixed || The element is positioned relative to the browser window
|-
| relative || The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
|-
| sticky || The element is positioned based on the user's scroll position
A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed)
|}


== Standards ==
== Standards ==
Line 26: Line 88:
* Demonstrate knowledge and skill using floating and positioning
* Demonstrate knowledge and skill using floating and positioning
* Demonstrate knowledge and skill using box model
* Demonstrate knowledge and skill using box model
* Demonstrate knowledge and skill using text effects
* Demonstrate knowledge and skill using external style sheets
* Demonstrate knowledge and skill using 2D/3D transformations
* Demonstrate knowledge and skill using multiple column layout
* Demonstrate knowledge and skill using user interface


== References ==  
== References ==  

Latest revision as of 08:09, 1 September 2019

CSS[1]

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. Although most often used to set the visual style of web pages and user interfaces written in HTML and XHTML, the language can be applied to any XML document, including plain XML, SVG and XUL, and is applicable to rendering in speech, or on other media. Along with HTML and JavaScript, CSS is a cornerstone technology used by most websites to create visually engaging webpages, user interfaces for web applications, and user interfaces for many mobile applications.[2]

Although this is debatable, CSS is a Domain-specific declarative language. It serves a very specific purpose in a rather narrow capacity when compared to other formal programming languages.


Basic ideas[edit]

CSS Syntax[edit]

At its most basic level, CSS consists of two building blocks:

  • Properties: Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
  • Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)

A property paired with a value is called a CSS declaration. CSS declarations are put within CSS Declaration Blocks. And finally, CSS declaration blocks are paired with selectors to produce CSS Rulesets (or CSS Rules).[3]

Css syntax.png

Selectors[edit]

  • Selectors define to which elements a set of CSS rules apply. [4]

Properties and Values[edit]

Mozilla developers network has excellent resources and information for CSS[5]

  • Properties: Human-readable identifiers that indicate which stylistic features (e.g. font, width, background color) you want to change.
  • Values: Each specified property is given a value, which indicates how you want to change those stylistic features (e.g. what you want to change the font, width or background color to.)


Please click here for a well organized list of properties

Units of measurements[edit]

In CSS you will often specify how large you want something to be (for example, the font size of something, or maybe the width of a border). There are two different categories of measurements, absolute and relative. As usual, our friends at the Mozilla Developers Network have some great material to teach us about CSS Units of measurement[6]


Relative length units Relative lengths describe a length in terms of some other length, such as the size of a specific character in the current font, the size of the parent element, or the size of the viewport. Relative length units indicate which other length the specified value is relative to.

Absolute length units Absolute length units represent a physical measurement when the physical properties of the output medium are known, such as for print layout. This is done by anchoring one of the units to a physical unit, and then defining the others relative to it. The anchor is done differently for low-resolution devices, such as screens, and high-resolution devices, such as printers.

Please do look at the following links. All of them say essentially the same thing in different ways, how units of measurement work in CSS:


Positioning[edit]

One of the most helpful things you can do in CSS is to position an elements where you want it. We have three four different ways of positioning an elements and it is helpful to understand how they work.

From W3[7]:

Position Selector Position Description
static Default value. Elements render in order, as they appear in the document flow
absolute The element is positioned relative to its first positioned (not static) ancestor element
fixed The element is positioned relative to the browser window
relative The element is positioned relative to its normal position, so "left:20px" adds 20 pixels to the element's LEFT position
sticky The element is positioned based on the user's scroll position

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed)

Standards[edit]

  • Define CSS
  • Discuss structure of CSS and the cascade
  • Demonstrate knowledge and skill using selectors
  • Demonstrate knowledge and skill using values and units
  • Demonstrate knowledge and skill using text properties
  • Demonstrate knowledge and skill using basic visual properties
  • Demonstrate knowledge and skill using padding, borders and margins
  • Demonstrate knowledge and skill using colors, borders and backgrounds
  • Demonstrate knowledge and skill using floating and positioning
  • Demonstrate knowledge and skill using box model
  • Demonstrate knowledge and skill using external style sheets

References[edit]