Instructor: Mike Panitz [email protected] Crash Course in CSS.
Dec 23, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
2
Anyone want to take notes? I’ve got a carbon-copy binder for notes for the quarter
You’d get paid $50
Talk to me 1-on-1 for details
3
Document Structure
Document Appearance
Interactivity
4
What is CSS ?
• CSS stands for Cascading Style Sheets• Styles define how to display HTML elements• Styles were added to HTML 4.0 to solve a problem of separating content from
the way it is formatted and displayed• External Style Sheets can save a lot of work by adding formatting and display
configuration to an entire web site• External Style Sheets are stored in .css files
CSS is a way to style and present the information offered in an HTML page. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document, including its font size and type, item colors, item formatting, margins and padding, rows and columns, in short the look and feel of a web page or entire web site.
5
Why do we care about CSS?We’re focusing on programming JavaScriptMany web pages provide interactivity by changing their appearance
Form validation: highlight the wrong elements Changing (adding, removing) elements on the page with a specific
style so that they stand out
You can create 2D games! CSS can be used to position things CSS +JavaScript can move things around
CSS “selector syntax” is re-used by jQuery to identify items on a page
6
With CSS Without CSS
H1
H3
P
P
P
7
Goals & Objectives CSS is a separate language.
Since it has a different purpose (appearance) than HTML (structure), it has a different form Goal: Get a feel for the language Goal: Be able to use a couple of CSS properties
CSS & HTML are commonly mixed into the same file THIS IS GOING TO TAKE SOME GETTING USED TO, but you can do it! Goal: Be able to identify which parts of a single file are the HTML parts (and obey HTML
rules), and which are the CSS parts (and obey the CSS rules)
Goal: Be able to identify an external style sheet, and open / read the external stylesheet
Goal: Understand that in this class we’re going to mostly stick with ‘internal’ stylesheets, at least for now
8
Styles can be specified three ways:
• inside an HTML element (Inline Style)• inside the head section of an HTML page (Internal Style Sheet)• in an external CSS file (External Style Sheet)
Tip: multiple external style sheets can be referenced inside a single HTML document.
Cascading Order – YOU DO NOT NEED TO REMEMBER THIS!!!
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 four has the highest priority:
1. Browser default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
NOTE: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
9
Inline Style
Inline style does exactly what it sounds like, it adds a style or styles in direct line with the HTML code itself (i.e., it is "embedded" inline with the HTML code)
An inline style loses many of the advantages of style sheets because the inline style mixes content with presentation.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font color and the left and right margins of a paragraph:
<p style="color:sienna; margin-left:20px; margin-right:600px;">THIS DEMONSTRATES THE INLINE METHOD OF CSS DECLARATION. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque iaculis luctus. Phasellus quis faucibus turpis. Ut convallis quam id risus mattis lobortis. Cras quis augue vulputate, laoreet mauris id, pharetra ligula. Curabitur placerat sem eros, non rhoncus justo sollicitudin eu.</p>
10
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head><style>p {margin-left:20px; margin-right:600px; color:red;}body {background-color: #ffff99;} <!– or the pair shortcut #ff9 --></style></head>
11
External Style Sheet
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension and given any name you choose appropriate to your design intentions (e.g., style.css). An example of a style sheet file is shown below:
p {color:red; margin-left:20px; margin-right:600px;}
body {background-color: #cccc66;}
style.css
index.html
FYI: link rel is link relation and in our case it is a "stylesheet". There are other types of relations besides stylesheet, like author, help, license, search, to name a few.
12
Demonstration
There’s an HTML file on the website which demonstrates this in the Lecture 02 example files
In this class we’ll mostly be using the internal style sheets (at least for now) It’s still good to be able to recognize the others, too
13
CommentingHTML Comment
<!-- Comment Goes Here -->
CSS Comment
/* Comment Goes Here */
14
Exercise: Identify CSS & HTML
Go to the exercises for todayFind the exercise for identifying CSS & HTML regions of a file
Do that exercise
15 CSS Selectors
Feel free to follow along with the slides, or check out the demo file (CSS_Selectors.html) on the course web page
16
CSS Syntax for internal & external stylesheets
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles":
p {color:red; text-align:center;}
17
The element SelectorSimply list the name of an element (such as p, or a, or li, or div, or span, or….) and ALL paragraphs/anchors/list items/divs/spans/etc will have that style applied.
In the CSSp { background-color: azure;}
In the HTML
<p>This paragraph has a very light blue background-it’s azure!</p>
18
The id Selector: #Standards specify that any given id name can only be referenced once within a page or document. From my experience, ids are most commonly used correctly in CSS layouts. This makes sense because there are usually only one 'wrapper' per page, or only one menu, one banner, usually only one content pane, etc. What this means is, two selectors cannot us the same id. If you want to do that, then you would create and use a class (which we'll talk about a bit later). NOTE: Do NOT start an id name with a number! It will not work in Firefox.
In the CSS
p#wrapper {width:70%; sets width of div in relation to the browser margin:0px auto; background-color: greenyellow;
}
In the HTML
<p id="wrapper"> Some stuff gokes here <a href=www.google.com>google!</a> etc.</p>
19
The class Selector: .The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector is defined with a period or "dot": . NOTE: You can name a class anything you want, although it is recommended you give it a name according to its function.
In the example below, all HTML elements with class="center" will be center-aligned:
In the CSS
.center {text-align:center;}
In the HTML
<h1 class="center">Rex Winkus's Portfolio</h1><p class="center">Week 01</p><p>this is the stuff in the first week</p><p class="center">Week 02</p><p>this is the stuff in the second week</p> W3Schools: Class vs ID
20
Exercise: Style A Page Using SelectorsFun fact: the popular JavaScript library named jQuery uses CSS selector syntax to identify which part(s) of the page to dynamically modify using JavaScript.
21 Some CSS Properties
22
Basic CSS Properties: color
The color property specifies the color of text.
In the CSS
body {color:red;}h1 {color:#00ff00;}.ex {color:rgb(0,0,255);}
In the HTML
<h1>This is heading 1</h1><p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p><p class="ex">This is a paragraph with class="ex". This text is blue.</p>
W3Schools: color
Value Description
color Specifies the text color. Look at CSS Color Values for a complete list of possible color values.(W3Schools also has a list of the predefined color names (like red, green, blue, aqua, etc, etc.).
inherit Specifies that the color should be inherited from the parent element
23
The background-color Property
The background-color property sets the background color of an element.
background-color:green;
W3Schools: background-color
24
HTML Color Codes
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colornames.asp
• Red/Green/Blue Hecadecimal Triplets• 0123456789abcdef
• Red/Green/Blue RGB Decimal Code• 0 - 255
• X11 Color Names• thistle, magenta, indigo, gray, grey
• HSL/HSV hue-saturation-lightness -value
• 0 - 360° , 0 - 100%, 0 - 100%• Web Safe Colors
• VGA 256 216 (6 × 6 × 6 = 216)each from 00 to FF
http://www.computerhope.com/htmcolor.htm
http://www.computerhope.com/color-qa.htm
http://html-color-codes.info/
/* RGB model */#F00 /* 3-digit shortchand hex form #rgb */#FF0000 /* 6-digit traditional hex form #rrggbb */rgb(255, 0, 0) /* integer range 0 - 255 */rgb(100%, 0%, 0%) /* float range 0.0% - 100.0% */ /* RGB with alpha channel, added to CSS3 */rgba(255, 0, 0, 0.5) /* 0.5 opacity, semi-transparent */ /* HSL model, added to CSS3 */hsl(0, 100%, 50%) /* red */hsl(120, 100%, 50%) /* green */hsl(120, 100%, 25%) /* dark green */hsl(120, 100%, 75%) /* light green */hsl(120, 50%, 50%) /* pastel green */ /* HSL model with alpha channel */hsla(120, 100%, 50%, 1) /* green */hsla(120, 100%, 50%, 0.5) /* semi-transparent green */hsla(120, 100%, 50%, 0.1) /* very transparent green */
http://en.wikipedia.org/wiki/Web_colors
25
HTML Color Codes
You are expected to be able to change the color of stuff on in-class exercises, homeworks, etc from memory
You are expected to recognize the color property, and be able to use at least the words ‘red’, ‘green’, and ‘blue’ on quizzes & exams
You are NOT expected to remember anything else from the prior slideSpecifically, you will not be asked about hexadecimal#’s
26
Some Other Basic CSS Properties: font-family
In the CSS [remember, that these class names can be anything you want]
.serif { font-family:"Times New Roman",Times,serif; }
.sanserif { font-family:Arial,Helvetica,sans-serif; }
In the HTML
<h1 class="serif">This is heading 1</h1><h2 class="sansserif">This is heading 2</h2><p class="serif">This is a paragraph.</p><p class="sansserif">This is a paragraph.</p>
W3Schools: font-family
27
Some Other Basic CSS Properties: font-size
In the CSS
h1 {font-size:250%;}h2 {font-size:200%;}.ften {font-size:10pt;}.bypixel {font-size:10px;}.f875em {font-size:0.875em;}
In the HTML
<h1>This is heading 1</h1><h2>This is heading 2</h2><p>This is a paragraph.</p><p class="ften">This is a paragraph.</p><p class="f875em">This is a paragraph.</p> W3Schools: font-size
An "em" is a relative property based on the default font-size of the browsers, which is typically 16px. For example, this means that:
• 1em = (16 x 1) = 16px = 100% • 1.25em (16 x 1.25) = 20px = 125%• 0.75em (16 x 0.75) = 12px = 75%• 2em (16 x 2) = 32px = 200%
28
Some Other Basic CSS Properties: font-style
In the CSS [remember, that these class names can be anything you want]
.normal {font-style:normal;}
.italic {font-style:italic;}
.oblique {font-style:oblique;}
In the HTML
<p class="normal">This is a paragraph, normal.</p><p class="italic">This is a paragraph, italic.</p><p class="oblique">This is a paragraph, oblique.</p><h2 class="oblique">This is a heading1, oblique.</h2> W3Schools: font-style
29
Some Other Basic CSS Properties: text-alignThe text-align property specifies the horizontal alignment of text in an element.
In the CSS
h1 {text-align:center}h2 {text-align:left}h3 {text-align:right}
In the HTML
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3> W3Schools: text-align
Value Description
left Aligns to the left
right Aligns to the right
center Centers the text
justify stretches the lines so each line has equal width
30
Just for fun:Assorted Tips & Tricks
Tips & Tricks• HTML5 & CSS3 Readiness Chart• Can I Use … ?• Initializer• Front End Tools for Workflow• The ToolBox
• HTML/CSS Frameworks• Blueprint• Bluetrip• Elements• Malo
• CSS Tips & Tricks• CSS3.me Generator• CSS3Generator• LayerStyles• Gradient Editor• Arrow Please• Create CSS3• CSS Values
http://www.pinterest.com/pibbydotcom/html5-css3-tips-and-tricks/
31
Exercise: Practice Using Some Basic CSS Styles
Related Documents
