Lecture4-Intro To CSS
Lecture4-Intro To CSS
CSS
Review Question 1
Which tag is used to create a link to another page?
1. <p>
2. <li>
3. <a>
4. <em>
Review Question 1
Which tag is used to create a link to another page?
1. <p>
2. <li>
3. <a>
4. <em>
Review Question 2
What are the two tags that nest directly within the <html> tags?
Review Question 2
What are the two tags that nest directly within the <html> tags?
<ul><li>1</li><li>2</li><li>3</li></ul>
1. 1 ● 1 A. 1
2. 2 ● 2 B. 2
3. 3 ● 3 C. 3
Review Question 3
How does this HTML element look like in a browser:
<ul><li>1</li><li>2</li><li>3</li></ul>
1. 1 ● 1 A. 1
2. 2 ● 2 B. 2
3. 3 ● 3 C. 3
CSS = Cascading Style Sheets
CSS is a "style sheet language" that lets you style the elements on your page.
So far we learned how to create a paragraph like this in HTML, but how do we add
color to it or align it to the center of the page?
The CSS Rule
The CSS Rule
● A block of CSS code is a rule.
● The rule starts with a selector.
● It has sets of properties and values.
● A property-value pair is a declaration.
Connecting CSS to HTML
Now we know what does a CSS rule look like. But how do we use it to customize our
HTML pages?
1. Inline
2. Embedded
3. External
Connecting CSS to HTML: Inline
Uses the HTML attribute style.
How would you change the color of all the paragraphs in your HTML file to red?
Connecting CSS to HTML: Inline
Uses the HTML attribute style.
How would you change the color of all the paragraphs in your HTML file to red?
You can change the style of all paragraphs in one HTML file at once.
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
....
</body>
</html>
myfile.html
Connecting CSS to HTML: Linked
Why do we prefer linked CSS files?
p {
color: red;
}
CSS Selectors
CSS Selectors: Element
The element selector selects all elements with the specified element name.
p {
color: yellow;
}
body {
background-color: red;
}
CSS Selectors: Id
The #id selector styles the element with the specified id attribute.
#header {
color: yellow;
}
#firstname {
background-color: red;
}
CSS Selectors: Class
The .class selector selects all elements with a specific class attribute.
.maintitle {
font-size: 100px;
}
.address {
font-style: italic;
}
CSS Selectors: Class
You can also specify that only specific HTML elements should be affected by a class.
To do this, start with the element name, then write the period (.) character, followed
by the name of the class.
h1.maintitle {
font-size: 100px;
}
CSS Selectors: *
The * selector selects all elements.
* {
font-size: 10px;
}
The * selector can also select all elements inside another element
p * {
background-color: green;
}
CSS Selectors: Element Element
The element element selector is used to select elements inside elements.
p strong {
background-color: green;
}
CSS Selectors: Element,Element
To style several elements with the same style, separate each element name with a
comma.
<p>This is a paragraph.</p>
<h1>This is a heading.</h1>
p,h1 {
background-color: green;
}
p {
font-size: 10px;
}
CSS Selectors
There are a number of other CSS selectors that can be used. For a complete list you
can check out this webpage:
https://www.w3schools.com/cssref/css_selectors.asp
Cascading
Styles "cascade" down until changed
p{
color:blue;
font-family: 'Helvetica';
}
.red {
color: red;
}
#special {
font-family: Arial;
}
<p>Paragraph</p>
<p class ="red">Paragraph</p>
<p class = "red" id ="special">Paragraph</p>
Cascading Priority
Your browser assigns different priorities to CSS rules depending on the type of
selector.
a{
background-color: red;
}
a{
background-color: yellow;
}
The 17 standard named colors are: aqua, black, blue, fuchsia,gray, grey, green, lime,
maroon, navy, olive, purple,red, silver, teal, white, and yellow.
With the possible exception of black and white, color names have limited use in a
modern, well-designed web sites because they are so specific and limiting.
CSS Values: Lengths and Percentages
There are many property-specific units for values used in CSS, but there are some
general units that are used by a number of properties and it is worth familiarizing
yourself with these before continuing.
p {
color: yellow;
}
body {
background-color: red;
}
CSS Properties: Text
You can alter the size and shape of the text on a web page with a range of properties.
font-family: This is the font itself, such as Times New Roman, Arial, or Verdana.
The user’s browser has to be able to find the font you specify, which, in most cases,
means it needs to be on their computer so there is little point in using obscure fonts
that are only sitting on your computer
There are a select few “safe” fonts (the most commonly used are Arial, Verdana and
Times New Roman), but you can specify more than one font, separated by commas.
The purpose of this is that if the user does not have the first font you specify, the
browser will go through the list until it finds one it does have.
CSS Properties: Text
p {
font-family: Arial, Helvetica, Serif;
}
will look for the Arial font first and, if the browser can’t find it, it will search for
Helvetica, and then a common serif font.
if the name of a font is more than one word, it should be put in quotation marks
p {
font-family: "Times New Roman";
}
CSS Properties: Text
font-size: sets the size of the font (remember units such as px, em, pt)
text-decoration: states whether the text has got a line running under, over, or
through it. (underline, overline, line-through, none)
text-transform: will change the case of the text (capitalize, uppercase, lowercase,
none)
CSS Properties: Text
body {
font-family: arial, helvetica, sans-serif;
font-size: 14px;
}
a {
h1 {
text-decoration: none;
font-size: 2em;
}
}
strong {
h2 {
font-style: italic;
font-size: 1.5em;
text-transform: uppercase;
}
}
CSS Properties: Text Spacing
letter-spacing: sets spacing between letters. The value can be a length or normal.
word-spacing: sets spacing between words. The value can be a length or normal.
line-height: sets the height of the lines in an element, such as a paragraph, without
adjusting the size of the font. It can be a number (which specifies a multiple of the
font size, so “2” will be two times the font size, for example), a length, a percentage,
or normal.
text-indent: will indent the first line of a paragraph, to a given length or percentage.
text-align: will align the text inside an element to left, right, center, or justify
CSS Properties
Many CSS properties have self-explanatory names:
● background-color
● font-family
● font-size
● color
● width
● height
We can't possibly cover all CSS properties in this course, but we'll cover more later.