CSS 101
Loading...
Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.
3 Favorites
-
Man Mohan Singh, Web Designer
favorited this 2 years ago
-
OnlyBlue
favorited this 2 years ago
-
terjin
favorited this 3 years ago
CSS 101 - Presentation Transcript
- CSS 101 WebComm School – 10/24/07
- Huh? CSS?
- Does not stand for C orn S mut S idedish
- Well, what is it then?
- Stands for C ascading S tyle S heets
- Simple language that defines how a website should look
- Separates the presentation of a website from the content
- It’s a web standard, and it’s here to stay!
- If done correctly, it will save you a lot of time and effort!
- Where did this come from?
- Håkon Wium Lie proposed idea in 1994
- W3C created, continues work on CSS
- CSS 1 published December 1996
- CSS Working Group created in early 1997
- CSS 2 published May 1998
- CSS 3 has been under development for the past 8 years
- Any problems with CSS?
- 11 years later, and Internet Explorer still does not correctly support CSS 1
- No browser has full support for CSS 2
- CSS doesn’t always have the best way of doing things, but it is the best we’ve got
- How do I use it?
- Included into a web page in 3 ways
- External style sheet (best)
- Internal style sheet (not as good)
- Inline style (basically breaking the purpose of CSS)
- Style sheets will cascade , or overwrite similar styles to create one master set of styles
- Inline overwrites internal, which overwrites external, which overwrites browser default
- How do I add CSS to my page?
- External
- <link href=“styles.css" rel="stylesheet" type="text/css" media=“screen" />
- Internal
- <head>
- <style type=“text/css”>
- /* styles go here */
- </style>
- </head>
- Inline
- <p style=“ /* styles go here */ ”>Text</p>
- CSS Syntax
- Selector {
- property: value;
- }
- Selector is what you want to define (HTML element, for example)
- Property is the CSS style you want to change, with a Value that you set it at
- CSS Selectors
- 3 types of selectors
- Tag selectors
- ID selectors
- Class selectors
- Selectors should never start with a number, nor should they have spaces in them
- Tag Selectors
- Can be any type of HTML element
- body
- p
- div
- … and more!
- p {
- background-color: red;
- }
- Makes the background of all paragraphs red
- ID Selectors
- You can give an ID to any element to style it differently than other similar elements
- IDs must be unique! You can not have two elements on one page with the same ID!
- p#special {
- background-color: blue;
- }
- One paragraph with id=“special” will now be blue
- Class Selectors
- Can give multiple elements a class to style them differently
- p.semispecial {
- background-color: green;
- }
- Any paragraph with class=“semispecial” will now be green—can be multiple ones on a page
- Descendant Selectors
- You can chain selectors together! Just put a space between them
- body #container p.warning a {
- color: red;
- }
- What element(s) will be affected by this style?
- Grouping Selectors
- You can group selectors together as well with commas
- p.warning, p.special {
- color: red;
- }
- Now both classes, warning and special, will have red text.
- Selectors, cont.
- Name selectors based on what the define, not on what they look like!
- Is anything wrong with this code?
- <div class=“red”>
- <h1>Warning!</h1>
- <p>A hurricane warning is in effect. Stay indoors.</p>
- </div>
- ------------------------------------------------------
- .red {
- color: red;
- }
- CSS Properties
- Literally hundreds of properties to choose from to change your webpage’s design
- You can change many things:
- Font and text properties
- Background colors, images
- Positioning
- Borders
- Margin, padding
More info about this document
© All Rights Reserved
Go to text version
- Total Views 2047
- 2014 on SlideShare
- Comments 0
- Favorites 3
- Downloads 100
Most viewed embeds
All embeds
- Upload Info
- Uploaded via SlideShare
- Uploaded as Microsoft PowerPoint
0 comments
Post a comment