Selectors & Combinations, Character Sets & Fonts
Lesson 4.2
START
Objectives
Inform students that computers can understand input as binary code, which is translated into bits. Introduce ASCII which is a character encoding standard used to represent different characters.
+ Next
Combinator selectors
Objectives
What is AscII
Vocabulary
AscII Timeline
Documentation
Unicode
Quote
Generic Fonts
Universal Selector
Grouping selector
Interactive question
+ Next
Vocabulary
Character Sets: codes used by a browser to display text, numbers, and symbols on a computer. ASCII: Stands for American Standard Code for Information Interchange and the first character set used between computers on the Internet. Code Points: a numerical value that maps to a specific character. Binary Code: A code used based on a binary number system in which there are only two possible states, symbolized by 0s and 1s. Bits: The most basic unit of information in computing and digital communications Unicode: the information technology standard used for encoding and representing most of the world’s writing systems. UTF-8: a character encoding standard used for electronic communication Bytes: a unit of digital information that consists of eight bits Fonts: a collection of characters with similar design. Glyphs: a specific shape, design, or representation of a character Serif: a small line or stroke regularly attached to the end of a letter or symbol within a particular font.
07:00
+ click here
+ Next
documentation
Universal Selector - * : a special selector that selects all elements on an HTML. Selector List - , : used to separate lists of selectors. Child Combinator - > : placed within two selectors, and will only style elements that match the second selector and are the direct children of elements that match the first selector. Descendant Combinator: represented by a space character and placed within two selectors, and styles elements that match the second selector and have an ancestor that matches the first selector. General Sibling Combinator - ~: placed within two selectors, and matches all iterations of the second selector that come after the first selector, and are children of the same element. Adjacent Sibling Combinator - + : placed within two selectors, and will style elements that match the second selector only if they immediately follow elements that match the first selector, and they are both children of the same element.
Universal Selector
Selector List
Child Combinator
>
General Sibling Combinator
Adjacent Sibling Combinator
+ click here
+ Next
“Everybody should learn to program a computer, because it teaches you how to think.”
+ Next
- Steve Jobs
Lesson Outline
+ Next
The Universal Selector (*)
A quick way to select all elements within an HTML document is to use the universal selector
Ex. * { color: blue; text-align: center; }
One of the most common use of a univeral selector is to act as a method for resetting default browser styles for an HTML document.
+ Next
The Grouping Selector(,)
Why Use It: It reduces code repetition and makes it easier to manage common styles across different elements.
Ex. h1 , div, p { color: blue; text-align: center; }
How to Use: Write the selectors (e.g., h1, .className, #idName) for each element you want to style, separated by commas.
+ Next
Combinator selectors
Child Combinator
Sibling Combinator
Descendant Combinator
H1 ~ H2 { color:red; }
Div h1 { color:green; }
Div > h2 { color:purple; }
+ Click here
+ Click here
+ Click here
+ Next
What is Ascii?
ASCII stands for
American Standard Code for Information Interchange
+ Next
ASCIITimeline
Write a great subtitle here toprovide context
Origin
Early 1960's
ASCII Table
October 6, 1960
1679
Binary Language
Unicode
Developed in the 1980's
+ Next
Unicode
- Developed in the 1980's unicode was designed to include all characters from all writing systems.
- Unicode Transformation Format 8-bit is just one of several encoding schemes used to repreent Unicode code points.
- UTF-8 represents a Unicode character using anywhere from 1 to 4 bytes for each character.
Here you can include a relevant data to highlight
Here you can include a relevant data to highlight
+ Next
5 Generic Font Families
A designer has to work to make every individual character, so it matches the overall style of the font.
Serif
+ Click here
Sans-serif
+ Click here
Cursive
+ Click here
Fantasy
+ Click here
Monospace
+ Click here
+ Next
Interactive Question
1/4
Interactive Question
4/4
Interactive Question
3/4
Interactive Question
4/4
Completed!
1. The adjacent sibling selector will style the elements that come directly after another specified element. 2. The second selector defines the element that’s being styled and the first selector defines the element that must come before the styled element.
With this feature...
Commonly used for body text because they're considered to be more legible.
Originating in the early 1960's...
ASCII is the first standardized character set used between devices for exchanging messages ocer the internet.
Did you know???
Binary language is how computers understand and process information and by converting and storing sets of bits they're able to understand different units of data. Binary language was invented around 1679 then published in 1703.
1. The child combinator will select all elements that are direct children of the specified element. 2. The child combinator is represented by a greater than sign (>) which is placed between two simple CSS selectors. 3. When used the elements that are the type of the second selector and direct children of the first selector will be styled.
1. The descendant selector will match all elements that are descendants of specified element. 2. It is represented by a space which is then placed between the two simple selectors. 3. When used the elements that are the type of the second selector and descendants of the first selector will be styled.
Tip:
They're meant to appeal to more whimsical, adventurous, and playful use cases.
ASCII characters may be represented in the following ways: 1. As pairs of hexadecimal digits -- base-16 numbers, represented as 0 through 9 and A through F for the decimal values of 10-15; as three-digit octal (base 8) numbers; as decimal numbers from 0 to 127; or as 7-bit or 8-bit binary
Write a great headline
With Genially templates, you can include visual resources to leave your audience amazed. You can also highlight a specific phrase or data that will be etched in the memory of your audience, and even embed external content that surprises: videos, photos, audios... Whatever you want!
In an ASCII file, each alphabetic, numeric, or special character is represented with a 7 number (a string of seven 0s or 1s). 128 possible characters are defined.
Did you know...
The ACSII table represents 128 different characters using the binary language.
Did you know...
Commonly used for headlines because they're simple and provide a minimalistic modern feel.
Attention!
Font looks like they've been handwritten which is useful when the text should have a more formal or artistic touch.
Write a great headline
With Genially templates, you can include visual resources to leave your audience amazed. You can also highlight a specific phrase or data that will be etched in the memory of your audience, and even embed external content that surprises: videos, photos, audios... Whatever you want!
Tip:
They are often the default fonts used in tools like code editors.
Lesson 4.2: Selectors & Combinations, Character Sets & Fonts
Jasmine
Created on October 7, 2024
Start designing with a free template
Discover more than 1500 professional designs like these:
View
Hanukkah Presentation
View
Vintage Photo Album
View
Nature Presentation
View
Halloween Presentation
View
Tarot Presentation
View
Vaporwave presentation
View
Women's Presentation
Explore all templates
Transcript
Selectors & Combinations, Character Sets & Fonts
Lesson 4.2
START
Objectives
Inform students that computers can understand input as binary code, which is translated into bits. Introduce ASCII which is a character encoding standard used to represent different characters.
+ Next
Combinator selectors
Objectives
What is AscII
Vocabulary
AscII Timeline
Documentation
Unicode
Quote
Generic Fonts
Universal Selector
Grouping selector
Interactive question
+ Next
Vocabulary
Character Sets: codes used by a browser to display text, numbers, and symbols on a computer. ASCII: Stands for American Standard Code for Information Interchange and the first character set used between computers on the Internet. Code Points: a numerical value that maps to a specific character. Binary Code: A code used based on a binary number system in which there are only two possible states, symbolized by 0s and 1s. Bits: The most basic unit of information in computing and digital communications Unicode: the information technology standard used for encoding and representing most of the world’s writing systems. UTF-8: a character encoding standard used for electronic communication Bytes: a unit of digital information that consists of eight bits Fonts: a collection of characters with similar design. Glyphs: a specific shape, design, or representation of a character Serif: a small line or stroke regularly attached to the end of a letter or symbol within a particular font.
07:00
+ click here
+ Next
documentation
Universal Selector - * : a special selector that selects all elements on an HTML. Selector List - , : used to separate lists of selectors. Child Combinator - > : placed within two selectors, and will only style elements that match the second selector and are the direct children of elements that match the first selector. Descendant Combinator: represented by a space character and placed within two selectors, and styles elements that match the second selector and have an ancestor that matches the first selector. General Sibling Combinator - ~: placed within two selectors, and matches all iterations of the second selector that come after the first selector, and are children of the same element. Adjacent Sibling Combinator - + : placed within two selectors, and will style elements that match the second selector only if they immediately follow elements that match the first selector, and they are both children of the same element.
Universal Selector
Selector List
Child Combinator
>
General Sibling Combinator
Adjacent Sibling Combinator
+ click here
+ Next
“Everybody should learn to program a computer, because it teaches you how to think.”
+ Next
- Steve Jobs
Lesson Outline
+ Next
The Universal Selector (*)
A quick way to select all elements within an HTML document is to use the universal selector
Ex. * { color: blue; text-align: center; }
One of the most common use of a univeral selector is to act as a method for resetting default browser styles for an HTML document.
+ Next
The Grouping Selector(,)
Why Use It: It reduces code repetition and makes it easier to manage common styles across different elements.
Ex. h1 , div, p { color: blue; text-align: center; }
How to Use: Write the selectors (e.g., h1, .className, #idName) for each element you want to style, separated by commas.
+ Next
Combinator selectors
Child Combinator
Sibling Combinator
Descendant Combinator
H1 ~ H2 { color:red; }
Div h1 { color:green; }
Div > h2 { color:purple; }
+ Click here
+ Click here
+ Click here
+ Next
What is Ascii?
ASCII stands for
American Standard Code for Information Interchange
+ Next
ASCIITimeline
Write a great subtitle here toprovide context
Origin
Early 1960's
ASCII Table
October 6, 1960
1679
Binary Language
Unicode
Developed in the 1980's
+ Next
Unicode
Here you can include a relevant data to highlight
Here you can include a relevant data to highlight
+ Next
5 Generic Font Families
A designer has to work to make every individual character, so it matches the overall style of the font.
Serif
+ Click here
Sans-serif
+ Click here
Cursive
+ Click here
Fantasy
+ Click here
Monospace
+ Click here
+ Next
Interactive Question
1/4
Interactive Question
4/4
Interactive Question
3/4
Interactive Question
4/4
Completed!
1. The adjacent sibling selector will style the elements that come directly after another specified element. 2. The second selector defines the element that’s being styled and the first selector defines the element that must come before the styled element.
With this feature...
Commonly used for body text because they're considered to be more legible.
Originating in the early 1960's...
ASCII is the first standardized character set used between devices for exchanging messages ocer the internet.
Did you know???
Binary language is how computers understand and process information and by converting and storing sets of bits they're able to understand different units of data. Binary language was invented around 1679 then published in 1703.
1. The child combinator will select all elements that are direct children of the specified element. 2. The child combinator is represented by a greater than sign (>) which is placed between two simple CSS selectors. 3. When used the elements that are the type of the second selector and direct children of the first selector will be styled.
1. The descendant selector will match all elements that are descendants of specified element. 2. It is represented by a space which is then placed between the two simple selectors. 3. When used the elements that are the type of the second selector and descendants of the first selector will be styled.
Tip:
They're meant to appeal to more whimsical, adventurous, and playful use cases.
ASCII characters may be represented in the following ways: 1. As pairs of hexadecimal digits -- base-16 numbers, represented as 0 through 9 and A through F for the decimal values of 10-15; as three-digit octal (base 8) numbers; as decimal numbers from 0 to 127; or as 7-bit or 8-bit binary
Write a great headline
With Genially templates, you can include visual resources to leave your audience amazed. You can also highlight a specific phrase or data that will be etched in the memory of your audience, and even embed external content that surprises: videos, photos, audios... Whatever you want!
In an ASCII file, each alphabetic, numeric, or special character is represented with a 7 number (a string of seven 0s or 1s). 128 possible characters are defined.
Did you know...
The ACSII table represents 128 different characters using the binary language.
Did you know...
Commonly used for headlines because they're simple and provide a minimalistic modern feel.
Attention!
Font looks like they've been handwritten which is useful when the text should have a more formal or artistic touch.
Write a great headline
With Genially templates, you can include visual resources to leave your audience amazed. You can also highlight a specific phrase or data that will be etched in the memory of your audience, and even embed external content that surprises: videos, photos, audios... Whatever you want!
Tip:
They are often the default fonts used in tools like code editors.