CSS stands for Cascading Style Sheets. It is a markup language, that is, it uses a set of statements to make specific adjustments to presentation of text-based content. The responsibility of CSS code is to format the content on the page. Colors, fonts, sizes, spacings, and other visual adjustments to the content can be made with CSS. Contrast this with HTML, whose responsibility is to organize the content in a meaningful way.
External: This stylesheet is a separate file which can be applied to one or more web pages with a LINK tag. This is the most powerful form of stylesheet, as it can be reused on many web pages. Also, multiple stylesheets may be applied to a single page using additionally LINK tags in the HTML file or at-rule imports within the CSS file. Thus, external stylesheets give developers maxiumum flexibility to mix and match stylesheets, reusing code to create consistent styles across entire web sites.
Internal: This stylesheet is applied to a web page using a STYLE tag inside of the HEAD tag. This method is only appropriate for one-page sites or systems which do not allow external style sheets.
Inline: These styles are applied to one element at a time, using the style attribute on the element's tag. These styles are not reusable and may interfere with styles applied by JavaScript plugins. Additionally, no at-rules may be used within inline styles. Due to these limitations as well as the mixing of CSS within HTML, inline styles should be avoided unless absolutely necessary.
Examine your HTML template file, as well as this web page, to see the LINK tags which apply style sheets.
The basic structure of CSS has a simple rule-set syntax:
selector{
property: value;
}
The selector chooses which elements will receive the styles within the curly braces.
The property-value pairs are called declarations and you may apply as many as you wish within a selector.
There is a specific set of properties available in CSS. Visit the complete CSS reference for a list of all available properties and what they do.
Other parts of CSS use the at-rule syntax:
@import 'resource.file';
or
@media (conditions){
/*insert full rule sets here*/
}
This unit focuses on selector rule-set syntax. For practice with identifying the parts of CSS, visit the CSS Anatomy activity.
While there are actually many types of selectors to choose which elements receive which styles, there are a few basic types that will be used most often:
The tag selector uses the name of a tag. All instances of that tag will receive the specified styles. In the example below, all SECTION tags will receive a background color and a foreground color.
section{
background-color: #FFEFD5;
color: #333333;
}
The ID selector uses a hashtag (#) and the ID attribute of an element. ID's are unique; that is, one and only one element in the page should have a specific ID. In the example below, only the tag with id="madeup" will receive the specified text-decoration property.
#madeup{
text-decoration: line-through;
}
The class selector uses a period (.) and the class attribute of an element. Classes are allowed on multiple elements, which is a good way to apply the same styles multiple elements, even if they do not use the same tag. In the example below, any tags with class="madeup" will receive the specified text-align property.
.madeup{
text-align: center;
}
The combined selector uses any combination of tag names, id, and classes. This is useful to get very specific about selecting elements. In the example below, only paragraph tags with class="highlight" will receive the specified background-color property. All other paragraphs will be unaffected.
p.highlight{
background-color: #FFFF00;
}
The grouping selector uses a comma (,) to join multipe selectors to receive the same set of style rules. You can combine any other types of selectors in a grouping selector. In the example below, both the tag with id="madeup" and any tags with class="madeup" will receive the specified text-variant property.
#madeup,
.madeup{
text-variant: small-caps;
}
The descendent selector uses a blank space to drill down to specific nested elements. You may combine any other types of selectors in a descendent selector. It may be helpful to read these selectors from right to left. In the example below, any tags with class="madeup" which are nested inside any SECTION tags will receive the specified font-weight property.
section .madeup{
font-weight: bold;
}
Since HTML is meant for marking up text, it makes sense that the first CSS properties you learn are meant for formatting text. There are some new ones in CSS3, but their support might not be widespread among enough web browsers to use them safely. Here are the text properties you need to know for this class:
Certain text styles must be supported by font files. Fonts are special files that contain information on how to display characters such as the alphabet, numeric digits, and punctuation. If the fonts used on the web page support them, you can also use the following font properties:
The CSS border properties can help us identify the boundaries of our elements and provides a means of styling them. Here are the border properties you need to know for this class:
You can find complete references for all of these properties at the W3Schools Reference.
Additional CSS properties will be introduced in later units. If you wish to explore additional properties now, double-check the browser compatibility of any CSS3 properties. Some of the properties are not well-supported by all browsers, so your web page's visitors might not see the styles.
Displaying a digital font requires a file that defines how the font is displayed. Web sites can either rely on the users to have suitable fonts, or else somehow distribute the font along with the other page resources.
If you wish to rely on the users' computers to provide the font files, check out CSS Font Stack for information about typical fonts that come pre-installed with devices. You might notice that those numbers are not so great. For a shorter list, a more exclusive list, here are the ones that have at least 90% distribution on both Windows and Mac systems (as of April 2015).
Obviously, that's a pretty short list, and it could change any time that Microsoft or Apple decide to remove a font from their operating systems. Additionally, this list does not include the limited font selection available on mobile devices.
To expand our options we could go the full other extreme and create new custom fonts to distribute with our sites. Creating fonts comes with the benefit of owning the rights to those fonts, or licensing those rights in exactly the way you desire. If you wish to distribute your fonts with your web pages, you can get them converted to the proper formats at Font Squirrel, and it will even generate the CSS code that you need.
Be careful at Font Squirrel, however, if you did not create the font yourself. Licensing fonts for web distribution is different than licensing for print. The copyright concerns are similar to those for images (fonts are a kind of graphic, after all), in that the owner of the font must explicitly grant permission to distribute font files with a web site.
So what's in between? We don't want to rely on the pre-installed fonts across multiple devices. But we also don't want to have to create our own fonts. An easy solution is to use a font service. Some are paid services, like Adobe's TypeKit, which includes many fonts that are also distributed with Adobe's design tools like Photoshop. Others are free services, such as Google Fonts.
In this course, we are using Google Fonts for our sites. Visit Google Fonts now to examine the available fonts, adding 2 to the 'collection' (including a good font for headings and a good font for body copy). Explore all of your "choose" and "review" options at the site. We will import the Google Fonts into a web page in the next action item below.
To actually perform the distribution of a font with a web page, you will need one of two methods. If you have the font files, you can get started with the CSS @font-face statement. Many font services have their own set of instructions for how to import the fonts to your web pages. For example, Google Fonts can use a few different methods, such as adding a simple @import statement to the top of your CSS file.
At Google Fonts, go to the 'use' options and follow Steps 1, 2, and 3. At Step 3, choose to use the @import statement, and copy the statement to the top of the CSS file for a web page. Now you may use that font in the CSS font-family property.