CSC 5750 Lecture Notes - Lecture 5: Responsive Web Design, Webkit, Cascading Style Sheets
15 Sep 2018
School
Department
Course
Professor
1 of 8
CSC 5750 – Principles of Web Technology
Session 5 Notes – 13 September 2018
Administrative
Today’s session
Internal styles
External styles
CSS comments
CSS selectors
CSS pseudo elements
CSS pseudo classes
Animation
Vendor prefixes
@media rule
Color schemes
Multi-column content
The Golden Ratio
Content framing
Session Topics
Internal styles
● Internal styles are defined within HTML tag <head>.
● Internal styles apply only to the web page they are embedded within.
● Internal styles are overridden by inline styles.
2 of 8
CSC 5750 – Principles of Web Technology
Session 5 Notes – 13 September 2018
● Internal styles have syntax:
<head>
…
<style>
[selector-1]
{
[property-1]:[value];
[property-2]:[value];
…
[property-n]:[value];
}
[selector-2]
{
[property-1]:[value];
[property-2]:[value];
…
[property-n]:[value];
}
…
[selector-m]
{
[property-1]:[value];
[property-2]:[value];
…
[property-n]:[value];
}
</style>
…
</head>
● See CSS internal styles on Canvas.
External styles
● Cascading style sheets (CSS) enable web page styles to be separated from web
page content.
● External styles are defined in a file with extension .css.
● External styles apply to any web page with a link to the .css file containing them.
● External styles are overridden by internal styles which are overridden by inline
styles.
● External styles are the preferable approach since:
✓ They give a consistent look to multiple pages.
✓ Style changes are reflected throughout each of the web pages connected to
them.
3 of 8
CSC 5750 – Principles of Web Technology
Session 5 Notes – 13 September 2018
● External styles have syntax:
[selector-1]
{
[property-1]:[value];
[property-2]:[value];
…
[property-n]:[value];
}
[selector-2]
{
[property-1]:[value];
[property-2]:[value];
…
[property-n]:[value];
}
…
[selector-m]
{
[property-1]:[value];
[property-2]:[value];
…
[property-n]:[value];
}
● An HTML file is connected to a CSS file using HTML tag <link> within HTML
tag <head>:
<link rel="stylesheet" type="text/css" href="[file.css]">
● CSS may be tested for errors at jigsaw.w3.org/css-
validator/#validate_by_upload.
● See CSS external styles on Canvas.
● See CSS template on Canvas.
CSS comments
● CSS may be commented.
● CSS comments begin with /* and end with */, and may span one or more lines.
● See CSS external styles on Canvas.
CSS selectors
● A CSS selector groups a style and determines what web page parts it applies to.
● Selectors include:
Document Summary
Internal styles are defined within html tag . Internal styles apply only to the web page they are embedded within. Internal styles are overridden by inline styles. Cascading style sheets (css) enable web page styles to be separated from web page content. External styles are defined in a file with extension . css. External styles apply to any web page with a link to the . css file containing them. External styles are overridden by internal styles which are overridden by inline styles. External styles are the preferable approach since: They give a consistent look to multiple pages. Style changes are reflected throughout each of the web pages connected to them. An html file is connected to a css file using html tag within html tag : Css may be tested for errors at jigsaw. w3. org/css- validator/#validate_by_upload. Css comments begin with /* and end with */, and may span one or more lines.
