CSS Basics
Chapter: 1
What is CSS ?
Welcome to CSS!
CSS stands for Cascading Style Sheets.
- Cascading refers to the way CSS applies one style on top of another.
- Style Sheets control the look and feel of web documents.
CSS and HTML work hand in hand:
- HTML sorts out the page structure.
- CSS defines how HTML elements are displayed.
To understand CSS, you should already have a basic knowledge of HTML.
If you want to study HTML, check out our HTML course.
If you want to study HTML, check out our HTML course.
Welcome to CSS!
What are style sheets used for?
Why Use CSS?
CSS allows you to apply specific styles to specific HTML elements.
The main benefit of CSS is that it allows you to separate style from content.
Using just HTML, all the styles and formatting are in the same place, which becomes rather difficult to maintain as the page grows.
All formatting can (and should) be removed from the HTML document and stored in a separate CSS file.
Why Use CSS?
Why use CSS?
Chapter: 2
Inline, Embedded and External CSS
Inline CSS
Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element.
In order to use an inline style, add the style attribute to the relevant tag.
The example below shows how to create a paragraph with a gray background and white text:
<p style="color:white; background-color:gray;">
This is an example of inline styling.
</p>
This is an example of inline styling.
</p>
CSS
The style attribute can contain any CSS property.
Inline CSS
Select the attribute that organizes the inline styling:
Embedded/Internal CSS
Internal styles are defined within the <style> element, inside the head section of an HTML page.
For example, the following code styles all paragraphs:
<html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
<head>
<style>
p {
color:white;
background-color:gray;
}
</style>
</head>
<body>
<p>This is my first paragraph. </p>
<p>This is my second paragraph. </p>
</body>
</html>
CSS
An internal style sheet may be used if one single page has a unique style.
Embedded/Internal CSS
Where should the style tag be declared to organize an internal CSS?
External CSS
With this method, all styling rules are contained in a single text file, which is saved with the .css extension.
This CSS file is then referenced in the HTML using the <link> tag. The <link> element goes inside the head section.
Here is an example:
The HTML:
<head>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
<link rel="stylesheet" href="example.css">
</head>
<body>
<p>This is my first paragraph.</p>
<p>This is my second paragraph. </p>
<p>This is my third paragraph. </p>
</body>
HTML
p {
color:white;
background-color:gray;
}
color:white;
background-color:gray;
}
CSS
Both relative and absolute paths can be used to define the href for the CSS file. In our example, the path is relative, as the CSS file is in the same directory as the HTML file.
External CSS
Fill in the blanks to call an external stylesheet called "test.css":
Chapter: 3
CSS Rules and Selector
CSS Syntax
CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document.
A style rule has three parts: selector, property, and value.
For example, the headline color can be defined as:
h1 { color: orange; }
CSS
The declaration block contains one or more declarations, separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.
Each declaration includes a property name and a value, separated by a colon.
CSS Syntax
In the rule, the "selector":
Type Selectors
The most common and easy to understand selectors are type selectors. This selector targets element types on the page.
For example, to target all the paragraphs on the page:
p {
color: red;
font-size:130%;
}
color: red;
font-size:130%;
}
CSS
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces.
Type Selectors
Rearrange the code to create a valid CSS style rule:
id and class Selectors
id selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree. Here is an example of an id selector:
The HTML:
<div id="intro">
<p> This paragraph is in the intro section.</p>
</div>
<p> This paragraph is not in the intro section.</p>
<p> This paragraph is in the intro section.</p>
</div>
<p> This paragraph is not in the intro section.</p>
HTML
#intro {
color: white;
background-color: gray;
}
color: white;
background-color: gray;
}
CSS
To select an element with a specific id, use a hash character, and then follow it with the id of the element.
In the example below, both paragraphs having the class "first" will be affected by the CSS:
The HTML:
<div>
<p class="first">This is a paragraph</p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>
<p class="first">This is a paragraph</p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section</p>
<p> The second paragraph is not in the intro section. </p>
HTML
.first {font-size: 200%;}
CSS
To select elements with a specific class, use a period character, followed by the name of the class.
Do NOT start a class or id name with a number!
Do NOT start a class or id name with a number!
id and class Selectors
Fill in the blanks to give yellow background color to the element with id="intro", and black text color to the class="mytext":
Descendant Selectors
These selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to.
For example, to target only <em> elements in the first paragraph of the "intro" section:
The HTML:
<div id="intro">
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>
<p class="first">This is a <em> paragraph.</em></p>
<p> This is the second paragraph. </p>
</div>
<p class="first"> This is not in the intro section.</p>
<p> The second paragraph is not in the intro section. </p>
HTML
#intro .first em {
color: pink;
background-color:gray;
}
color: pink;
background-color:gray;
}
CSS
The descendant selector matches all elements that are descendants of a specified element.
Descendant Selectors
Drag and drop from the options below to create a style rule for all paragraphs belonging to the element with id="test":
Chapter: 4
CSS Comments
Comments
Comments are used to explain your code, and may help you when you edit the source code later. Comments are ignored by browsers.
A CSS comment look like this:
/* Comment goes here */
CSS
p {
color: green;
/* This is a comment */
font-size: 150%;
}
color: green;
/* This is a comment */
font-size: 150%;
}
CSS
Comments can also span multiple lines.
Comments
Turn the text into a comment in CSS:
Chapter: 5
Style Cascade and Inheritance
Cascade
The final appearance of a web page is a result of different styling rules.
The three main sources of style information that form a cascade are:
- The stylesheet created by the author of the page
- The browser's default styles
- Styles specified by the user
CSS is an acronym for Cascading Style Sheets.
Inheritance
Inheritance refers to the way properties flow through the page. A child element will usually take on the characteristics of the parent element unless otherwise defined.
For example:
<html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>
<head>
<style>
body {
color: green;
font-family: Arial;
}
</style>
</head>
<body>
<p>
This is a text inside the paragraph.
</p>
</body>
</html>
HTML
Since the paragraph tag (child element) is inside the body tag (parent element), it takes on any styles assigned to the body tag.
Comments
Post a Comment