CSS Refresher

Jul 22, 20104 likes2,969 views

The document discusses Cascading Style Sheets (CSS) and how to style HTML elements using CSS. It covers CSS selectors like tags, IDs, and classes. It also describes the different ways to apply CSS like internal, external, and inline stylesheets and how CSS rules cascade. The document provides examples of CSS rules for backgrounds, text, fonts, and links.

what is css?
• Cascading Style Sheets
• A set of rules on how to display your
HTML elements
• Internal documents: embedded in the
head part of the HTML file
• External documents: something.css

SELECTORS
• Tag/element: p{color:black;}
<p>This text will be black</p>

• ID: #alternate {color:green;}
<p id=“alternate”>This will be
green</p>

• Class: .another{color:blue;}
<p class=“another”>While this will
be blue</p>

MORE SELECTORS
• Element-specific: p.red
{color:red;}
<p class=“red”>This text will be
red</p>

• Multiple elements: .title, .head
{color:pink;}
<h1 class=“head”>Pink Heading</h1>
<p class=“title”>Pink Title</p>

HOW to apply CSS

• Internal stylesheet
• External stylesheet
• Inline stylesheet

INTERNAL CSS
<head>
<style type=“text/css”>
p.red {
color:red;
}
</style>
</head>

EXTERNAL CSS

<head>
<link rel=“stylesheet” type=“text/
css” href= “samples.css” />
</head>

INLINE CSS

<a href=“somewhere.html” style=
“color:black;text-size:25px”>
This is a link
</a>

CASCADING
• Elements can inherit rules from
multiple style sheets
• Inheritance order:
1. Browser default
2. External stylesheet
3. Internal stylesheet
4. Inline style

Exception!
<head>
<style type=“text/css”>
p.red {
color:red;
}
</style>
<link rel=“stylesheet” type=“text/
css” href= “samples.css” />
</head>

RULES: BACKGROUND
body {
background-color:#000000;
background-image:url(‘bg.gif’);
background-repeat:repeat-y;
background-attachment:scroll;
background-position:right top;
}

RULES: BACKGROUND

body {
background:#000000 url(‘bg.gif’)
repeat-y scroll right top
}

RULES: TEXT
h1 {
color:blue;
text-align:right;
text-decoration:underline;
text-transform:uppercase;
text-indent:50px;
}

RULES: TEXT

h1 {
word-spacing:10px;
line-height:30px;
letter-spacing:-5px;
}

RULES: FONT
p.font {
font-family:“Times New Roman”,
Verdana, Arial;
font-style:italic;
font-size:16px;
font-variant:small-caps;
font-weight:bolder;
}

Web units

• pixel: font-size:32px
• percent: font-size:200%
• em: font-size:2em

LINK STYLES
• a:link{color:blue;}

• a:visited{color:green;}

• a:hover{color:pink;}

• a:active{color:black;}

This document provides an 18 chapter tutorial on CSS (Cascading Style Sheets). It begins with introductory chapters on CSS syntax, classes, IDs, divisions, spans, margins, padding, and text properties. Later chapters cover font properties, anchors, links, backgrounds, borders, lists, positioning, and pseudo elements. Each chapter provides examples and explanations of the CSS concepts and properties covered. The document was created by Vijay Kumar Sharma and includes their contact information. It serves as a comprehensive guide to learning the fundamentals of CSS.

Css BasicsJay Patel

Cascading Style Sheets (CSS) allow separation of document content from document presentation, including elements like fonts, colors, and layout. CSS rules include selectors that point to specific HTML elements and declarations that define properties like color and font for those elements. Common CSS properties include font properties, color properties, box properties like width, padding, and margin, and background properties. CSS provides benefits like easier maintenance of web page styling across multiple pages.

Css tutorialvedaste

The document provides information about CSS (Cascading Style Sheets) including what CSS is, how it solves problems with HTML formatting, CSS syntax, and examples of using CSS for text formatting and backgrounds. CSS allows separation of document structure (HTML) from presentation (CSS). CSS defines how elements are displayed, and styles can be applied internally, externally, or inline. CSS follows cascading rules to determine which styles take precedence.

CssHemant Saini

Introduction to CSSFolasade Adedeji

This document provides an introduction to cascading style sheets (CSS) and covers several key concepts: CSS is used to style and lay out web pages and defines how HTML elements are displayed. Styles are normally saved in external CSS files so the appearance of an entire website can be changed by editing one file. A CSS rule has a selector that specifies which element the rule applies to and declarations that define properties for that element. Comments can be added to CSS code to explain it. Different selectors like ID, class, and inline styles allow targeting specific elements. The order of style precedence determines which styles get applied when multiple styles conflict. Background properties are used to define and customize element backgrounds.

CSS BasicsSanjeev Kumar

Html training slidevillupuramtraining

TUTORIAL DE CSS 2.0Vladimir Valencia

CSS BasicsWordPress Memphis

Introduction to HTML and CSSMario Hernandez

The document provides an agenda for a workshop on HTML, CSS, and putting them together. It covers HTML topics like semantic tags, comments, and best practices. It then discusses CSS topics such as IDs vs classes, floats, shorthand, and putting HTML and CSS together with project structure and layouts. The workshop aims to give an introduction to HTML, CSS, and how to structure websites using these languages.

Introduction of Html/css/jsKnoldus Inc.

Advanced Cascading Style Sheetsfantasticdigitaltools

(Fast) Introduction to HTML & CSS Dave Kelly

Introduction to htmleShikshak

Intro to HTML and CSS basicsEliran Eliassy

This document provides an overview of HTML and CSS topics including: - A brief history of HTML and CSS standards from 1990 to present. - Descriptions of common HTML elements like <body>, <head>, <img>, <a>, and lists. - Explanations of CSS concepts like selectors, properties, units, positioning, and layout fundamentals. - Details on CSS topics like the box model, centering content, semantic HTML, and flexbox. The document serves as a course outline or reference for learning HTML and CSS fundamentals.

Web Design Assignment 1 beretta21

Cssjayakarthi

CSS (Cascading Style Sheets) is used to style and lay out HTML elements. CSS allows you to define styles that specify things like color, font, size, and layout of HTML elements. Styles can be applied to HTML elements using CSS selectors like id and class selectors. CSS properties specify values for attributes like color, background, text, and more. External CSS stylesheets can be linked to HTML documents to style multiple pages consistently.

Css introductionvishnu murthy

CSS (Cascading Style Sheets) allows separation of document content from document presentation by defining styles. CSS can be defined internally, inline, or externally in CSS files. CSS rules have selectors and declarations, where properties and values are used to style elements. Common CSS properties control color, text formatting, background images and colors. Styles can be applied to HTML elements, classes, or IDs. When multiple conflicting styles are defined, styles are cascaded according to precedence rules with inline styles having the highest priority.

HTML CSS BasicsMai Moustafa

This document provides an overview of HTML and CSS for website development. It discusses how websites use HTML for content, CSS for presentation, and JavaScript for behavior. It then covers basic HTML tags and structure, as well as CSS selectors, the box model, positioning, and floats. The goal is to teach the essentials of using HTML to structure content and CSS to style and position that content for websites.

HtmlNithyaD5

This document provides information about HTML tags and their uses. It begins with an introduction to HTML and defines HTML tags as markup tags that tell the web browser how to display a web page. It then discusses various HTML tags for formatting text, inserting images, creating lists and tables, and developing forms. Key tags covered include paragraph (<p>), heading (<h1>-<h6>), bold (<b>), italic (<i>), horizontal rule (<hr>), image (<img>), unordered (<ul>) and ordered (<ol>) lists, table (<table>), and form (<form>) tags. The document provides examples and explanations of how each tag is used.

HTML CSS | Computer ScienceTransweb Global Inc

An Overview of HTML, CSS & Java ScriptFahim Abdullah

HTML is a markup language used to define the structure and layout of web pages. It uses tags like <h1> and <p> to mark headings and paragraphs. CSS is used to style and lay out HTML elements, using selectors, declarations, and properties to change things like colors and positioning. JavaScript can be added to HTML pages with <script> tags and is used to add interactive elements and dynamic behavior by manipulating HTML and responding to user input. It has data types like strings and numbers and control structures like if/else statements.

Intro to HTML and CSS - Class 2 SlidesHeather Rock

1. CSS stands for Cascading Style Sheets and refers to how styles are applied hierarchically to HTML elements. 2. There are three main ways to attach CSS to a webpage: inline, embedded, and linked. Linked style sheets keep the styles in a separate .css file for easy maintenance. 3. CSS selectors allow targeting specific elements by HTML tag names, classes, IDs, and other attributes. Common selectors include colors, fonts, links, and compound selectors.

Cascading Style SheetKushagraChadha1

Cascading Style Sheets (CSS) is used to describe the presentation of documents by defining sizes, spacing, fonts, colors, layout, etc. CSS separates presentation from content and improves accessibility and flexibility. CSS rules consist of selectors, declarations separated by semicolons, and properties and values separated by colons. CSS can be applied via inline styles, embedded in the <head> using <style> tags, or linked externally via <link> tags. CSS follows a cascading priority scheme and specificity rules to determine which styles apply to elements.

How Cascading Style Sheets (CSS) WorksAmit Tyagi

CSS (Cascading Style Sheets) allows separation of document content from page layout/presentation. CSS was introduced to make web page design and modification easier. CSS properties control elements like text formatting, page layout, and color/images. CSS rules cascade from broad to specific with author styles overriding browser defaults. Common selectors target elements by ID, class, tag name or relationship.

Introduction to HTMLAmit Tyagi

This document provides an introduction to HTML, including: - HTML is a markup language used to describe web pages - HTML tags are used to structure and layout content and are written with angle brackets - The basic HTML page structure includes the <head> for metadata and <body> for visible content - HTML elements can be styled using CSS with properties like display, position, float, and more - Common tags include headings, paragraphs, lists, links, and div containers to group and style blocks of content

Week 2-intro-htmlShawn Calvert

This document provides an introduction and overview of HTML and related web technologies. It begins with an explanation of the internet and World Wide Web, then defines key concepts like URLs, DNS, IP addresses, and HTTP. It proceeds to explain the difference between server-side and client-side coding. The document then covers the basic structure of an HTML document using tags like <html>, <head>, and <body>. It defines common text-level, structural, and media tags. Finally, it discusses relative vs. absolute links and the default styling applied by browsers.

CSS Basics (Cascading Style Sheet)Ajay Khatri

This document provides an introduction to CSS syntax and properties. It covers topics like inline, internal, and external CSS styles. CSS rules consist of selectors and declaration blocks containing property-value pairs. Common selectors include tags, IDs, and classes. Properties like color, background-color, background-image, and others are demonstrated along with shorthand and specific notation. Background images can be positioned and set to repeat, scroll, or be fixed. Comments are also included to add clarity to CSS stylesheets.

cascadingstylesheets,introduction.css styles-210909054722.pptxhannahroseline2

Unit III CSS & JAVA Script.pdfmeghana092

CSS is used to style and lay out web pages. It allows setting styles for HTML elements that apply across multiple pages. There are three main ways to include CSS - inline styles using the style attribute, embedded stylesheets within the <style> tag, and external stylesheets linked via the <link> tag. CSS selectors like id, class, element and descendant selectors allow targeting specific elements for styling. Properties define aspects like color, font, layout etc and values set the styling.

More Related Content

What's hot (20)

CSS BasicsWordPress Memphis

Introduction to HTML and CSSMario Hernandez

Introduction of Html/css/jsKnoldus Inc.

Advanced Cascading Style Sheetsfantasticdigitaltools

(Fast) Introduction to HTML & CSS Dave Kelly

Introduction to htmleShikshak

Intro to HTML and CSS basicsEliran Eliassy

Web Design Assignment 1 beretta21

Cssjayakarthi

Css introductionvishnu murthy

HTML CSS BasicsMai Moustafa

HtmlNithyaD5

HTML CSS | Computer ScienceTransweb Global Inc

An Overview of HTML, CSS & Java ScriptFahim Abdullah

Intro to HTML and CSS - Class 2 SlidesHeather Rock

Cascading Style SheetKushagraChadha1

How Cascading Style Sheets (CSS) WorksAmit Tyagi

Introduction to HTMLAmit Tyagi

Week 2-intro-htmlShawn Calvert

CSS Basics (Cascading Style Sheet)Ajay Khatri

CSS BasicsWordPress Memphis

Introduction to HTML and CSSMario Hernandez

Introduction of Html/css/jsKnoldus Inc.

Advanced Cascading Style Sheetsfantasticdigitaltools

(Fast) Introduction to HTML & CSS Dave Kelly

Introduction to htmleShikshak

Intro to HTML and CSS basicsEliran Eliassy

Web Design Assignment 1 beretta21

Cssjayakarthi

Css introductionvishnu murthy

HTML CSS BasicsMai Moustafa

HtmlNithyaD5

HTML CSS | Computer ScienceTransweb Global Inc

An Overview of HTML, CSS & Java ScriptFahim Abdullah

Intro to HTML and CSS - Class 2 SlidesHeather Rock

Cascading Style SheetKushagraChadha1

How Cascading Style Sheets (CSS) WorksAmit Tyagi

Introduction to HTMLAmit Tyagi

Week 2-intro-htmlShawn Calvert

CSS Basics (Cascading Style Sheet)Ajay Khatri

Similar to CSS Refresher (20)

cascadingstylesheets,introduction.css styles-210909054722.pptxhannahroseline2

Unit III CSS & JAVA Script.pdfmeghana092

Cssveena parihar

CSS (Cascading Style Sheets) allows styling and layout of HTML documents. CSS rules are made up of selectors and declarations and define how HTML elements are displayed. There are three methods for inserting CSS - external style sheets, internal style sheets, and inline styles. CSS can control properties like colors, backgrounds, fonts, text, borders, and box model dimensions with properties for things like background-color, font styles, border widths, padding and margins.

What is CSS.pptx power point presentationCoderkids

CSS____4563276__HTML___________0989.pptxAjanya5

4_css_intro.pptx. this ppt is based on css which is the required of web deve...sindwanigripsi

chitrasweet chitra

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation of HTML documents. CSS describes how HTML elements are displayed on screen, paper, or other media. CSS saves work by allowing control of layout and presentation for multiple web pages from one stylesheet file. CSS solves the problem of formatting documents that originally arose from adding font tags and other styling attributes directly into HTML.

properties of css.pptx power pointpresentationCoderkids

BITM3730 9-20.pptxMattMarino13

The document provides an overview of CSS (Cascading Style Sheets) including its basic syntax and the three main methods for applying stylesheets: inline, internal, and external. It explains that CSS is used to control the layout and formatting of HTML elements and allows for consistent styling across multiple web pages. The key points covered are: - CSS syntax uses selectors, properties, and values to style HTML elements - Stylesheets can be defined internally within HTML, inline within elements, or externally in separate files - External stylesheets are considered the best practice and allow linking CSS to HTML documents

BITM3730 9-19.pptxMattMarino13

The document discusses Cascading Style Sheets (CSS) and how they are used to control the layout and formatting of web pages. It covers the basic syntax of CSS code and the three main ways to apply stylesheets: internally, inline, and externally. Key points include that CSS separates structure and presentation, stylesheets allow consistent styling across pages, and the <link> tag is used to connect external CSS files to HTML documents.

Cascading style sheetssmithaps4

This document discusses Cascading Style Sheets (CSS) and its core concepts. It covers the different ways to insert CSS styles (external, internal, inline stylesheets), CSS selectors (type, class, ID selectors), the cascade and inheritance of styles, and some common text properties like color, decoration, and formatting. CSS is used to separate document structure and presentation to make websites easier to maintain and style consistently.

it-150608145445-lva1-app6891Unit_3 .pptxShwetamaurya36

Unit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHITECTUREUnit_3 OF COMPUTER ARCHI

Cascading style sheetssmitha273566

Cascading Style Sheets (CSS) allow separation of document content from document presentation and formatting. CSS defines how elements should be rendered on screen, paper, or other media. This document discusses CSS syntax, the different ways to insert CSS (external, internal, inline stylesheets), CSS selectors including type, class, ID and descendant selectors, and the cascading order of multiple style sheets. It also covers CSS features such as comments, declarations and properties, and media types for external stylesheets.

CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv dfdrpreetiwctm

Introduction to CSSShehzad Yaqoob

CSS (Cascading Style Sheets) allows styling and formatting of HTML documents. CSS separates formatting from HTML content to make web pages more modular and customizable. There are three ways to apply CSS - internal style sheets within HTML <style> tags, inline styles within HTML elements, and external style sheets in separate .css files. CSS rules define selectors, properties, and values to style HTML elements.

Css mod1VARSHAKUMARI49

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including how elements should be rendered on screen, paper, or in other media. CSS saves time and improves accessibility by allowing separation of document content from document presentation including the definition of styles, fonts, colors, and placement of elements. CSS rules consist of selectors and declarations blocks and there are three main ways to insert CSS into HTML - internal style sheets, external style sheets, and inline styles.

Cascading style sheet, CSS Box model, Table in CSSSherinRappai

CSS (Cascading Style Sheet)Harshit Srivastava

basic programming language AND HTML CSS JAVApdfelayelily

The document provides information about cascading style sheets (CSS). It begins with an introduction to CSS and how it can be used to control formatting and positioning of elements without using HTML tags. It then discusses the different CSS syntax rules including selectors, declarations, and properties. It provides examples of how to specify styles for different HTML elements as well as how CSS handles multiple style rules. The document also covers various CSS properties for formatting text, backgrounds, fonts and more. It aims to explain the basics of how CSS works and can be used to control styling and layout of HTML documents.

Lecture-6.pptxvishal choudhary

CSS (Cascading Style Sheets) is a style sheet language used to describe the presentation of HTML documents, including how elements should be rendered on screen, on paper, in speech, or on other media. CSS saves time because styles defined in CSS files can be reused across multiple HTML pages. It provides more control over formatting than HTML alone and helps separate a document's content from its presentation. The document then explains various CSS concepts like selectors, properties, syntax, and how to apply styles using internal, external and inline CSS.

cascadingstylesheets,introduction.css styles-210909054722.pptxhannahroseline2

Unit III CSS & JAVA Script.pdfmeghana092

Cssveena parihar

What is CSS.pptx power point presentationCoderkids

CSS____4563276__HTML___________0989.pptxAjanya5

4_css_intro.pptx. this ppt is based on css which is the required of web deve...sindwanigripsi

chitrasweet chitra

properties of css.pptx power pointpresentationCoderkids

BITM3730 9-20.pptxMattMarino13

BITM3730 9-19.pptxMattMarino13

Cascading style sheetssmithaps4

it-150608145445-lva1-app6891Unit_3 .pptxShwetamaurya36

Cascading style sheetssmitha273566

CSS-ppt.pptx f df dff dfvdfv fdvfdfddf dfv dfdrpreetiwctm

Introduction to CSSShehzad Yaqoob

Css mod1VARSHAKUMARI49

Cascading style sheet, CSS Box model, Table in CSSSherinRappai

CSS (Cascading Style Sheet)Harshit Srivastava

basic programming language AND HTML CSS JAVApdfelayelily

Lecture-6.pptxvishal choudhary

More from Gerson Abesamis (20)

YMSAT Project Proposal FormGerson Abesamis

This document appears to be a student project proposal form for the YMSAT 2012 program. It requests information such as the nature and format of the project, the project name, scientific concepts, materials needed, budget, procedures, hypotheses, variables, and plans for exhibits, demonstrations, workshops or films. It also requests the student's name, year, and section. The form is used to propose and provide details for an original student science project to be completed for the YMSAT 2012 program.

YMSAT Student PrimerGerson Abesamis

The document provides information for students participating in the upcoming 2012 Diliman Science Fair. It states that all Science, Math, Computer Science, and Technology (SMCT) units will now only require one science fair project for all science classes. Students can choose from four project formats: a demonstration/presentation, exhibit, workshop, or film. Projects can be done individually, with a partner, or in small groups. A proposal form is due by November 28th and is required for all students, making up 5% of their third quarter grade. Accepted proposals can earn up to 5% bonus points in the fourth quarter. Rejected proposals will not be allowed to participate or earn bonus points.

Final ProjectGerson Abesamis

This document outlines the requirements and guidelines for a WebDev2 final project due in the second quarter. It requires students to create a homepage template, 3 internal page templates, and external style sheets. Templates should incorporate the client's theme through visual elements like color schemes and fonts. Pages must include sample content, be cross-browser compatible, and use semantic HTML markup. Everything is due by October 19th at 4pm as a zipped folder named after the student's section. Early submissions before October 17th receive a 5% bonus.

960 Grid SystemGerson Abesamis

The 960 grid system document describes a grid system for building responsive web page layouts using CSS. It provides predefined CSS files for 12, 16, or 24 column layouts within a 960px container. Users create wireframes, link the CSS files, then use class names like "grid_4" to assign column widths without calculating sizes. It also describes techniques for adding spacing, pulling/pushing columns, and avoiding double margins.

CSS Box ModelGerson Abesamis

Photography Orientation 11-12Gerson Abesamis

This document provides information about a photography elective class open to juniors and seniors. The class will introduce photography fundamentals and techniques to beginners while enhancing the skills of advanced students. Topics will include camera parts, exposure, composition, genres of photography, and advanced techniques. Throughout the year, students will participate in lectures, projects, photo shoots, and field trips. They will also complete weekly homework assignments requiring conceptualizing, shooting, editing, and critiquing photos.

WebDev2 Orientation 11-12Gerson Abesamis

Photography Class 11-12Gerson Abesamis

Prewar reportGerson Abesamis

This document provides an overview of pre-war Filipino cinema from 1919-1941. It discusses the historical context of the Philippines during this time period, the rise of the film studio system, key filmmakers and their works, common themes and aesthetics in pre-war films, and the distribution and reception of films. Major studios like Sampaguita Pictures and LVN Pictures emerged which helped develop stars and standardized film production similar to Hollywood. Films often drew from local literary works, history, and genres like sarswela but lacked sophisticated cinematic techniques. They were popular among Filipino audiences seeking entertainment and expression of nationalism.

Typo GraphicsGerson Abesamis

Web TypographyGerson Abesamis

Typographic ContrastGerson Abesamis

This document discusses different typographic techniques for adding dynamism and emphasis to text, including using size, style, typeface, color, and spacing. It recommends using bigger text to catch attention, smaller text for longer reading, font styles for emphasis, limiting to 2-3 typefaces, combining serif and sans-serif, using hue, saturation and brightness of color effectively, and using space to suggest borders and hierarchies. It also notes that all uppercase letters are strong but lose detail, so they should only be used for headings, titles and acronyms.

WebDev Template FinalsGerson Abesamis

The document provides requirements and guidelines for a WebDev2 final project to create initial site templates including a homepage template, 3 internal page templates, and external style sheets. Templates should incorporate the client's theme through visual elements like color schemes, fonts, and graphics. Pages must include sample articles and photos, follow interface design principles, and be cross-browser compatible. The project is due by October 18th at 4:00pm and late submissions will not be accepted. Everything must be submitted in a folder named after the section.

Css positioningGerson Abesamis

Pinhole photography valeGerson Abesamis

Pinhole photography uses a small pin-sized hole instead of a lens to create images on light-sensitive film. It produces softer, low-fidelity images with almost infinite depth of field. The document provides instructions for making a simple pinhole camera from a matchbox that can take photos using standard 35mm film. Key steps include cutting a small hole in the matchbox cover to act as the "lens", loading the film, and securing cardboard "shutters" to start capturing long-exposure pinhole photographs.

CSS Box Model and DimensionsGerson Abesamis

Interface DesignGerson Abesamis

The document discusses key concepts for effective interface and navigation system design such as wayfinding principles like orientation, route decisions, mental mapping and closure. It also covers design of paths, regions, nodes and landmarks to aid navigation. Specific tips mentioned include using consistent and predictable links for paths, identifiable regions, balancing user freedom and guidance for nodes, and orientation cues like "You are here" for landmarks. The document also discusses search tools expectations and trends in web composition and conventions.

CSS Lists and TablesGerson Abesamis

The document discusses various CSS techniques for styling lists and tables. It provides examples of how to change list item markers, add images as markers, and control marker positioning. For tables, it shows how to add borders to tables and cells, control border styles, widths and colors, and collapse cell borders. Styles are demonstrated for centering, padding and aligning table cell content as well as setting background colors and text colors.

Intro to HTMLGerson Abesamis

HTML is the standard markup language used to define the structure and layout of web pages. HTML documents consist of HTML elements that are delimited by tags like <p> for paragraphs and <img> for images. The basic structure of an HTML document includes <html>, <head>, and <body> tags. Common elements include headings, paragraphs, links, images, line breaks, and text formatting elements for bold, italics, etc. Elements can have attributes to specify properties like the image source or link destination. HTML also supports tables, lists, and other structured documents.

Information ArchitectureGerson Abesamis

This document discusses the basic steps of information architecture, which includes creating a content inventory, establishing a hierarchical outline, chunking content, drawing diagrams, and testing. It outlines the process of creating a content inventory spreadsheet that catalogs each page, and discusses strategies for organizing information like using categories, time, location, or alphabetical order. Finally, it notes that effective information architecture groups content into logical chunks and structures sites consistently to match users' mental models.

YMSAT Project Proposal FormGerson Abesamis

YMSAT Student PrimerGerson Abesamis

Final ProjectGerson Abesamis

960 Grid SystemGerson Abesamis

CSS Box ModelGerson Abesamis

Photography Orientation 11-12Gerson Abesamis

WebDev2 Orientation 11-12Gerson Abesamis

Photography Class 11-12Gerson Abesamis

Prewar reportGerson Abesamis

Typo GraphicsGerson Abesamis

Web TypographyGerson Abesamis

Typographic ContrastGerson Abesamis

WebDev Template FinalsGerson Abesamis

Css positioningGerson Abesamis

Pinhole photography valeGerson Abesamis

CSS Box Model and DimensionsGerson Abesamis

Interface DesignGerson Abesamis

CSS Lists and TablesGerson Abesamis

Intro to HTMLGerson Abesamis

Information ArchitectureGerson Abesamis

CSS Refresher

1. CSS REFRESHER Styling HTML elements

2. what is css? • Cascading Style Sheets • A set of rules on how to display your HTML elements • Internal documents: embedded in the head part of the HTML file • External documents: something.css

3. Basic CSS RULE

4. SELECTORS • Tag/element: p{color:black;} <p>This text will be black</p> • ID: #alternate {color:green;} <p id=“alternate”>This will be green</p> • Class: .another{color:blue;} <p class=“another”>While this will be blue</p>

5. MORE SELECTORS • Element-specific: p.red {color:red;} <p class=“red”>This text will be red</p> • Multiple elements: .title, .head {color:pink;} <h1 class=“head”>Pink Heading</h1> <p class=“title”>Pink Title</p>

6. HOW to apply CSS • Internal stylesheet • External stylesheet • Inline stylesheet

7. INTERNAL CSS <head> <style type=“text/css”> p.red { color:red; } </style> </head>

8. EXTERNAL CSS <head> <link rel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>

9. INLINE CSS <a href=“somewhere.html” style= “color:black;text-size:25px”> This is a link </a>

10. CASCADING • Elements can inherit rules from multiple style sheets • Inheritance order: 1. Browser default 2. External stylesheet 3. Internal stylesheet 4. Inline style

11. Exception! <head> <style type=“text/css”> p.red { color:red; } </style> <link rel=“stylesheet” type=“text/ css” href= “samples.css” /> </head>

12. RULES: BACKGROUND body { background-color:#000000; background-image:url(‘bg.gif’); background-repeat:repeat-y; background-attachment:scroll; background-position:right top; }

13. RULES: BACKGROUND body { background:#000000 url(‘bg.gif’) repeat-y scroll right top }

14. RULES: TEXT h1 { color:blue; text-align:right; text-decoration:underline; text-transform:uppercase; text-indent:50px; }

15. RULES: TEXT h1 { word-spacing:10px; line-height:30px; letter-spacing:-5px; }

16. RULES: FONT p.font { font-family:“Times New Roman”, Verdana, Arial; font-style:italic; font-size:16px; font-variant:small-caps; font-weight:bolder; }

17. Web units • pixel: font-size:32px • percent: font-size:200% • em: font-size:2em

18. LINK STYLES • a:link{color:blue;} • a:visited{color:green;} • a:hover{color:pink;} • a:active{color:black;}

CSS Refresher

Recommended

More Related Content

What's hot (20)

Similar to CSS Refresher (20)

More from Gerson Abesamis (20)

CSS Refresher