Intro to Multimedia. MAT 103

Alejandra Jarabo

HTML & CSS. Web standard language
TO NEXT PAGE

 

CSS stands for Cascade Style Sheet.
It is a style sheet language developed to control the presentation of markup language documents.

It is the current standard for defining the look and fill (the display) of an html page. Whereas the HTML defines the content of a document, the style sheet defines the presentation of that document.
CSS was first added to html4 and provides a way to SEPARATE the content from the presentation.

CSS metaphor

Metaphor: If html structures the content we could think of it as the structure of a building in a construction stage.
You can get an idea of what are going to be the components and organization of the building but you cannot see the "finish", the appearance.

CSS works as the skin of the building, and defines how it is going to look.
The advantage of CSS is that you can try out different "skins" without touching the structure.

You could even have different looks depending if the website is going to be shown on a desktop, a mobile device, a tablet, or if you want to print it. You would do that by having separate CSS documents for each situation.

The CSS information can be LOCATED in 3 different ways, and that location is NOT exclusive:

EXTERNAL

Outside in a separate file containing all the instructions. think of it as a master plan.

This allows you to define the entire style of a website within one document and to achieve visual consistency through it.
(all the html documents will refer to the same CSS doc).

EMBEDDED

Following the same format, the instructions will be placed at the head of the specific html document, inside the <style> tag.

This is not an ideal situation for a website but it is OK for beginners as a way to practice or in early stages of the website development ( once the styles have been defined you move them to an independent file and link back to the html.

INLINE

Styles are applied directly to the HTML inside the body tag of it by using the Style attribute.

They should be applied ONLY when a single element has a unique style to be applied. Currently is only used to format html-email-style.


external style sheet

To attach and external style sheet to one/several html documents you need to write down the location of the stylesheet relative to the html document.

You will do so using the <link> tag inside the <head> tag of the html.

CSS SYNTAX

CSS is a collection of formatting rules.
Each definition for a display style in CSS is called a Rule. Rules are made of 2 parts:
A Selector, and one or more declarations. Selectors allow us to tell the browser which elements on the page we want to style.
The declaration specifies the style. Each declaration is made of a property and a value separated by a colon sign (:). Different declaration is separated by a semicolon (;) included the last one.

Depending of how wide do you want to apply a style through the page, you can use different selectors. The most common and wide is the element selector, that names an html tag and applies a style to it.

element selector

Element selectors are global in nature, meaning they are going to affect every element of that type in a style document.
You simply need to know what the tag in html for a given element in order to style it.

Now unlike HTML, we don't need the angle brackets around the tag name:ul, not <ul>
The <ul> tag in html defines an unordered (bulleted) list.

Parts of a RULE: Selector and Declaration. Declaration composed of a number of properties with values, separated by semicolons.

CSS syntax

The selector indicates the html document that we will refer to. In this case we are defining the style of the paragraphs in the document.

The property is the style to be changed and the value the is what the property is set to.

font-size indicates how big the text will show. There are 3 ways of indicating the size of text in CSS:

  • By entering the exact number of pixels (12 px)
  • By entering the relative size of the text (x-small, small, medium, large, x-large, smaller, larger or a percentage of the parent-element font size )
  • By entering the size in Em. 1em is equal to the current font size. 2em means 2 times the size of the current font. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

CSS syntax 2

In this case we are defining the margin property with one value that will apply to top, bottom, left and right. We define it in pixels. MORE on MARGIN

We can also define it with 2 values (top&bottom, right&left), 4 values(top, bottom, right and left.

We can define each margin separately:
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;


OTHER TYPES OF SELECTORS

In addition to html selectors (where you name the html tag you want to style), you can create specific CSS selectors. Those can be of 2 types: Class and ID selectors.

ID SELECTORS

The id selector is used to specify a style for a single, unique element (cannot be repeated within the page!).
It is defined in the CSS with a pound sign,(#) followed by a name you create for that style (then you will define the style within the braces {}).
The style rule will usually applied to the html that has been organized in side a DIV tag.

ID selector


CLASS SELECTORS

Classes are HTML attributes that can be set on any HTML element. You can name a class anything you want, and you can use it on as many elements, and as many times on the page as you need.
It is defined in the CSS with a dot,(.) followed by a name you create for that style (then you will define the style within the braces {}).
The style rule will be applied to the appropriate content in html through the attribute class within the html tag.

Typically, paragraphs, divs, lists or headings are the recipient of a class style.


DESCENDENT SELECTORS

Descendent selectors allow you to target an element based on where it's found within another element.
You simply string the selectors together, separating them with whitespace.
The parent selectors are added first, followed by each successive nested selector. For example, in this example the browser would find any span elements inside of paragraph elements which were also inside of div elements.

descendent Selector


GROUPED SELECTORS

You can also group selectors together by using commas between the selectors themselves. Now this can make writing styles more efficient by grouping selectors together that need the same styling. Instead of writing three separate selectors like this, for example, you can>simply write one group selector, and that's a lot more efficient.

h1,h2,p {color:green;}

 

CLASS INHERITANCE

Cascading style sheets derive their name from the cascading order of styles as they're applied within the browser. And this usually means that:

External styles are applied first, followed by

Embedded styles in the head of the html, finally followed by


Inline styles (if they're applied within the document).

cascade

Cascades can be summed up in one sentence: "the last rule applied wins". Styles are applied in the order that they're found, and recent styles always overwrite earlier styles in the event of a conflict.

Inheritance essentially says that child elements will inherit the properties applied to a parent element.

inheritance

Here a body selector has a font, font-size, and color applied to it.

In this case, every element on the page would render as Arial, 100% of its
default size, and be gray.

All the headings, list, and paragraphs are inheriting those values from the body selector

Since I created a style for only h1, with a garnet color, the h1 element in the html appears in that color