BWD: #2 CSS

Online courses in web design, including some training in general design and technology, as well as programming languages often used in web design. None of these free courses have credit value, nor d

BWD: #2 CSS

Online courses in web design, including some training in general design and technology, as well as programming languages often used in web design.

None of these free courses have credit value, nor do they involve assessment or grades. Some courses have additional software requirements, but most of these software programs are free and available through links on course websites.


2.1 Introduction
2.2 CSS Syntax & Selectors
  • The element Selector
  • The id Selector
  • The class Selector
  • Grouping Selectors
2.3 Box Model
  • Width and Height
  • CSS3 box-sizing property
2.4 CSS Combinators
  • Descendant Selector
  • Child Selector
  • Adjacent Sibling Selector
  • General Sibling Selector
2.5 Pseudo-classes
  • Pseudo-classes list
2.6 Pseudo-elements
  • ::before / ::after
  • Pseudo-elements list
2.7 CSS Attribute Selectors
2.8 CSS3 Transforms & Animations
  • 2D Transforms
  • 3D Transforms
  • Transitions
  • Animations
2.9 CSS3 Media Queries

#2 CSS

CSS is a language that describes the style of an HTML document. It describes how HTML elements should be displayed.

Basic CSS Example

body {  
  background-color: lightblue;
}

h1 {  
  color: white;
  text-align: center;
}

p {  
  font-family: verdana;
  font-size: 20px;
}

2.1 Introduction

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

HTML was NEVER intended to contain tags for formatting a web page! HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>  
<p>This is a paragraph.</p>  

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process. To solve this problem, the World Wide Web Consortium (W3C) created CSS. CSS removed the style formatting from the HTML page!


2.2 CSS Syntax & Selectors

A CSS rule-set consists of a selector and a declaration block. CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.

selector {  
  property: value;
}
The element Selector

The element selector selects elements based on the element name. You can select all <p> elements on a page like this (in this case, all <p> elements will be center-aligned, with a red text color):

p {  
  text-align: center;
  color: red;
}
The id Selector

The id selector uses the id attribute of an HTML element to select a specific element. The id of an element should be unique within a page, so the id selector is used to select one unique element!

To select an element with a specific id, write a hash (#) character, followed by the id of the element. The style rule below will be applied to the HTML element with id="para1":

#para1 {
  text-align: center;
  color: red;
}
The class Selector

The class selector selects elements with a specific class attribute. To select elements with a specific class, write a period (.) character, followed by the name of the class.

In the example below, all HTML elements with class="center" will be red and center-aligned:

.center {
  text-align: center;
}

You can also specify that only specific HTML elements should be affected by a class: p.center {.

Grouping Selectors

If you have elements with the same style definitions

h1 {  
  text-align: center;
  color: red;
}

h2 {  
  text-align: center;
  color: red;
}

p {  
  text-align: center;
  color: red;
}

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma.

h1, h2, p {  
  text-align: center;
  color: red;
}
What style will be used when there is more than one style specified for an HTML element?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

  1. Inline style (HTML style attribute <p style="color: red;")
  2. External (<link>) and internal (<style>) style sheets (in the <head> section)
  3. Browser default inherited styles

So, an inline style (inside a specific HTML element) has the highest priority, which means that it will override a style defined inside the tag, or in an external style sheet, or a browser default value.


2.3 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. The box model allows us to add a border around elements, and to define space between elements.

  • 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

Width and Height

In order to set the width and height of an element correctly in all browsers, you need to know how the box model works.

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.

div {  
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

/* the div will be 350px width */

The total width of an element should be calculated like this: Total element width = width + left padding + right padding + left border + right border + left margin + right margin.

The total height of an element should be calculated like this: Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.


CSS3 box-sizing Property

The box-sizing property is used to tell the browser what the sizing properties (width and height) should include. If we set it to border-box, the width and height properties (and min/max properties) includes content, padding and border, but not the margin. That way we make sure the box does not change its size when adding padding or border.

div {  
  box-sizing: border-box;
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

/* the div will be 320px width */

2.4 CSS Combinators

A combinator is something that explains the relationship between the selectors.

A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.

There are four different combinators in CSS3:

  • descendant selector (space)
  • child selector (>)
  • adjacent sibling selector (+)
  • general sibling selector (~)

Descendant Selector

The descendant selector matches all elements that are descendants of a specified element.

div p {  
  background-color: yellow;
}

Child Selector

The child selector selects all elements that are the immediate children of a specified element.

div > p {  
  background-color: yellow;
}

Adjacent Sibling Selector

The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. Sibling elements must have the same parent element, and "adjacent" means "immediately following".

div + p {  
  background-color: yellow;
}

General Sibling Selector

The general sibling selector selects all elements that are siblings of a specified element.

div ~ p {  
  background-color: yellow;
}

2.5 Pseudo-classes

A pseudo-class is used to define a special state of an element. For example, it can be used to:

  • Style an element when a user mouses over it
  • Style visited and unvisited links differently
  • Style an element when it gets focus

Anchors (<a> elements) can be styled with any CSS property and can be styled differently depending on what state they are in. When setting the style for several link states, there are some order rules: a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

  • a:link - a normal, unvisited link
  • a:visited - a link the user has visited
  • a:hover - a link when the user mouses over it
  • a:active - a link the moment it is clicked

Pseudo-classes list
  • :active: a:active Selects the active link
  • :checked: input:checked Selects every checked <input> element
  • :first-child: p:first-child Selects every <p> elements that is the first child of its parent
  • :first-of-type: p:first-of-type Selects every <p> element that is the first <p> element of its parent
  • :focus: input:focus Selects the <input> element that has focus
  • :hover: a:hover Selects links on mouse over
  • :last-child: p:last-child Selects every <p> elements that is the last child of its parent
  • :last-of-type: p:last-of-type Selects every <p> element that is the last <p> element of its parent
  • :not(selector): :not(p) Selects every element that is not a <p> element
  • :nth-child(n): p:nth-child(2) Selects every <p> element that is the second child of its parent
  • :nth-last-child(n): p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
  • :nth-last-of-type(n): p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
  • :nth-of-type(n): p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
  • :only-of-type: p:only-of-type Selects every <p> element that is the only <p> element of its parent
  • :only-child: p:only-child Selects every <p> element that is the only child of its parent
  • :required: input:required Selects <input> elements with a "required" attribute specified
  • :visited: a:visited Selects all visited links

2.6 Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element. For example, it can be used to:

  • Style the first letter, or line, of an element
  • Insert content before, or after, the content of an element
selector::pseudo-element {  
  property:value;
}

/* ----- */

p.intro::first-letter {  
  color: #ff0000;
  font-size:200%;
}

::Before / ::after

The ::before pseudo-element can be used to insert some content before the content of an element. And the ::after pseudo-element can be used to insert some content after the content of an element.

h1::before {  
  content: url(smiley.gif);
  /* inserts an image before
     the content of each <h1> */
}

Pseudo-elements list
  • ::after: p::after Insert something after the content of each <p> element
  • ::before: p::before Insert something before the content of each <p> element
  • ::first-letter: p::first-letter Selects the first letter of each <p> element
  • ::first-line: p::first-line Selects the first line of each <p> element
  • ::selection: p::selection Selects the portion of an element that is selected by a user

2.7 CSS Attribute Selectors

It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector

The [attribute] selector is used to select elements with a specified attribute. The following example selects all <a> elements with a target attribute:

a[target] {  
  background-color: yellow;
}
CSS [attribute="value"] Selector

The [attribute="value"] selector is used to select elements with a specified attribute and value. The following example selects all <a> elements with a target="_blank" attribute:

a[target="_blank"] {  
  background-color: yellow;
}
CSS [attribute~="value"] Selector

The [attribute~="value"] selector is used to select elements with an attribute value containing a specified word. The following example selects all elements with a title attribute that contains a space-separated list of words, one of which is "flower":

[title~="flower"] {
  border: 5px solid yellow;
}

The example above will match elements with title="flower", title="summer flower", and title="flower new", but not title="my-flower" or title="flowers".

CSS [attribute|="value"] Selector

The [attribute|="value"] selector is used to select elements with the specified attribute starting with the specified value. The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text". The following example selects all elements with a class attribute value that begins with "top":

[class|="top"] {
  background: yellow;
}
CSS [attribute^="value"] Selector

The [attribute^="value"] selector is used to select elements whose attribute value begins with a specified value. The value does not have to be a whole word. The following example selects all elements with a class attribute value that begins with "top":

[class^="top"] {
  background: yellow;
}
CSS [attribute$="value"] Selector

The [attribute$="value"] selector is used to select elements whose attribute value ends with a specified value. The value does not have to be a whole word. The following example selects all elements with a class attribute value that ends with "test":

[class$="test"] {
  background: yellow;
}
CSS [attribute*="value"] Selector

The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value. The value does not have to be a whole word. The following example selects all elements with a class attribute value that contains "te":

[class*="te"] {
  background: yellow;
}

The attribute selectors can be useful for styling forms without class or ID:

input[type="text"] {  
  width: 150px;
  display: block;
  margin-bottom: 10px;
  background-color: yellow;
}

input[type="button"] {  
  width: 120px;
  margin-left: 35px;
  display: block;
}

2.8 CSS3 Transforms & Animations

CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size and position. CSS3 supports 2D and 3D transformations.


2D Transforms

transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements

  • translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
  • translateX(n) Defines a 2D translation, moving the element along the X-axis
  • translateY(n) Defines a 2D translation, moving the element along the Y-axis
  • scale(x,y) Defines a 2D scale transformation, changing the elements width and height
  • scaleX(n) Defines a 2D scale transformation, changing the element's width
  • scaleY(n) Defines a 2D scale transformation, changing the element's height
  • rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
  • skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
  • skewX(angle) Defines a 2D skew transformation along the X-axis
  • skewY(angle) Defines a 2D skew transformation along the Y-axis
Translate Example

The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following example moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:

div {  
  -ms-transform: translate(50px, 100px); /* IE 9 */
  -webkit-transform: translate(50px, 100px); /* Safari */
  transform: translate(50px, 100px);
}

3D Transforms

transform Applies a 2D or 3D transformation to an element transform-origin Allows you to change the position on transformed elements transform-style Specifies how nested elements are rendered in 3D space perspective Specifies the perspective on how 3D elements are viewed perspective-origin Specifies the bottom position of 3D elements backface-visibility Defines whether or not an element should be visible when not facing the screen

  • translate3d(x,y,z) Defines a 3D translation
  • translateX(x) Defines a 3D translation, using only the value for the X-axis
  • translateY(y) Defines a 3D translation, using only the value for the Y-axis
  • translateZ(z) Defines a 3D translation, using only the value for the Z-axis
  • scale3d(x,y,z) Defines a 3D scale transformation
  • scaleX(x) Defines a 3D scale transformation by giving a value for the X-axis
  • scaleY(y) Defines a 3D scale transformation by giving a value for the Y-axis
  • scaleZ(z) Defines a 3D scale transformation by giving a value for the Z-axis
  • rotate3d(x,y,z,angle) Defines a 3D rotation
  • rotateX(angle) Defines a 3D rotation along the X-axis
  • rotateY(angle) Defines a 3D rotation along the Y-axis
  • rotateZ(angle) Defines a 3D rotation along the Z-axis
  • perspective(n) Defines a perspective view for a 3D transformed element

Transitions

CSS3 transitions allows you to change property values smoothly (from one value to another), over a given duration. To create a transition effect, you must specify two things: the CSS property you want to add an effect to, and the duration of the effect.

div {  
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s; /* Safari */
  transition: width 2s;
}

/* The transition effect will start when the
   specified CSS property (width) changes value. */

div:hover {  
  width: 300px;
}
  • transition A shorthand property for setting the four transition properties into a single property
  • transition-delay Specifies a delay (in seconds) for the transition effect
  • transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
  • transition-property Specifies the name of the CSS property the transition effect is for
  • transition-timing-function Specifies the speed curve of the transition effect

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 CSS3 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 lasts for 4 seconds, and it will gradually change the background-color of the <div> element from "red" to "yellow":

/* 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;
}

If the animation-duration property is not specified, the animation will have no effect, because the default value is 0.

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.

@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}
  • @keyframes Specifies the animation code
  • animation A shorthand property for setting all the animation properties
  • animation-delay Specifies a delay for the start of an animation
  • animation-direction Specifies whether an animation should play in reverse direction or alternate cycles
  • animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle
  • animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
  • animation-iteration-count Specifies the number of times an animation should be played
  • animation-name Specifies the name of the @keyframes animation
  • animation-play-state Specifies whether the animation is running or paused
  • animation-timing-function Specifies the speed curve of the animation

2.9 CSS3 Media Queries

Media queries look at the capability of the device and can be used to check many things, such as:

  • width and height of the viewport
  • width and height of the device
  • orientation (is the tablet/phone in landscape or portrait mode?)
  • resolution

A media query consists of a media type and can contain one or more expressions, which resolve to either true or false.

@media not|only mediatype and (expressions) {
  property: value;
}

One way to use media queries is to have an alternate CSS section right inside your style sheet. The following example changes the background-color to lightgreen if the viewport is 480 pixels wide or wider (if the viewport is less than 480 pixels, the background-color will be pink):

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

For a full overview of all the media types and features/expressions, please look at the @media rule in the CSS reference.


w3schools. (1999-2016). CSS3 Tutorial. From w3schools website: w3schools.com/css