Stylesheets and Coding
Stylesheets and
C
oding
Web
Cascading Style Sheets (CSS)
•
Also referred to as “style sheets.”
•
CSS separates the presentation of an
HTML document from the actual content
(text) on the page.
•
Styles such as text size, color, and format
are defined and applied across multiple
pages on a website and can be updated
globally using the particular style.
Sample CSS
•
On the right is sample CSS code
from
http://www.csszengarden.com
•
By examining the CSS code, you
can see how after each key word
is a set of design elements that
are being addressed.
•
After html, a bracket { follows andthen lines of code. The second
bracket is a closing }
•
The style specifically ends for html
after the closing bracket.
css released under Creative Commons License -
http://creativecommons.org/licenses/by-nc-sa/1.0/
Sample CSS
•
Each line of code represents
something specific, which will be
affected by the code.
•
For the body code, the CSS is
identifying what the font size is: 75%
and also the font name: Georgia, a
sans serif font.
•
Line-height identifies the spacing,
which is followed by the hex color:
#555753 or a dark grey
•
Students can find out color codes at:
http://www.color-hex.com
css released under Creative Commons License -
http://creativecommons.org/licenses/by-nc-sa/1.0/
Sample CSS
•
The background #fff is black and
a photo (blossoms.jpg) is
loaded, without tiling (no repeat)
and it is aligned to the bottom
right; with no margin and no
padding.
•
Download the CSS code from
http://www.csszengarden.com
and dissect the rest of the code.
•
Utilize the website as a resource
to see if what you think rings
true for each lines of code.
css released under Creative Commons License -
http://creativecommons.org/licenses/by-nc-sa/1.0/
The Beauty of CSS Design
•
Next, download the HTML code from:
http://www.csszengarden.com
•
This document lists ways that students can experiment with CSS code:
•
Below is text pulled from the HTML document from the CSS Zen Garden. The
website was created to allow you to play with CSS code and see how it affects the
style of the HTML document:
•
C
S
S
Z
e
n
G
a
r
d
e
n
•
T
h
e
B
e
a
u
t
y
o
f
C
S
S
D
e
s
i
g
n
•
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page.
•
Download the example
html file
and
css file
•
T
h
e
R
o
a
d
t
o
E
n
l
i
g
h
t
e
n
m
e
n
t
•
Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers.
•
We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators.
•
The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and
invigorating fashion. Become one with the web.
Cascading Style Sheets (CSS) play a crucial role in separating the presentation of an HTML document from its content, allowing for consistent design across web pages. Explore the impact of CSS on web design through sample code snippets and the CSS Zen Garden project. Experiment with different styles and layouts to achieve visually appealing websites. Dive into the world of CSS to elevate your web design skills.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.
E N D
Presentation Transcript
Stylesheets and Coding Web
Cascading Style Sheets (CSS) Also referred to as style sheets. CSS separates the presentation of an HTML document from the actual content (text) on the page. Styles such as text size, color, and format are defined and applied across multiple pages on a website and can be updated globally using the particular style.
Sample CSS On the right is sample CSS code from http://www.csszengarden.com By examining the CSS code, you can see how after each key word is a set of design elements that are being addressed. After html, a bracket { follows and then lines of code. The second bracket is a closing } The style specifically ends for html after the closing bracket. css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/
Sample CSS Each line of code represents something specific, which will be affected by the code. For the body code, the CSS is identifying what the font size is: 75% and also the font name: Georgia, a sans serif font. Line-height identifies the spacing, which is followed by the hex color: #555753 or a dark grey Students can find out color codes at: http://www.color-hex.com css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/
Sample CSS The background #fff is black and a photo (blossoms.jpg) is loaded, without tiling (no repeat) and it is aligned to the bottom right; with no margin and no padding. Download the CSS code from http://www.csszengarden.com and dissect the rest of the code. Utilize the website as a resource to see if what you think rings true for each lines of code. css released under Creative Commons License - http://creativecommons.org/licenses/by-nc-sa/1.0/
The Beauty of CSS Design Next, download the HTML code from: http://www.csszengarden.com This document lists ways that students can experiment with CSS code: Below is text pulled from the HTML document from the CSS Zen Garden. The website was created to allow you to play with CSS code and see how it affects the style of the HTML document: CSS Zen Garden The Beauty of CSS Design A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment has been achieved thanks to the tireless efforts of folk like the W3C, WaSP, and the major browser creators. The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. Begin to see with clarity. Learn to use the time-honored techniques in new and invigorating fashion. Become one with the web.
