Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
Cascading style sheets (CSS) are used to:
Students should be aware that the area of CSS covers far more than the contents of these notes. The notes only cover some of the more immediately useful aspects of CSS.
A style represents a set of instructions that recommend to a web browser how to draw a webpage. Styles do not force a browser to display a webpage in a particular way. They merely recommend to the browser how the webpage should be displayed.
There are three ways of defining a style. It can be placed:
Styles are dealth with slightly differently when declared as external, in the <head> element or as part of a element.
External styles have two parts:
- an identifier, which states one or more element types it affects;
- a statement, which tells the browser how to draw the elements' elements.
For example:
p { font-size:60px; color:red; }
To include an external style in a HTML document, insert the following element into the <head> element of the document.<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href = "name_of_style_file.css" rel = "stylesheet" type = "text/css"> </head>
Header styles are declared in the same way as external ones. The only difference is that header styles have to be elementged as being a style. This is done using the <style> element.
For example:
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> p { font-size:40px; color:green; } </style> </head>
element styles need only hold the statement part of the style, as the identifier is the element itself. Within element styles replace the curly brackets with quotes. For example:
<p style = "font-size:20px; color:blue">Style Scope Cascading
Style scope cascading refers to the way in which the scope of a style cascades through a HTML document. The scope of a style depends on where the style is declared. The scope cascading rules are:
An external style affects all apporpriate element elements in every file that includes the external style.
A header style only affects the appropriate element elements in the file it is declared in. A header style takes precedence over an external style. For example, if a header style and an external style are both declared for body, then the header style will be used.
A element style only affects the exact element element that it is attached to. A element style takes precedence over a header style and an external style. For example, if a element style and a header style are both declared for body, then the element style will be used.
A style is made up by combining one or more properties. Each property has a property name followed by a colon and then the value for that property.
Some properties take a number of values. In such cases, the values are separated by a comma or a space. We shall always use a space, as this is normal practice in industry.
As with HTML, white space can be used to make a style sheet easier to read and write.
As with HTML, CSS is NOT case sensitive. We shall always use lower case letters, as this is normal practice in industry.
All properties have the form of a property name followed by one or more values.
Examples of property categories include:
The text style properties affect how text appears on a webpage. They include:
(a) color
This property sets the text colour of an element. Color is set using either a keyword or a hexidecimal number. Keywords include the obvious colours, such as:
- red
- green
- yellow
Hexidecimal numbers must be preceeded by an # and be six digits in length. The six digits represent the amount of red (first two digits), green (middle two digits) and blue (last two digits). For example:
- #FF0000 is the colour red
- #00FF00 is the colour green
- #FFFF00 is the colour yellow
(b) font-family
The font-family property helps to ensure that text looks the way it was intended to on various platforms. This property specifies a hierarchical list of preferred fonts that a browser should use to draw an element. The browser will use the first font in the list that is installed on the system it is running on.
Because none of the desired fonts may be on the system a browser is running on, CSS introduces the idea of a font family. A font family is a generic name for a type of font. The specified font families are:
The font-family property is a list of font names and font family names. Each item in the list is separated by a comma.
Font names should be capitalized (for example, Ariel, not ariel). When the name of a font is more than one word, it should be quoted, as in "Times New Roman".
(c) font-size
The font-size property specifies how large text appears on a webpage. The font-size property can specify the size of a text element in several units:
- points
- ems
- exs
- picas
- pixels
- inches
- millimeters
- centimeters
In addition, font-size can be specified using both relative and absolute keywords. The following are the relative keywords:
The seven absolute keywords (that match the seven HTML sizes) are:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
(d) font-weight
The weight of a font is how bold it is. The font-weight property affects how heavily text is drawn on a webpage. Font-weight can take two kinds of values:
keywords
- normal
- bold
- bolder
- lighter
numerical values
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
(e) font-style
The font-style property specifies the style of the font that is to be applied to an element. Font-style can take the value:
(f) text-decoration
The text-decoration property specifies a number of effects. Text-decoration can take one or more of the values:
- none
- underline
- overline
- line-through
- blink
(g) text-transform
text-transform specifies if text should be capitalised. Text-transform can take the value:
(h) font-variant
The font-variant property specifies if text should appear in small capitals. Font-variant can take the value:
Text layout properties affect how text is laid out on a webpage. These properties are specific to text, providing control over things like line height and letter spacing. The text layout properties are:
(a) letter-spacing
The letter-spacing property gives you control over the space (kern) between characters. Letter-spacing can be specified in any length unit. Negative letter-spacing can be used to make characters appear more closely together.
(b) word-spacing
word-spacing gives control over the space between words (track) in text. Word-spacing can be specified in any length unit. Negative word-spacing can be used to group words closer together.
(c) line-height
The line-height property sets the distance between adjacent lines.
line-height can be specified in a number of ways:
- multiples
The line-height can be specified as a multiple of the size of the font of the element.
- percent
Percent values for line-height are calculated as a percenetage of the font-size of the element.
Rather than setting a multiple of the current font-size, length values set a specific value for the line-height. This value can be a relative value such as em or ex, or an absolute value such as pt or cm.
(d) vertical-align
The vertical-align property gives control over how elements align vertically within an element. Vertical-align can be specified by either:
- keyword
- top aligns the top of the element with the top of the tallest element on the line on which it appears.
- bottom aligns the bottom of the element with the baseline of the font of the line on which it appears.
- middle aligns the vertical midpoint of an item with the baseline of the parent plus half the x-height of the parent.
- sub subscripts the element.
- super superscripts the element.
- percenelemente
The baseline of the element is raised above the baseline of its parent element by that percenelemente of the element's line-height. Use negative percenelemente values to lower the baseline of an element below the baseline of its parent.
Traditionally, in many documents, the first line of every paragraph is slightly indented. text-indent enables you to control how the first line of any element is indented, or outdented. text-indent can be specified using either percenelemente or length values. We can control outdent by giving text-indent negative values. When a percenelemente value is used, the indent or outdent is that percenelemente of the width of the parent element. The text-indent property affects only the first line of an element. To indent an entire paragraph or other element, use the margin property.
text-align allows you to specify how the contents of an element should be aligned. text-align can be one of:
- left
- right
- center
- justify
Background properties affect how the background of an element appears. Any element can have a background image or color. Background images can repeat vertically, horizontally, both (the traditional tiling effect of background images in the <body> of HTML webpages) or not at all (enabling easy "watermark" effects). A background image can either scroll or remain fixed while the webpage scrolls.
The background properties are:
(a) background-color
background-color specifies the colour of the background of an element. Any element can be given a background colour. background-color is specified as either a color value, or as transparent.
(b) background-image
Any element can have a background image. The background image can be used in more ways than the simple tiled backgrounds of traditional webpages.
(c) background-attachment
With traditional background images in the body of HTML documents, when the webpage is scrolled, the image scrolls too. Using styles, we can specify that the background image should not scroll, but rather remain fixed as the webpage scrolls.
background-attachment can take one of two values:
(d) background-repeat
With the traditional background image associated with the body of a webpage, where the background image is smaller than the width and/or height of the webpage, browsers "tile" the image both horizontally and vertically.
Using styles we can specify how a browser treats background images when the width and height of the image is less than that of the element.
background-repeat can take the following values:
(e) background-position
With a traditional HTML based background image, the image is placed in the top left hand corner of the webpage, and tiles from there. Using styles, we can specify where a background image is placed using the background-position property. If the image repeats (horizontally, vertically or both) then it repeats from this location. If there is a single image, it is placed using the background-position property. Background positions may be specified using:
- Pairs of percenelemente values
When a position is specified using a pair of percenelemente values (for example, background-position:0% 0%) the first value relates to the position of the top of the image, while the second relates to the position of the left of the image.
- Pairs of length values
When a position is specified using a pair of length values, (for example background-position 20px 20px) the first value specifies the position of the top of the image relative to the element, while the second value specifies the position of the left of the image relative to the element.
- Individual keywords
Rather than relying on length values, or percenelemente values, keyword values can be used. Keywords have a similar effect to percent.
The keywords which can be used to specify position are:
- top
- left
- center
- right
- bottom
- Pairs of keywords
For example, 'top center' and 'center top' mean the same as '50% 0%'.
(f) background
background is a shorthand property that lets you set any or all background properties at once.
The background property takes exactly the same types of values as the properties described in this section. To specify more than one background property using the background shorthand, the various background values are separated simply by spaces.
For example, the background property
background:url(image.jpeg) fixed no-repeat top centeris the equivalent of
background-image:url(image.jpeg); background-attachment:fixed; background-repeat:no-repeat; background-position:top center;
Any element may have a border, of varying widths, colours and styles. Elements can have different borders set to a different style, width and colour.
The border properties are:
- border
- border-top
- border-right
- border-bottom
- border-left
- border-style
- border-width
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
- border-color
Each border property always has three values associated with it.
border-style is the basic border property. In order for a border to be drawn at all, we must define a border-style. Once we define a border-style, we can either set the border-width and border-color properties. The border-style keywords are:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
Border widths can take either keyword values or length values. The keyword values that can be used are:
- thin
- medium
- thick
border-color is set using either a keyword or a hexidecimal number. Keywords include the obvious colours, such as:
- red
- green
- yellow
Hexidecimal numbers must be preceeded by an # and be six digits in length. The six digits represent the amount of red (first two digits), green (middle two digits) and blue (last two digits). For example:
- #FF0000 is the colour red
- #00FF00 is the colour green
- #FFFF00 is the colour yellow
To define the same border properties for each side of the element, use the border property.
{
border:thin red solid;
}
More than one border property can be set in a style. For example, to give the top edge of an element a thin, red solid border, and the bottom edge a thick black dotted border we'd use the following:
{
border-top:thin red solid;
border-bottom:thick black dotted;
}
Any element can have a margin. A margin is the space between an element and the elements to its top, left, bottom and right. The margin properties are:
The margin properties set the size of the top, left, bottom, right and all margins respectively.
Margins can be specified as either:
A percent margin value sets the affected margin to that percenelemente of the width of the parent element. For instance, a margin-right:20% sets the width of the right margin to 20% of the width of the element that contains the element. A percenelemente value for a margin ensures that the actual drawn size of the margin will always remain proportional to the size of the viewing window.
There are two types of length value:
Any element can have padding. Padding is the space between the edge of an element (its border) and its contents. There can be padding to the left, top, bottom and right of any element. The padding properties are:
Padding sizes can be specified in the same way as margins.
When measuring content element sizes, we should use set the css box-sizing property to border-box for all elements using the css style below. This will cause the margin and padding to be included in the elements size. We should normally include this as the first line of our css code.
*
{
box-sizing: border-box;
}
User interface properties allow the:
This property sets the shape of the cursor when the mouse is hovering over a selected element. The cursor can be specified as one of several keyword values, or as a URL that points to a file of type .cur (a cursor resource file).
The possible keyword values for the cursor property are:
This property sets an outline around an element. Outline has three properties, style, width and colour:
- outline-style
The outline-style keywords are
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
- outline-width
Outline widths can take either keyword values, or length values. The keyword values that can be used are:
- thin
- medium
- thick
- outline-color
outline-color is specified by a color or by the keyword invert. Using the keyword "invert" ensures that an outline is visible regardless of background color.
The three outline properties can be set together or individually. For example:
table { outline:solid, thin, red }is the same as:
table { outline-style:solid; outline-width:thin; outline-color:red }
Printing styles allow us to control how a webpage should appear when it is being printed. The two most useful printing styles are:
The only useful property of both the above printing styles is the keyword:
As shown earlier in these notes, the usual way of using webpage breaking is to set up a class style and to attach it as needed. For example:
.pageBreak
{
page-break-before:always
}
To attach this style to a particular instance of (for example) a <h1> element, use the code below:
<h1 class = 'pageBreak'>
To attach the same style to a particular instance of a <p> element, use the code below:
<p class = 'pageBreak'>
There are many more ways to access a webpage than simply via computer and monitor. Each different media has its own characteristics. It might be monochrome, it might be limited in size or it might read webpage content aloud. Styles can be made to behave differently to different media.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.