CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to...
-
Upload
valerie-bryan -
Category
Documents
-
view
228 -
download
5
Transcript of CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to...
![Page 1: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/1.jpg)
CASCADING STYLE SHEETS
CSS
![Page 2: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/2.jpg)
2
What CSS means?
CSS is an extension to basic HTML that allows you to style your web pages.
It separates the part that defines structure from the part that defines form of a web page.
HTML code remains clean and simple, as originally intended and the CSS code controls appearance.
![Page 3: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/3.jpg)
3
Limits of HTML-tags
Formatting with HTML-tags is limited, for example: We cannot create text exactly 80 pixels tall We cannot specify margins easily We cannot control the space between lines of
words We cannot precisely position images on the
screen The style sheets make those things
possible and more.
![Page 4: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/4.jpg)
4
With the Style sheets
You can make smaller and faster pages. You can maintain or update many pages
faster and easier (many pages can have common style sheet).
You can control layout like never before!
![Page 5: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/5.jpg)
5
Adding Styles
There are 4 methods you can use to add styles to your page:
1. Embed a style sheet within the HTML document.
2. Link to an external style sheet from the HTML document.
3. Import an external style sheet into the HTML document.
4. Add styles inline in the HTML document.
![Page 6: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/6.jpg)
6
Link to an external style sheet from the HTML document
You can point multiple HTML documents to one certain style sheets document.
This external file will set the rules for all of your Web pages.
If you change a detail (such as the font face) in the style sheets file, all of your pages will instantly reflect that change.
If you have to maintain a large site, this feature helps you a lot!!
![Page 7: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/7.jpg)
7
External style sheet
Here’s the plain HTML-code:
<HTML><HEAD>
<TITLE>My First Style sheet</TITLE>
<LINK REL=stylesheet HREF="mystyles.css" TYPE="text/css">
</HEAD>
<BODY>
<H1>Style sheets for better Web Design</H1>
<P>Amazing, isn’t it??</P>
</BODY></HTML>
Let’s add some style sheets. Create a separate text file called mystyles.css which only contains the following code:
H1 { color: green; font-size: 37px; font-family: impact }
P { text-indent: 1cm; background: yellow; font-family: courier }
![Page 8: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/8.jpg)
8
Text formatting
font-family defines which font will display font-size defines text size using points, pixels etc. font-style can be italic or normal font-weight defines how bold text is font-variant displays normal text in small caps text-transform can be upper- or lowercase or
capitalize text-decoration can be underline, overline,
line-through, blink or none
![Page 9: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/9.jpg)
9
Examples
H2 { font-family: impact, “comic sans ms”, sans-serif }
This means, that browser uses impact-font if it’s installed on this computer, if not, it uses the next font named etc.
BODY { font-family: arial, tahoma }
H2 { color: red; margin: 10px; font-family: verdana, arial }
P { font-size: 14 pt } P { font-size: 20px }
P { font-size: large } (or other keywords: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger)
------------
P { font-size: 15pt }
B { font-size: 300% } (bold text would be 3 times larger)
![Page 10: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/10.jpg)
10
Examples
H3 { font-style: italic }P { font-weight: bold }P { font-weight: 500 } (normal non-bold text has a value of
400. The most bold version is 900)H2 { font-variant: small-caps }B { text-transform: uppercase } (or lowercase, capitalize or
none)B { text-decoration: underline } (or overline, line-through, blink
or none)With the none-value you can remove the line under text links:A:link { text-decoration: none }A:active { text-decoration: none }A:visited { text-decoration: none }
![Page 11: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/11.jpg)
11
Typography and Layout
word-spacing defines the space between words letter-spacing controls the space between individual
characters line-height controls the vertical space between lines of text text-align helps to align paragraphs left, right, center or
justify vertical-align aligns top, bottom etc. text-indent indents paragraphs margin defines margins around text, images etc. padding defines the space between the element and its
border border defines the width, color and style of borders float and clear controls how elements wrap around one
another
![Page 12: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/12.jpg)
12
Examples
You can add additional space between words by using length units like: in (inches), cm, mm, pt (points), pc (picas), em (ems), ex (x-height) or px (pixels).
H3 { word-spacing: 15px } (the value will be added to whatever default value the browser already uses)
H3 { letter-spacing: 10px } You can specify line-height with a number, length unit
or percentage:B { line-height: 10pt }B { font-size: 12pt; line-height: 2 }B { font-size: 12pt; line-height: 140% }H4 { text-align: center }
![Page 13: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/13.jpg)
13
Examples
Possible values for vertical-align:Top, bottom, text-top, text-bottom, baseline, middle, sub and
superH4 { vertical-align: top }P { text-indent: 2cm }H2 { margin-top: 20px; margin-bottom: 5px; margin-left: 80px;
margin-right: 55px }H3 { padding-top: 20px; padding-bottom: 5px; padding-left:
100px; padding-right: 55 px }H4 { border-top-width: 2px; border-bottom-width: 5px; border-left-
width: 1px; border-right-width: 1px }IMG { border-width: 2px }P { border-color: red; border-width: 3px }P { border-style: double; border-width: 3px } (border-style can be:
solid, double, dotted, dashed, groove, ridge, inset, outset)
![Page 14: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/14.jpg)
14
Examples
Float enables you to flow text around an element
H3 { float: left } If you want to wrap one paragraph around a
floating element, but make sure the next paragraph doesn’t wrap, use Clear.
P { clear: left }
![Page 15: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/15.jpg)
15
Colors and Backgrounds
color sets the foreground color of elements background-color background-image background-repeat defines if and how the
background image tiles background-attachment determines whether a
background image scrolls with the page or is fixed background-position enables you to position a
background image relative to the element it’s applied to
background allows you to specify all the background-related properties in one rule.
![Page 16: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/16.jpg)
16
Examples
B { color: #333399 }
B { color: yellow }
B { color: rgb(51,204,0) }
P { background-color: #FFFF66 }
BODY { background-image: url(/images/this.gif) }
P { background-image: url(http://www.ramk.fi/dpt/what.jpg) } If you don’t want your background image to tile, use:
BODY { background-repeat: no-repeat; background-image: url(/images/this.gif }
![Page 17: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/17.jpg)
17
Examples
A background-image that doesn’t scroll, but remains fixed in the window regardless of where you scroll on the page:
BODY { background-attachment: fixed; background-image: url(mypics/back.gif) }
P { background-position: center bottom; background-image: url(mine.gif) } (you can use: top, bottom, left, right and center)
P { background-position: 70px 10 px; background-image: url(myback.gif) }
P { background: url(/images/my.jpg) #CCFFCC no-repeat top right }
![Page 18: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/18.jpg)
18
Positioning and Layering
position defines an exact position of elements in a page
left sets a horizontal position top sets a vertical position width sets a width of an element height sets the height overflow controls how content is treated if it goes
over its boundaries visibility makes something disappear clip controls what parts of an element are visible z-index sets what should be on top when things
overlap
![Page 19: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/19.jpg)
19
Examples
H3 { position: absolute; left: 100px; top: 44px }
H2 { position: relative; left: 40px; top: 10px }
H4 { visibility: hidden }
![Page 20: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/20.jpg)
20
Inheritance
Style sheets’ rules are inherited from “parent” to “child”.
Example:B { color: blue }(means that all bold texts should be blue)<B>All my web pages look very <I>nice</I>
always.</B>(there’s no rule set for <I>tag, but it is inside <B>tags, it inherits the declarations. So the child displays in blue just like its parent.)
Result:All my web pages look very nice always.
![Page 21: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/21.jpg)
21
Contextual Selectors
Let’s say we want bold text to be green, but only when it is inside <P>-tags.
Contextual selectors are selectors that demand that a certain situation be true in order for their declarations to be carried out.P B { color: green }
<CENTER><B>Tarja Halonen, President</B></CENTER><P>She has been the president of <B>Finland<B/> since year
2000.</P>Result:
Tarja Halonen, President
She has been the president of Finland since year 2000.
![Page 22: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/22.jpg)
22
Combining Selectors
You can combine elements within one selector like:
H1, H2, H3, H4, H5, H6 { color: #009900; font-family: Arial, Verdana }
![Page 23: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/23.jpg)
23
Comments
You can comment codes in style sheets:
H1 { text-indent: 10px } /*indent all big headings */
IMG { margin-top: 100px } /*give all images a top margin */
![Page 24: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/24.jpg)
24
Classes
Example: You want background to be green for the first paragraph, purple for the second paragraph and gray for the third.
You could create three different classes for P and they would look like this:
P.first { background-color: green }P.second {background-color: purple }P.third {background-color: gray } Your HTML code would look like this:<P CLASS=”first”>This is the first paragraph...</P><P CLASS=”second”>This is the second paragraph…</P><P CLASS=“third”>This is the third paragraph…</P>
Example + CSS
![Page 25: CASCADING STYLE SHEETS CSS. 2 What CSS means? CSS is an extension to basic HTML that allows you to style your web pages. It separates the part that.](https://reader036.fdocuments.in/reader036/viewer/2022062407/56649cfe5503460f949cf2b2/html5/thumbnails/25.jpg)
25
Exercise
Create an HTML document with: big main title (H1) an image a long text (don’t use formatting tags) unordered list link
Create a CSS with Background color settings Font settings Link should not be blue or underlined Paragraph should have its own background color List should be in red Image is floating
Example + CSS