0
http://www.slideshare.net/chadmairn
@cmairn
Virtual Petting Zoo/Discussion
Want to
hangout?
gplus.to/chadmairn
anymeeting.com/chadmairn
How would you describe this?
Agenda
• Learn what CSS does and appreciate its
importance in Web design.
• Recognize and use general CSS grammar
(e.g., s...
Draw four lines the same length that
touch, two horizontal and two vertical.
We need to tell computers exactly what we mea...
Text inside …
Border: 5px solid red;
Background-color: pink;
Padding: 25px;
Font: 8px/2 arial;
HTML = Content; defines tags etc.
CSS = Presentation; tells browser
how tags should appear.
CSS defines how to display HTM...
Define
widths, heights, colors, marg
ins, padding, borders, backgr
ounds, and type styles with
CSS
Source: http://www.w3schools.com
/*This is a comment*/
p
{
text-align:center;
/*This is another comment*/
color:black;
font-family:arial;
}
CSS Comments
id selector
#para1
{
text-align:center;
color:red;
}
ResultCode
class selector
Result
Code
ColorZilla and other tools …
Adding CSS code to HTML pages
1. External Style Sheet
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</...
http://www.w3schools.com/cssref/
live demonstration
~ Firebug
~ CSS Generating tools
~ CSS Examples
1. If you don't have an FTP application, then I recommend that you download
and install the following: http://filezilla-pr...
Uploading Files via FTP
To test you work visit …
http://marcomponline.com/chadtest/Class/
email username
Homework …
• Create a basic HTML index page (index.html) and include an external style
sheet as well as some inline styles...
Next Week …
• Share with the group good/bad experiences
(e.g., what worked, what didn’t etc.)
• Other coding examples
• Di...
How did it go?
Other examples
Styling an e-book with Calibre
RGB and Hex color values: http://cloford.com/resources/colours/500col.htm
CSS pseudo-classes
• used to add special effects to some selectors. Some
examples:
:link - add special style to an unvisit...
CSS3
• CSS3 is the latest standard for CSS.
• CSS3 is backwards compatible; browsers will support CSS2.
• Some of the most...
Code Result
Adding a box-shadow to a div element
Responsive Web Design
• adapts to the webpage’s layout by using
fluid, proportion-based grids, flexible images, and
CSS3 m...
Media queries and media query listeners
• CSS3 Media queries enable you to style a page based on properties
of the media w...
A flexible grid-based layout using relative sizing
• ‘non-responsive’ websites have a set width/ fixed
value (e.g., 900px)...
Flexible images and media, through dynamic resizing or CSS
• Images are usually set a width and height using
absolute meas...
http://marcomponline.com/chadtest/Class/jjack/
Desktop view
Mobile view – Galaxy S3 (Android)
http://jquerymobile.com/themeroller/
http://www.slideshare.net/chadmairn
@cmairn
Let’s
Hangout!
gplus.to/chadmairn
Introducing Cascading Style Sheets
Upcoming SlideShare
Loading in...5
×

Introducing Cascading Style Sheets

1,915

Published on

Published in: Technology, Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,915
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Introducing Cascading Style Sheets"

  1. 1. http://www.slideshare.net/chadmairn @cmairn
  2. 2. Virtual Petting Zoo/Discussion Want to hangout? gplus.to/chadmairn anymeeting.com/chadmairn
  3. 3. How would you describe this?
  4. 4. Agenda • Learn what CSS does and appreciate its importance in Web design. • Recognize and use general CSS grammar (e.g., syntax, semantics, vocabulary) • Understand how to link a CSS file to an HTML document. • Create a Web designers toolbox. • Design a basic webpage using CSS.
  5. 5. Draw four lines the same length that touch, two horizontal and two vertical. We need to tell computers exactly what we mean! Source: http://goo.gl/N0gvb
  6. 6. Text inside … Border: 5px solid red; Background-color: pink; Padding: 25px; Font: 8px/2 arial;
  7. 7. HTML = Content; defines tags etc. CSS = Presentation; tells browser how tags should appear. CSS defines how to display HTML tags. Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file! Source: http://www.w3schools.com
  8. 8. Define widths, heights, colors, marg ins, padding, borders, backgr ounds, and type styles with CSS
  9. 9. Source: http://www.w3schools.com
  10. 10. /*This is a comment*/ p { text-align:center; /*This is another comment*/ color:black; font-family:arial; } CSS Comments
  11. 11. id selector #para1 { text-align:center; color:red; } ResultCode
  12. 12. class selector Result Code
  13. 13. ColorZilla and other tools …
  14. 14. Adding CSS code to HTML pages 1. External Style Sheet <head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> 2. Internal Style Sheet <head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head> 3. Inline Styles <p style="color:sienna;margin-left:20px">This is a paragraph.</p> Note: an inline style will override a style defined inside the <head> tag or in an external style sheet. If the link to the external style sheet is placed after the internal style sheet in HTML <head>, then the external style sheet will override the internal style sheet! Source: http://goo.gl/RgDFa
  15. 15. http://www.w3schools.com/cssref/
  16. 16. live demonstration ~ Firebug ~ CSS Generating tools ~ CSS Examples
  17. 17. 1. If you don't have an FTP application, then I recommend that you download and install the following: http://filezilla-project.org/download.php 2. Upload files to your directory (e.g., email address username). 3. When you begin to work with the FTP client, you will need to enter the following credentials: •Host: via email •Username: via email •Password: via email A quick screencast video demonstrating how to login using the FileZilla FTP Client can be found at http://www.youtube.com/watch?v=9VaM_wv0aQ4. 4. You will need either a text editor (TextEdit on mac or Notepad on PC) or a tool like Dreamweaver. If you have problems, please contact Chad Mairn at (727) 537-6405 or at chadmairn@gmail.com. Uploading Files
  18. 18. Uploading Files via FTP
  19. 19. To test you work visit … http://marcomponline.com/chadtest/Class/ email username
  20. 20. Homework … • Create a basic HTML index page (index.html) and include an external style sheet as well as some inline styles. Experiment with various properties and values. • Find an interesting site that uses CSS and modify it for your needs. {Note: try a search for “CSS exercises” and use whatever interests you. http://www.w3schools.com/css/css_examples.asp and http://www.codecademy.com/tracks/htmlcss are great resources! Don’t forget Firebug!} • Test and validate your HTML file at http://validator.w3.org/ • Test and validate your CSS file at http://jigsaw.w3.org/css-validator/ • Please take good notes because I’d like to spend some time next week discussing any issues you may have had using CSS.
  21. 21. Next Week … • Share with the group good/bad experiences (e.g., what worked, what didn’t etc.) • Other coding examples • Discuss the future of CSS3/Responsive Web Design • Questions and answers …
  22. 22. How did it go?
  23. 23. Other examples
  24. 24. Styling an e-book with Calibre RGB and Hex color values: http://cloford.com/resources/colours/500col.htm
  25. 25. CSS pseudo-classes • used to add special effects to some selectors. Some examples: :link - add special style to an unvisited link. :visited - add special style to a visited link. :hover - add special style to an element when you mouse over it.
  26. 26. CSS3 • CSS3 is the latest standard for CSS. • CSS3 is backwards compatible; browsers will support CSS2. • Some of the most important CSS3 modules are: – Selectors [HTML (e.g., h2); Class (e.g., .hilight); – Box Model – Backgrounds and Borders – Text Effects – 2D/3D Transformations – Animations – Multiple Column Layout – User Interface Source: http://goo.gl/eMQEC • Try http://css3generator.com/ and http://css3please.com/
  27. 27. Code Result Adding a box-shadow to a div element
  28. 28. Responsive Web Design • adapts to the webpage’s layout by using fluid, proportion-based grids, flexible images, and CSS3 media queries. • Three concepts: • Media queries and media query listeners • A flexible grid-based layout that uses relative sizing • Flexible images and media, through dynamic resizing or CSS Source: http://goo.gl/UQ94d Caveat: I am just learning RWD!
  29. 29. Media queries and media query listeners • CSS3 Media queries enable you to style a page based on properties of the media where the page is being displayed. For example: @media screen and (max-width:400px) { div {border:none;} } • The above code limits the scope to viewports (i.e., virtual window; screen display) which are 400px or less in width. • Media Query Listeners enable you to execute a script in response to a change in a media query. • An example: http://goo.gl/G4fGb Source: http://goo.gl/G4fGb
  30. 30. A flexible grid-based layout using relative sizing • ‘non-responsive’ websites have a set width/ fixed value (e.g., 900px) • set a relative value as the width then the screen size is mostly irrelevant. For example: #content{width: 90%;} This content area would respond to the screen size. Source: http://goo.gl/Sa5nG
  31. 31. Flexible images and media, through dynamic resizing or CSS • Images are usually set a width and height using absolute measurements like ‘px’. This is not flexible. • Modern browsers are good at maintaining proportions so the image will resize well as the layout resizes. For example: img, embed, object, video { max-width: 100% } Source: http://goo.gl/VN77O
  32. 32. http://marcomponline.com/chadtest/Class/jjack/ Desktop view
  33. 33. Mobile view – Galaxy S3 (Android)
  34. 34. http://jquerymobile.com/themeroller/
  35. 35. http://www.slideshare.net/chadmairn @cmairn
  36. 36. Let’s Hangout! gplus.to/chadmairn
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×