Introduction to CSS
Shorthand Property
A CSS property that combines multiple CSS properties into one CSS declaration
Text-Align
A CSS property that specifies how text is arranged horizontally within an element
Font-Size
A CSS property that will define how large or small the text appears on a screen
child element
A child element is an element nested inside another element. Looking at the code snippet above, the child element can be identified as the <h1> element. The <p> element would also be a child of the <body> element. A child element is also known as a descendant element.
Web-Safe Fonts
A font family considered to be common across multiple types of computers and devices
Monospace Font
A font in which each letter occupies an equal amount of horizontal space
Proportional Font
A font in which the amount of horizontal space a letter occupies is proportional to its size (i.e., wide letters take up more space than narrower letters)
Sans-Serif Font
A font that does not include the little flags at the ends of the characters. Instead, the letters have flat ends.
Serif Font
A font that includes little flags at the ends of the characters
Fantasy Font
A font that is decorative in nature with playful representations of characters
Span Element
A generic inline element used to group and apply styling to content
Inline Style Sheet
A method of applying CSS information directly to the HTML elements
parent element
A parent element is an element that contains other elements within it. Looking at the code snippet below, the parent element would be the <body> element.
Font
A set of characters defined by the typeface and other properties such as size and spacing
Color Scheme
A set of colors that complement one another that can be used in HTML elements
sibling element
A sibling element is an element that is next to another element. These elements can be nested together inside a parent element. Looking at the snippet above, the sibling elements would be the <h1> element and the <p> element.
Number Value (CSS)
A type of CSS value that uses a numerical value without a unit of length (e.g., 300, 900)
Percent Value (CSS)
A type of CSS value that uses a percentage to define the specific size of the element in relation to a parent element (e.g., 80%, 35%)
Length Value (CSS)
A type of CSS value that uses numerical values with a unit of length (e.g., 12px, .5in)
Absolute Values
A type of CSS value that uses words to define the specific size of an element (e.g., medium, large)
Relative Value (CSS)
A type of CSS value that uses words to define the specific size of the element in relation to a parent element (e.g., smaller, larger)
Keyword Value (CSS)
A type of CSS value that uses words to identify the value (e.g., normal, bold)
Cascading Style Sheet
A.K.A. CSS; Style sheet language used to describe the appearance of markup code
Inline Style Sheet!
An Inline style sheet, or simply inline styles, applies the CSS information directly to the HTML elements. To do this, you use the style HTML attribute and add the CSS property and CSS value within the quotes. You saw this when you practiced using the HTML validator in a previous lesson to style the unordered list.
The FONT-SIZE Property
Another property, font-size:, controls the size of your text by making your words larger or smaller as needed to ensure readability, fit the design of the site, and help text stand out. You can define the font-size in several ways:
Color
Color is a useful tool in Web design. Effective use of color can improve readability and highlight important information. It can also help the viewer distinguish between various elements on a page. However, the improper use of color can inhibit these same items if you are not careful - you'll explore this in more depth in a later lesson. For now, you'll learn how to apply color to web pages and HTML elements.
CSS Property
Design element you wish to change for a given HTML element
Cursive Font
Font that tries to mimic a handwritten style of lettering
Hexadecimal colors
Hexadecimal colors are represented by codes that may include letters, numbers, or a combination of the two. The letters range from A to F, and the numbers range from 0 to 9. When using hexadecimal colors, the hexadecimal color code must be preceded by a hash or pound sign (#). Each color channel within RGB is represented by two hexadecimal integers to create a six-digit code for a color (e.g., #RRGGBB where RR is for the red channel, GG is for the green channel, and BB is for the blue channel). The hexadecimal values represent a number from 0 to 255 in decimal so you are, in essence, writing the RGB color code in a different format. Here is an example of a hexadecimal color that equates to the same RGB color shown in the previous paragraph: color: #add8e6;.
The SPAN Element
In certain situations, you may want to apply styling to content that appears in the middle of an HTML element. For example, suppose you want to stylize a portion of the text within a paragraph so it has a different appearance from the rest of the paragraph. To do this, you can utilize a <span> element, which is a generic inline container with no inherent meaning to the tag. It is used strictly to help group content for styling purposes. You will need to have an opening <span> and closing </span> tag for the element. By default the <span> element does not have any styling applied to it.
Declaration Block
Multiple CSS declarations listed together, separated by semicolons
Intro to CSS
Now that you have created each of the main pages with basic text, it is time to explore how you can make your pages look better. To make a site more attractive to visitors, you can format the text using different fonts, adjust the alignment, and add color. Generating a visually pleasing color scheme for your site will help ensure the look is consistent across all pages. But how many colors are too many? As you consider the available fonts, you might think a unique looking font would be perfect for your main headings, but can all browsers display that particular font? And once you have decided on your style elements, exactly how do you implement them into your basic web pages? This is where Cascading Style Sheets (CSS) come into play.
HTML Relationships
One important concept to understand about HTML is that it has a relational structure. This means an HTML element can be related to and affected by other elements. The relationships within HTML use familial designations to identify how each element relates to others and defines an element as a parent element, a child element, and/or a sibling element. You could expand upon this and identify grandchildren elements, grandparent elements, and so on, but in most cases, going that deep in determining relationships is unnecessary. These three main relationships are the foundation for much of how CSS is applied to a web page.
The FONT-WEIGHT Property
Previously, you learned about HTML tags you can use to apply meaning to text, like the <strong> and <em> tags. The style of these types of tags is controlled with CSS. The <strong> tag has, by default, the font-weight: property applied to it, with a value of bold. This property helps control how thick or thin a character appears on the page. The value of this property can be defined in the following ways:
Rio Salado College Color Tool
Regardless of which method you use to apply colors for your page, using a color picker or chart such as "HTML Color Chart" is recommended. When choosing colors for your web page, keep these best practices in mind:
Text Alignment
Text has several different properties you can adjust to make your content more readable and to style the look and design of your website. One of the most basic properties is the text-align: property, which specifies how the text is arranged horizontally within an element. You can use four possible ways to align the text within an element: left (the default value when the direction of the text reads from left to right), right, center, and justify.
RGB Color!
The CSS property you'll use to colorize text is the property color:. There are three main ways to indicate color on a web page or in text: RGB color, hexadecimal color, and color names. RGB color utilizes values of red, green, and blue to create a specific color. Each of these three colors is considered a color channel, and each channel is laid on top of the others to create a color mix that generates a unique color. The values for red, green, and blue range from 0 to 255 for a total of 256 colors per color channel. When defining a color property value using RGB, you must first identify that you are using RGB and put the value of each channel within parentheses with each channel separated by a comma (,). Here is an example: color: rgb(173,216,230);.
CSS Declaration
The combination of the CSS property and CSS value
Color Channel
The information related to a primary color used in a color model (e.g., RGB) where each channel is laid on top of another to create a color mix that generates a unique color
Font Family
The particular design of letters, numbers, and symbols and how they look
CSS Value
The value of the CSS property you wish to change, or how you set the value of the CSS property
Introduction to CSS
This lesson introduces CSS and describes how you can define design properties for various HTML elements on your site, such as fonts and alignment. You have much to learn about CSS, so time to dive into the lesson.
Color Names
Utilizes a written name to identify the color for a CSS property value
Hexadecimal Color
Utilizes hexadecimal codes that may include letters, numbers, or a combination of the two to represent each color channel (red, green, and blue) to create a specific color for a CSS property value
RGB Color
Utilizes values of 0-255 for each color channel (red, green, and blue) to create a specific color for a CSS property value
The FONT-FAMILY Property
You can use the font-family: property to define the typeface of your website text. The value of the property is the actual name of the typeface, such as Verdana or "Times New Roman." When defining the font-family: property, you'll want to do the following:
color names
color names are probably the simplest form of selecting a color as they involve the written form of the color (e.g., red, blue, light blue, purple, etc.). When writing code using color names, any color names that include more than one word are written without a space; color: lightblue; is an example. If you use this option, it is recommended that you refer to a list such as "Color Names Supported by All Browsers" to ensure your color will correctly display. The one drawback to this method of color selection is the available colors list is relatively small compared to hexadecimal or RGB colors—140 color names compared to more than 16.5 million colors using hexadecimal or RGB.
Web-Safe Fonts!
💻 As discussed earlier, within the font-family: property section, font information is usually pulled from a user's computer/device, and if a font is not available on a computer/device, the text will not be displayed in that font. If you look at the fonts installed on your computer, you can see what fonts are available for your use. 💻 If you were to compare those fonts with the fonts found on another computer, you may find you have some fonts that another machine doesn't and vice versa. However, you will find common fonts installed across most machines you compare. These fonts that are preinstalled on a computer by the operating system are considered Web-safe fonts. Web-safe fonts can be used to define the font-family property to ensure the text on your web page will display correctly across as many computers and devices as possible. W3Schools has a good collection of CSS Web Safe Font Combinations you can use on your website as a starting point.
Cascading Style Sheets
💻 CSS was created to separate the design of the HTML page from the content of the HTML page. With CSS, Web developers can focus on utilizing HTML coding to add content to a web page and then use CSS to modify the look of the content. You can apply CSS to a web page using three different types of style sheets: inline, internal, and external. In this lesson, you will focus on inline style sheets. 💻 To style an HTML element, you need two components: the CSS property and the CSS value. Together the CSS property and CSS value are considered a single CSS declaration. When you combine multiple declarations together, separated by semicolons, this is considered a declaration block. 💻 The CSS property is the design element you wish to change. Examples of such properties include color:, border:, font:, margin:, and padding:, just to name a few. More than 250 different CSS properties can be used with additional properties being developed (Meiert, 2016). You will dive into main ones within this course. You can see the various CSS properties on Mozilla Developer Network Docs CSS Reference page. With HTML attributes, you use an equals sign (=) to separate the attribute from the attribute value. However, in CSS, you must use a colon (:) to separate the CSS property from the CSS value. 💻 The CSS value is the value of the property you wish to change, or how you set the value of the CSS property. This may be the actual color you want to use, the font size of the text, the spacing in pixels between the elements, etc. CSS values do not require quotation marks ("") around the value as HTML attribute values do, except in specific situations that will be explained later. The CSS value begins immediately after the colon that follows the CSS property.
Lesson Objectives
💻 Describe the relationships between HTML elements. 💻 Define Cascading Style Sheets (CSS). 💻 Use inline styling. 💻 Format text using CSS. 💻 Explain the importance of using Web-safe fonts. 💻 Describe how colors are digitally defined and apply color to a web page.
Changing Basic Font Information
💻 Font information is one aspect of text that can be changed. In terms of design, a font is a set of characters defined by the typeface and other properties such as size and spacing. With CSS, these properties can be defined individually to give you finer control over how the text within a web page appears. 💻 The font family, sometimes referred to as the typeface, is the particular design of how the characters look. Fonts are usually grouped into generic families based on similar characteristics. Generic families include serif, sans-serif, cursive, fantasy, and monospace. Serif fonts include little flags (serifs) on the ends of the letters. Sans means without, so the sans-serif fonts are fonts without the little flags (serifs) and include letters with flat ends. Cursive fonts try to mimic a handwritten style of lettering. Fantasy fonts are decorative fonts with playful representations of characters. These generic font families are considered proportional fonts, meaning the amount of space a letter occupies is proportional to its size. In other words, wide letters take up more space than narrower letters. Conversely, monospace fonts utilize an identical amount of space for each letter no matter the letter's shape. Below are examples of a serif font, a sans-serif font, a serif font with the serifs highlighted in red for easy identification, a proportional font, and a monospace font with each color identified so the space between letters can easily be visualized.
The FONT-STYLE Property
💻 The <em> tag has, by default, the font-style: property applied to it, with the italic value. This property allows the text to have a normal, italic, or oblique appearance. Italic and oblique text create slanted-looking characters. However, italic text generally applies a more cursive design to the character while oblique text is the regular text with the top of the character moved sideways to create a slant. Due to this slanted nature of the oblique text, some call it faux italic or fake italic. In the image below, you can see all three font styles applied to text in the Georgia Font-Family. Notice how the italic style actually has subtle differences in the characters (for example, the 'f') that provide a more cursive appearance while the oblique has the same style as the normal font, but with a slant to the right. 💻 In the image above, you will notice three options are being displayed. However, in a browser, the font-style: CSS property relies on the chosen font-family: to display the text. This means the browser will look at the chosen font-family: and attempt to find the italic or oblique version of that font. The browser does not actually create the italicization or obliqueness; instead, the browser will use what is provided by the computer. This, therefore, may create a problem because many fonts do not come with both italic and oblique variations. Fonts usually have one or the other. In this case, the browser will fall back to the variation that is available. Meaning, if you specify oblique and only an italic variation of the font is available, the italic version instead of oblique and vice versa. The only way to display all three options in the image above is to use a graphic design program to create the oblique version since no oblique variation exists for the Georgia font.
The FONT Property
💻 You can combine individual font properties with the font: property and define them all in a single CSS property. A shorthand property combines multiple CSS properties into one CSS declaration. The value of the font: property can contain each of the properties above with a space between each individual value. The property follows this syntax and should be constructed in this order: 💻 If you omit one of the values from the list above, then the browser will assume you want the default value for that individual property. You must have, at a minimum, the font-size: and font-family: values defined within this shorthand property. Note that you will see two extra property values above that weren't covered in this lesson, the font-variant and line-height. You can safely leave these out of the font: property value as the browser will include its default values.
