CSS - CL2 Flashcards
CSS: Complex rules and defining styles structure (defining rules that applies to specific elements based on complex condition)
CSS Specificity
What is Specificity?
If there are two or more conflicting CSS rules that point to the same element, the browser follows some rules to determine which one is most specific and therefore wins out.
Think of specificity as a score/rank that determines which style declarations are ultimately applied to an element.
The universal selector (*) has low specificity, while ID selectors are highly specific!
Note: Specificity is a common reason why your CSS-rules don’t apply to some elements, although you think they should.
Specificity Hierarchy
Every selector has its place in the specificity hierarchy. There are four categories which define the specificity level of a selector:
Inline styles - An inline style is attached directly to the element to be styled. Example: h1 style=”color: #ffffff;”
IDs - An ID is a unique identifier for the page elements, such as #navbar.
Classes, attributes and pseudo-classes - This category includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
Elements and pseudo-elements - This category includes element names and pseudo-elements, such as h1, div, :before and :after.
How to Calculate Specificity?
Memorize how to calculate specificity!
Start at 0, add 1000 for style attribute, add 100 for each ID, add 10 for each attribute, class or pseudo-class, add 1 for each element name or pseudo-element.
Consider these three code fragments:
Example
A: h1
B: #content h1
C: <div><h1 style="color: #ffffff;">Heading</h1></div>
The specificity of A is 1 (one element)
The specificity of B is 101 (one ID reference and one element)
The specificity of C is 1000 (inline styling)
Since 1 < 101 < 1000, the third rule (C) has a greater level of specificity, and therefore will be applied.
CSS: Box models
The CSS Box Model
All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
Explanation of the different parts:
- 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
The box model allows us to add a border around elements, and to define space between elements.
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.
Important: When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must also add padding, borders and margins.
CSS: Typography & Fonts
CSS Web Fonts
The CSS @font-face Rule
Web fonts allow Web designers to use fonts that are not installed on the user’s computer.
When you have found/bought the font you wish to use, just include the font file on your web server, and it will be automatically downloaded to the user when needed.
Your “own” fonts are defined within the CSS @font-face rule.
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered trademark of Microsoft. OpenType fonts are used commonly today on the major computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C Recommendation. WOFF is essentially OpenType or TrueType with compression and additional metadata. The goal is to support font distribution from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification define a font module that allows the creation of fonts within an SVG document. You can also apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded fonts on web pages.
Using The Font You Want
In the @font-face rule; first define a name for the font (e.g. myFirstFont) and then point to the font file.
Tip: Always use lowercase letters for the font URL. Uppercase letters can give unexpected results in IE.
To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
Example
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
Using Bold Text
You must add another @font-face rule containing descriptors for bold text
Get Started with the Google Fonts API
This guide explains how to use the Google Fonts API to add fonts to your web pages. You don’t need to do any programming; all you have to do is add a special stylesheet link to your HTML document, then refer to the font in a CSS style.
Overview
You can start using the Google Fonts API in just two steps:
1. Add a stylesheet link to request the desired web font(s):
- Style an element with the requested web font, either in a stylesheet:
.css-selector {
font-family: ‘Font Name’, serif;
}
or with an inline style on the element itself:
<div>Your text</div>
Specifying font families and styles in a stylesheet URL
To determine what URL to use in your stylesheet link, start with the Google Fonts API base URL:
https://fonts.googleapis.com/css
Then, add the family= URL parameter, with one or more font family names and styles.
For example, to request the Inconsolata font:
https://fonts.googleapis.com/css?family=Inconsolata
To request multiple font families, separate the names with a pipe character (|).
For example, to request the fonts Tangerine, Inconsolata, and Droid Sans:
https://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans
Requesting multiple fonts allows you to use all of those fonts in your page. (But don’t go overboard; most pages don’t need very many fonts, and requesting a lot of fonts may make your pages slow to load.)
The Google Fonts API provides the regular version of the requested fonts by default. To request other styles or weights, append a colon (:) to the name of the font, followed by a list of styles or weights separated by commas (,).
Use font-display
font-display lets you control what happens while the font is unavailable. Specifying a value other than the default auto is usually appropriate.
Pass the desired value in the querystring display parameter:
https://fonts.googleapis.com/css?family=Roboto&display=swap
CSS3: Transitions, animations, transforms
CSS Transitions CSS transitions allows you to change property values smoothly, over a given duration. In this chapter you will learn about the following properties: - transition - transition-delay - transition-duration - transition-property - transition-timing-function
How to Use CSS Transitions?
To create a transition effect, you must specify two things:
the CSS property you want to add an effect to
the duration of the effect
Note: If the duration part is not specified, the transition will have no effect, because the default value is 0.
The following example shows a 100px * 100px red <div> element. The <div> element has also specified a transition effect for the width property, with a duration of 2 seconds:
Example
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s;
}
The transition effect will start when the specified CSS property (width) changes value.
Change Several Property Values
The following example adds a transition effect for both the width and height property, with a duration of 2 seconds for the width and 4 seconds for the height:
Example
div {
transition: width 2s, height 4s;
}
Specify the Speed Curve of the Transition
The transition-timing-function property specifies the speed curve of the transition effect.
The transition-timing-function property can have the following values:
- ease - specifies a transition effect with a slow start, then fast, then end slowly (this is default)
- linear - specifies a transition effect with the same speed from start to end
- ease-in - specifies a transition effect with a slow start
- ease-out - specifies a transition effect with a slow end
- ease-in-out - specifies a transition effect with a slow start and end
- cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-bezier function
The following example shows the some of the different speed curves that can be used:
Example
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
Delay the Transition Effect
The transition-delay property specifies a delay (in seconds) for the transition effect.
The following example has a 1 second delay before starting:
Example
div {
transition-delay: 1s;
}
Transition + Transformation
The following example adds a transition effect to the transformation:
Example
div {
transition: width 2s, height 2s, transform 2s;
}
CSS Animations CSS allows animation of HTML elements without using JavaScript or Flash! In this chapter you will learn about the following properties: - @keyframes - animation-name - animation-duration - animation-delay - animation-iteration-count - animation-direction - animation-timing-function - animation-fill-mode - animation
What are CSS Animations?
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.
To use CSS animation, you must first specify some keyframes for the animation.
Keyframes hold what styles the element will have at certain times.
The @keyframes Rule
When you specify CSS styles inside the @keyframes rule, the animation will gradually change from the current style to the new style at certain times.
To get an animation to work, you must bind the animation to an element.
The following example binds the “example” animation to the <div> element. The animation will last for 4 seconds, and it will gradually change the background-color of the <div> element from “red” to “yellow”:
Example
/* The animation code /
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/ The element to apply the animation to */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Note: The animation-duration property defines how long time an animation should take to complete. If the animation-duration property is not specified, no animation will occur, because the default value is 0s (0 seconds).
In the example above we have specified when the style will change by using the keywords “from” and “to” (which represents 0% (start) and 100% (complete)).
It is also possible to use percent. By using percent, you can add as many style changes as you like.
Delay an Animation
The animation-delay property specifies a delay for the start of an animation.
Negative values are also allowed. If using negative values, the animation will start as if it had already been playing for N seconds.
Set How Many Times an Animation Should Run
The animation-iteration-count property specifies the number of times an animation should run.
Run Animation in Reverse Direction or Alternate Cycles
The animation-direction property specifies whether an animation should be played forwards, backwards or in alternate cycles.
The animation-direction property can have the following values:
- normal - The animation is played as normal (forwards). This is default
- reverse - The animation is played in reverse direction (backwards)
- alternate - The animation is played forwards first, then backwards
- alternate-reverse - The animation is played backwards first, then forwards
Specify the Speed Curve of the Animation
The animation-timing-function property specifies the speed curve of the animation.
The animation-timing-function property can have the following values:
- ease - Specifies an animation with a slow start, then fast, then end slowly (this is default)
- linear - Specifies an animation with the same speed from start to end
- ease-in - Specifies an animation with a slow start
- ease-out - Specifies an animation with a slow end
- ease-in-out - Specifies an animation with a slow start and end
- cubic-bezier(n,n,n,n) - Lets you define your own values in a cubic-bezier function
Specify the fill-mode For an Animation
CSS animations do not affect an element before the first keyframe is played or after the last keyframe is played. The animation-fill-mode property can override this behavior.
The animation-fill-mode property specifies a style for the target element when the animation is not playing (before it starts, after it ends, or both).
The animation-fill-mode property can have the following values:
- none - Default value. Animation will not apply any styles to the element before or after it is executing
- forwards - The element will retain the style values that is set by the last keyframe (depends on animation-direction and animation-iteration-count)
- backwards - The element will get the style values that is set by the first keyframe (depends on animation-direction), and retain this during the animation-delay period
- both - The animation will follow the rules for both forwards and backwards, extending the animation properties in both directions
Animation Shorthand Property
The example below uses six of the animation properties:
Example
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
The same animation effect as above can be achieved by using the shorthand animation property:
Example
div {
animation: example 5s linear 2s infinite alternate;
}
CSS 2D Transforms
CSS transforms allow you to move, rotate, scale, and skew elements.
In this chapter you will learn about the following CSS property:
transform
CSS 2D Transforms Methods With the CSS transform property you can use the following 2D transformation methods: translate() rotate() scaleX() scaleY() scale() skewX() skewY() skew() matrix()
The translate() Method The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis
The rotate() Method The rotate() method rotates an element clockwise or counter-clockwise according to a given degree. Using negative values will rotate the element counter-clockwise.
The scale() Method The scale() method increases or decreases the size of an element (according to the parameters given for the width and height).
The scaleX() Method The scaleX() method increases or decreases the width of an element.
The scaleY() Method The scaleY() method increases or decreases the height of an element.
The skewX() Method The skewX() method skews an element along the X-axis by the given angle.
The skewY() Method The skewY() method skews an element along the Y-axis by the given angle.
The skew() Method The skew() method skews an element along the X and Y-axis by the given angles.
The matrix() Method The matrix() method combines all the 2D transform methods into one. The matrix() method take six parameters, containing mathematic functions, which allows you to rotate, scale, move (translate), and skew elements.
CSS 3D Transforms
CSS also supports 3D transformations.
CSS 3D Transforms Methods With the CSS transform property you can use the following 3D transformation methods: rotateX() rotateY() rotateZ() </div></div></div></div>
Preprocessors: SASS/SCSS, Less, PostCSS main features and concepts
Sass (short for syntactically awesome style sheets) is a style sheet language initially designed by Hampton Catlin and developed by Natalie Weizenbaum.[2][3] After its initial versions, Weizenbaum and Chris Eppstein have continued to extend Sass with SassScript, a simple scripting language used in Sass files.
Sass is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets (CSS). SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called “the indented syntax,” uses a syntax similar to Haml.[4] It uses indentation to separate code blocks and newline characters to separate rules. The newer syntax, “SCSS” (Sassy CSS), uses block formatting like that of CSS. It uses braces to denote code blocks and semicolons to separate lines within a block. The indented syntax and SCSS files are traditionally given the extensions .sass and .scss, respectively.
CSS3 consists of a series of selectors and pseudo-selectors that group rules that apply to them. Sass[5] (in the larger context of both syntaxes) extends CSS by providing several mechanisms available in more traditional programming languages, particularly object-oriented languages, but that are not available to CSS3 itself. When SassScript is interpreted, it creates blocks of CSS rules for various selectors as defined by the Sass file. The Sass interpreter translates SassScript into CSS. Alternatively, Sass can monitor the .sass or .scss file and translate it to an output .css file whenever the .sass or .scss file is saved.[6]
The indented syntax is a metalanguage. SCSS is a nested metalanguage, as valid CSS is valid SCSS with the same semantics.
SassScript provides the following mechanisms: variables, nesting, mixins, and selector inheritance.
Link:
https://en.wikipedia.org/wiki/Sass_(stylesheet_language)
Less (Leaner Style Sheets; sometimes stylized as LESS) is a dynamic preprocessor style sheet language that can be compiled into Cascading Style Sheets (CSS) and run on the client side or server side.[2] Designed by Alexis Sellier, Less is influenced by Sass and has influenced the newer “SCSS” syntax of Sass, which adapted its CSS-like block formatting syntax.[3] Less is open source. Its first version was written in Ruby; however, in the later versions, use of Ruby has been deprecated and replaced by JavaScript. The indented syntax of Less is a nested metalanguage, as valid CSS is valid Less code with the same semantics. Less provides the following mechanisms: variables, nesting, mixins, operators and functions; the main difference between Less and other CSS precompilers being that Less allows real-time compilation via less.js by the browser.[2][4]
Link:
https://en.wikipedia.org/wiki/Less_(stylesheet_language)
Preprocessors: Variables, nesting, mixins
Sass Variables Variables are a way to store information that you can re-use later. With Sass, you can store information in variables, like: - strings - numbers - colors - booleans - lists - nulls
Sass uses the $ symbol, followed by a name, to declare variables:
Sass Variable Syntax:
$variablename: value;
The following example declares 4 variables named myFont, myColor, myFontSize, and myWidth. After the variables are declared, you can use the variables wherever you want: SCSS Syntax: $myFont: Helvetica, sans-serif; $myColor: red; $myFontSize: 18px; $myWidth: 680px;
Sass Variable Scope
Sass variables are only available at the level of nesting where they are defined.
Using Sass !global
The default behavior for variable scope can be overridden by using the !global switch.
!global indicates that a variable is global, which means that it is accessible on all levels.
Sass Nested Rules
Sass lets you nest CSS selectors in the same way as HTML.
Sass Nested Properties
Many CSS properties have the same prefix, like font-family, font-size and font-weight or text-align, text-transform and text-overflow.
With Sass you can write them as nested properties:
Example
SCSS Syntax:
font: {
family: Helvetica, sans-serif;
size: 18px;
weight: bold;
}
text: {
align: center;
transform: lowercase;
overflow: hidden;
}
Sass @mixin and @include
Sass Mixins
The @mixin directive lets you create CSS code that is to be reused throughout the website.
The @include directive is created to let you use (include) the mixin.
Defining a Mixin
A mixin is defined with the @mixin directive.
Sass @mixin Syntax:
@mixin name {
property: value;
property: value;
...
}
Using a Mixin
The @include directive is used to include a mixin.
Sass @include mixin Syntax:
selector {
@include mixin-name;
}
So, to include the important-text mixin created above:
SCSS Syntax:
.danger {
@include important-text;
background-color: green;
}
Sass @extend Directive
The @extend directive lets you share a set of CSS properties from one selector to another.
The @extend directive is useful if you have almost identically styled elements that only differ in some small details.
By using the @extend directive, you do not need to specify several classes for an element in your HTML code, like this: Report this. You just need to specify .button-report to get both sets of styles.
The @extend directive helps keep your Sass code very DRY.
Bootsrap/Foundation: Components (tabs, form elements), themes
https://getbootstrap.com/
Bootstrap/Foundation: Customization (adapt component/theme to project specific)
https://getbootstrap.com/
CSS Methodologies (BEM, OOCSS, SMACSS, etc.): Overall princeples
BEM
https://css-tricks.com/bem-101/
OOCSS
https://www.keycdn.com/blog/oocss
CSS Modules
https://github.com/css-modules/css-modules
