Web Programming Studio Notes

Week 2 - Day 1 - Class Day 4

4.1: Using CSS in HTML

Introduction to CSS

CSS (Cascading Style Sheets) is a textual language for describing how a webpage is styled for visual presentation. Web browsers use CSS to determine how a webpage is rendered on the screen, printed to paper, or presented via other media. The CSS acronym highlights the two main characteristics of presenting a webpage:

  • Cascading - The process of combining multiple style rules and resolving conficting styles.

  • Style Sheet - Describes the visual presentation of structured documents.

A web developer uses CSS to writer a list of rules. A Css rule consists of a selector followed by a declaration block between braces ({})

  • A CSS selector specifies the HTML elements to which the specific style rule applies.

  • A declaration block contains one or more declarations separated by semicolons (;).

  • A CSS styling declaration is a CSS property followed by a colon (:) and the property value.

Parts of a CSS rule, labeled diagram.

When writing css, a semicolon should be added at the end of every declaration block, it is not necessary when only one declaration is present or if the declaration is at the end of a set of declaractions, however it is a good idea to do it anyway.

Applying CSS

CSS can be applied to HTML in three ways:

  1. An inline style places CSS declarations inside an element's style attribute.

  2. An embedded stylesheet places CSS rules in an HTML document's head using a <style> element.

  3. An external stylesheet places CSS rules in a separate file that is imported into an HTML document with a <link> element.

The style attribute may be used on any element. The <style> and <link> elements may be placed anywhere in a webpage, but good practice is to place <style> and <link> elements inside the document head (in the <head> element ).

Inheritance and conflict

Ingeritance and conflict

CSS tips

You can apply color and other styling to text using a <span>, this is due to the span taking up as little space as required, meaning it will not disrupt the webpage as much as using something like a div (which would be inappropriate for this application).

This is the proper syntax for applying an external stylesheet

<link href="YOURLINKHERE" rel="stylesheet">

Exploring further:

4.2: Basic selectors

Element, class and ID selectors

There are 3 common selectors

  1. The element selector matches elements with the specified element names.
    Ex: p { color: blue; } selects all p elements.

  2. The class selector, specified with a period character followed by the class name, matches elements that have the specified class name.
    Ex: .notice { color: blue; } selects all elements with a class="notice" attribute.

  3. The ID selector, specified with a hash character followed by the ID name, matches the element that has the specified ID.
    Ex: #byLine { color: blue; } selects the element with the id="byLine" attribute.

Classes can be applied to html by adding the class="Name" attribute or id="Name" for assigning an id.

The decendant selector

The descendant selector, specified with a selector followed by a space and another selector, matches elements that are contained in other elements Ex:

h2 em { color: blue; }

This selects all em elements that are contained within h2 elements Ex: 

<h2>This text is not selected, <em>This text is<em></h2>
<p> This text is not selected, <em>Neither is this</em> </p>

NOTE: This selects all decendants of the tag, not just the immediate ones. Using the example above, even if the <em> was contained within something like a span, it would still apply the CSS as it is still contained within the <h2> tag.

Pseudo-class Selectors

The Pseudo-class selector, specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation. Example pseudo-class selectors include:

  • :disabled - Element is disabled.

  • :hover - Mouse is hovering over the element.

  • :empty - Element has no child elements.

  • :lang(language) - Element contains text in a specified language.

  • :nth-child(n) - Element is the parent element's nth child.

You can use these by applying them after your class or element names in css, for example a:hover will only work when the mouse is hovering over the <a> tag. Another example is using p.highlight:hover{}, the first section is the tag you want it to apply to, the second is the class or id and the third is the pseudo-class, for this example it is :hover

Exploring further:

4.3: Advanced Selectors

Universal Selector

The universal selector (indicated by the '*' asterisk) functions the same as adding any other tag to CSS, however instead of targeting elements of a certain tag, it targets all elements on the webpage.

Multiple selector

The multiple selector (indicated by adding ',' commas) allows the user to select multiple elements to apply css to. Eg: 'ul, ol {attributes}'

Child selector

Applied in the same sintax as standard child CSS (parent child) the Child selector '>' allows for the CSS to only be applied to the direct child of an element. Eg: 'p > em {attribute}' having the attribute only apply to the em tag if it is a direct child of the p tag

Sibling selector

The sibling selector denoted by the '~' tilde functions using the same sintax as the Child selector (h1~p) will apply the styling if the elements are within the same parent. Eg: 

<style>
    h1 ~ p {
        color:salmon;
    }
</style>   

<div>
    <h1>Title</h1>
    <p>Text</p>
    <p>Text2</p>
</div>

What this does is applies the CSS styling to the <p> tag only when it is present within a parent together with a <h1> tag.

The adjacent sibling selector

This functions the same as the Sibling selector except it is denoted by '+' plus and only applies to the tag directly after the selector. Eg: 'h1 + p' will only select the <p> if it directly comes after a <h1> tag

Combinators

These are all examples of combinators

Attribute Selector

Attribute selector

NOTE: I am pretty sure that adding a space between your element and the attribute selector breaks things. Eg: 'input [type="submit"]'

Pseudo-element selector

Pseudo-element selectors

Exploring further:

4.4: Properties

Color Property

The color CSS property changes the text color to a specified color value. A color value can be specified in several ways:

  • CSS defines 140 color names. Ex: white, blue, black, gray, forestgreen, magenta.

  • An RGB color value specifies a color using the rgb(red, green, blue) function by indicating the red, green, and blue intensities. Each intensity for red, green, and blue is between 0 and 255, where 0 is the lowest intensity and 255 is the highest. Ex: rgb(0, 0, 0) is black, rgb(0, 0, 255) is blue, rgb(255, 255, 0) is yellow, and rgb(255, 255, 255) is white.

  • A hexadecimal color specifies a color using the #RRGGBB format by indicating the red, green, and blue intensities. Each intensity for red, green, and blue is between 00 and FF hexadecimal numbers, where 00 is the lowest intensity and FF is the highest. Ex: #000000 is black, #0000FF is blue, #FFFF00 is yellow, and #FFFFFF is white.

  • An HSL color value specifies a color using the hsl(hue, saturation, lightness) function by indicating the hue, saturation, and lightness values. The hue value ranges between 0 and 360, and the saturation and lightness values range between 0% and 100%. Ex: hsl(0, 0%, 0%) is black, hsl(120, 100%, 50%) is green, and hsl(0, 100%, 25%) is dark red.
    The HSL color specification method is harder to understand and is not used as frequently as the RGB and hexadecimal color specification methods.

  • The RGB and HSL color values can add an alpha value to allow for transparency. The RGBA color value specifies a color using the rgba(red, green, blue, alpha) function by indicating the red, green, blue, and alpha intensities. The HSLA color value specifies a color using the hsla(hue, saturation, lightness, alpha) function by indicating the hue, saturation, lightness, and alpha intensities. The intensities have the same ranges as for RGB or HSL color values, but the alpha intensity is between 0 and 1. An alpha of 0 means fully transparent, 1 means fully opaque, and 0.5 means half transparent.

Background Properties

You can modify the background property of almost any tag in HTML, common background properties are:

  • The background-color property specifies the background color.

  • The background-image property specifies a background image.

  • The background property is shorthand for setting several of the element's background properties at the same time.

Background colors are specified using color names, a color function (RGB, RGBA, HSL, HSLA), or one of the values such as transparent. Background images are specified with the none value or the url('URL') function, where URL indicates the location of the image. By default, the initial background color is transparent and background image is none, which means the element's parent's background will display underneath the element's content. When a background color and image are both specified, the background image is rendered on top of the color.

Floats and Clears

CSS properties float and clear control how text flows around HTML elements, making webpages look like a magazine or newspaper article where the article's text wraps around the images in the page.
The float property specifies whether the element will float to the right or left of the element's parent container, allowing text to flow around the element. Values for the float property include:

  • none - Element does not float (default value)

  • left - Element floats to parent container's left side

  • right - Element floats to parent container's right side

The clear property moves elements below previously floated elements. Values for the clear property include:

  • none - Element allowed to float (default value)

  • left - Stop floating on parent container's left side

  • right - Stop floating on parent container's right side

  • both - Stop floating on both sides

Float Example

Display property

The display property controls the layout of the element selected on a webpage. Values for the display property include:

  • inline - Displays the element as an inline element, like span or a elements.

  • block - Displays the element as a block element, like p, h1, or div elements.

  • none - Hides the element from being displayed, like style elements.

  • inline-block - Displays the contents of the element as a block element, but formats the element as an inline element.

  • list-item - Displays the contents of the element as a list item element.

CSS Variables

A CSS variable can be given global scope by adding it to the :root{} selector. A CSS variable is declared by writing '--name:value;' this can then be used by the other attributes by typing var(--name).

Exploring further:

4.5: Font and text properties

Font Properties

Many CSS properties control the font properties for displaying text. CSS font properties include:

  • The font-family property specifies the font family, such as "Times New Roman" or serif.

  • The font-size property changes the font size, such as 120%, small, or 12px.

  • The font-weight property specifies the font weight, such as normal or bold.

  • The font-style property changes the text style, such as normal, italic, or oblique.

  • The font-variant property specifies the variant of the text, such as normal or small-caps.

  • The font property is shorthand for setting several font properties at the same time. Ex: font: italic 12pt Georgia, serif;

The font-family property contains a list of fonts specified as a family name or a generic family separated by commas.

  • A family name is the name of a specific font, like "Times New Roman", "Arial", or "Georgia". Family names containing spaces must be wrapped in quotations marks, while family names without spaces do not.

  • A generic family is a general group of fonts, like serif, sans-serif, cursive, fantasy, or monospace. Ex: Times New Roman and Georgia are both serif fonts because the fonts contain serifs, which are small strokes attached to the end of larger strokes on each letter.

NOTE: The web page will try to use the first available font in the list of fonts.

You can use @font-face to get the browser of the user to download custom fonts

@font-face{
    font-family: myFirstFont;
    src: url(sansation_light.woff);
    }

    div {
        font-family: myFirstFont;
    }

Font Sizes + Relative Sizes

The font size can be specified using a predefined size name, a relative size name, or a number with an absolute or relative size unit. The predefined size names are xx-small, x-small, small, medium, large, x-large, and xx-large, where medium is the default size. The relative size names are smaller and larger which change the font size for an element to be smaller or larger than the font size of the parent element.

An absolute size is a size that is fixed and independent of other CSS sizes. Absolute size units include:

  • cm - centimeters

  • mm - millimeters

  • in - inches

  • x - pixels (1px = 1/96in)

  • pt - points (1pt = 1/72in)

  • pc - pica (1pc = 12pt)

A relative size is a size that is relative to another size. Some common relative size units include:

  • em - Relative to the element's font size. Ex: 2em = 2 × current font size.

  • rem - Relative to the root element's font size. Ex: 1.5rem = 1.5 × element's font size.

  • vw - 1% of the viewport's width. Ex: 10vw = 10% of browser's width.

  • vh - 1% of the viewport's height. Ex: 5vh = 5% of browser's height.

  • % - Percentage of the element's font size. Ex: 120% = 20% larger than the current font size.

Most web browsers use a default font size of 16px, however some people may change this to make it larger or smaller depending on their eyesight or display size / resolution.

Text Properties

Many CSS properties control how text is displayed. Some common CSS text properties include:

  • The text-align property changes the horizontal alignment of text for an element. Possible values are: left, right, center, and justify.

  • The text-decoration property can add or remove text decorations like underlining or a line-through. Possible values are: overline, line-through, underline, and none.

  • The text-transform property converts letters to UPPERCASE, lowercase, or Capitalizes Initial Letters. Possible values are: uppercase, lowercase, and capitalize.

  • The text-indent property specifies the first line's indentation amount.

Exploring further: