Scribd
Upload
48 views24 pages

Itec106 02 Css

CSS is a style sheet language used to describe the presentation of HTML and XML documents. Håkon Wium Lie developed CSS at CERN in 1994. CSS styles are applied to HTML elements using selectors, and cascade from multiple style rules with higher precedence overwriting lower precedence. CSS rules contain selectors that point to elements, and declaration blocks with properties and values to style elements. Common selectors include type, class, ID, child, adjacent sibling and general sibling selectors. Pseudo-classes and pseudo-elements allow styling elements based on states or inserting new elements. The box model represents elements as boxes that may be sized and spaced via margins, borders, padding, and content. Specificity determines which rule wins

Uploaded by

Lizette Paez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
48 views24 pages

Itec106 02 Css

CSS is a style sheet language used to describe the presentation of HTML and XML documents. Håkon Wium Lie developed CSS at CERN in 1994. CSS styles are applied to HTML elements using selectors, and cascade from multiple style rules with higher precedence overwriting lower precedence. CSS rules contain selectors that point to elements, and declaration blocks with properties and values to style elements. Common selectors include type, class, ID, child, adjacent sibling and general sibling selectors. Pseudo-classes and pseudo-elements allow styling elements based on states or inserting new elements. The box model represents elements as boxes that may be sized and spaced via margins, borders, padding, and content. Specificity determines which rule wins

Uploaded by

Lizette Paez
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 24

CSS

ITEC106
What is CSS?
• Cascading Style Sheet
• Håkon Wium Lie - He is best known for developing Cascading Style
Sheets (CSS) while working with Tim Berners-Lee and Robert Cailliau
at CERN in 1994.
• Cascading Style Sheets (CSS) is a style sheet language used for
describing the presentation of a document written in a markup
language such as HTML or XML
• CSS describes how HTML elements are to be displayed on screen, or
in other media
What is Cascading?
The “cascading” in CSS refers to the fact that styling rules “cascade”
down from several sources. This means that CSS has an inherent
hierarchy and styles of a higher precedence will overwrite rules of a
lower precedence.
CSS Syntax/Rule
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated by
semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.
• Multiple CSS declarations are separated with semicolons, and
declaration blocks are surrounded by curly braces.
CSS Syntax/Rule
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
want to style.
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute
value)
Simple selectors
Universal selector - also known as a wildcard—
matches any element.

Type selector - matches a HTML element


directly.

Class selector - matches any element that has


that class applied to it.
Simple selectors
ID selector - uses the id attribute of an HTML
element to select a specific element.
Combinator selectors
Descendant selector (space) - allows us to target
a child element. This uses a space.

Adjacent sibling selector (+) - You can look for an


element that immediately follows another
element

Child Selector (>) - selects all elements that are


the children of a specified element.
Combinator selectors
General Sibling Selector (~) - selects all elements
that are next siblings of a specified element.
Pseudo-classes
HTML elements find themselves in various states, either because they
are interacted with, or one of their child elements is in a certain state.
For example, an HTML element could be hovered with the mouse
pointer by a user or a child element could also be hovered by the user.
Pseudo-element
Pseudo-elements differ from pseudo-
classes because instead of responding
to the platform state, they act as if they
are inserting a new element with CSS.
Pseudo-elements are also syntactically
different from pseudo-classes, because
instead of using a single colon (:), we
use a double colon (::).
Attribute selector
Instruct CSS to look for attributes by
wrapping the selector with square
brackets ([ ]).
Box model
Box model
Everything displayed by CSS is a box. Understanding how the CSS Box
Model works is therefore a core foundation of CSS.
The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual content.
• 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
Intrinsic and extrinsic sizing
• Consider a div element containing content that has a fixed width and
height of 200px:
Intrinsic and extrinsic sizing
Intrinsic and extrinsic sizing
When we alter the natural size of an element by applying a specific
value to it, as seen in the image, we refer to that sizing as extrinsic.
On the other hand, when the content’s size defines the element’s size,
we refer to that as intrinsic or natural size.
By restricting the block’s dimension to a specific size, we experience a
content overflow, a downside of extrinsic sizing.
Box-sizing: content-box
• Having content-box as the value of box-sizing means that when you
set dimensions, such as a width and height, they will be applied to the
content box. If you then set padding and border, these values will be
added to the content box's size.
Box-sizing:border-box
• This alternative box model tells CSS to apply the width to the border
box instead of the content box. This means that our border and
padding get pushed in, and as a result, when you set .my-box to be
200px wide: it actually renders at 200px wide.
What is Specificity?
• If there are two or more CSS rules that point to the same element, the
selector with the highest specificity value will "win", and its style
declaration will be applied to that HTML element.
• Think of specificity as a score/rank that determines which style
declaration is ultimately applied to an element.
Specificity Hierarchy
Every CSS selector has its place in the specificity hierarchy.
There are four categories which define the specificity level of a selector:
1. Inline styles - Example: <h1 style="color: pink;">
2. IDs - Example: #navbar
3. Classes, pseudo-classes, attribute selectors - Example: .test, :hover,
[href]
4. Elements and pseudo-elements - Example: h1, ::before
How to Calculate Specificity?
Memorize how to calculate specificity!
Start at 0, add 100 for each ID value, add 10 for each class value (or
pseudo-class or attribute selector), add 1 for each element selector or
pseudo-element.

Note: Inline style gets a specificity value of 1000, and is always given
the highest priority!
Note 2: There is one exception to this rule: if you use the !important
rule, it will even override inline styles!
Important links
• https://www.w3schools.com/cssref/css_selectors.php
• https://www.w3schools.com/css/css_specificity.asp
• https://www.w3schools.com/cssref/css_functions.php

CSS Reset
• https://andy-bell.co.uk/a-modern-css-reset/

CSS Mastery
• https://css-challenges.com/
• https://cssbattle.dev/

You might also like