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.
Metaphor: If html structures the content we could think of it as the structure of a building in a construction stage. CSS works as the skin of the building, and defines how it is going to look. 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. |
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. |
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 selectors are global in nature, meaning they are going to affect every element of that type in a style document. |
Parts of a RULE: Selector and Declaration. Declaration composed of a number of properties with values, separated by semicolons.
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:
|
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: |
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!). |
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. 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. |
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 |
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.
Here a body selector has a font, font-size, and color applied to it. Since I created a style for only h1, with a garnet color, the h1 element in the html appears in that color
|