CSS
Cascading Style Sheets (CSS) is used to style HTML
elements on web pages. It defines how elements are
displayed, including layout, colors, fonts, and other
properties. CSS targets HTML elements and applies
style rules to dictate their appearance.
three primary types of CSS: Inline, Internal, and
External. Understanding these methods will help you
apply styles effectively and efficiently.
.
Why CSS?
• Saves Time: Write CSS once and reuse it across
multiple HTML pages.
• Easy Maintenance: Change the style globally with a
single modification.
• Search Engine Friendly: Clean coding technique that
improves readability for search engines.
• Superior Styles: Offers a wider array of attributes
compared to HTML.
• Offline Browsing: CSS can store web applications
locally using offline cache, allowing offline viewing.
CSS Syntax:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations
The CSS property is separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a
colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks
are surrounded by curly braces.
p {
color: red;
text-align: center;
}
•p is a selector in CSS (it points to the HTML element you
want to style: <p>).
•color is a property, and red is the property value
•text-align is a property, and center is the property
value
CSS Selectors
• CSS selectors are used to "find" (or select) the HTML
elements you want to style.
• We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific
relationship between them)
• Pseudo-class selectors (select elements based on a certain
state)
• Pseudo-elements selectors (select and style a part of an
element)
• Attribute selectors (select elements based on an attribute or
attribute value)
The CSS element Selector
• The element selector selects HTML elements based on
the element name.
• Example
• Here, all <p> elements on the page will be center-
aligned, with a red text color:
•p {
text-align: center;
color: red;
}
The CSS id Selector
• The id selector uses the id attribute of an HTML element
to select a specific element.
• The id of an element is unique within a page, so the id
selector is used to select one unique element!
• To select an element with a specific id, write a hash (#)
character, followed by the id of the element.
• Example
• The CSS rule below will be applied to the HTML element
with id="para1":
• #para1 {
text-align: center;
color: red;
}
The CSS class Selector
• The class selector selects HTML elements with a specific
class attribute.
• To select elements with a specific class, write a period
(.) character, followed by the class name.
• Example
• In this example all HTML elements with class="center"
will be red and center-aligned:
• .center {
text-align: center;
color: red;
}
• In this example only <p> elements with class="center"
will be red and center-aligned:
• [Link] {
text-align: center;
color: red;
}
• In this example the <p> element will be styled
according to class="center" and to class="large":
• <p class="center large">This paragraph refers
to two classes.</p>
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on
the page.
• Example
• The CSS rule below will affect every HTML element on
the page:
•* {
text-align: center;
color: blue;
}
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style definitions.
• Look at the following CSS code (the h1, h2, and p elements have the same style definitions):
• h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.
• h1, h2, p {
text-align: center;
color: red;
}
How To Add CSS
When a browser reads a style sheet, it will format the HTML document according to the
information in the style sheet
Three Ways to Insert CSS
There are three ways of inserting a style sheet:
•External CSS
•Internal CSS
•Inline CSS
How To Add CSS
• When a browser reads a style sheet, it will format the HTML document according to
the information in the style sheet
• Types of CSS
1. Inline CSS
Inline CSS involves applying styles directly to individual HTML elements using the style attribute. This
method allows for specific styling of elements within the HTML document, overriding any external or
internal styles.
2. Internal or Embedded CSS
Internal or Embedded CSS is defined within the HTML document’s <style> element. It applies styles to
specified HTML elements, The CSS rule set should be within the HTML file in the head section i.e. the CSS is
embedded within the <style> tag inside the head section of the HTML file.
3. External CSS
External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For
example class, id, heading, … etc). CSS property is written in a separate file with a .css extension and should
be linked to the HTML document using a link tag. It means that, for each element, style can be set only once
and will be applied across web pages.
External CSS
With an external style sheet, you can change the look of an entire website by changing just one file!
Each HTML page must include a reference to the external style sheet file inside the <link> element, inside the head section.
Example
External styles are defined within the <link> element, inside the <head> section of an HTML page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor, and must be saved with a .css extension.
The external .css file should not contain any HTML tags.
Here is how the "[Link]" file looks:
"[Link]"
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Note: Do not add a space between the property value (20) and the unit (px):
Incorrect (space): margin-left: 20 px;
Correct (no space): margin-left: 20px;
Internal CSS
• An internal style sheet may be used if one single HTML page has a unique style.
• The internal style is defined inside the <style> element, inside the head section.
• Example
• Internal styles are defined within the <style> element, inside the <head> section of an HTML
page:
• <!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
• An inline style may be used to apply a unique style for a single
element.
• To use inline styles, add the style attribute to the relevant
element. The style attribute can contain any CSS property.
• Example
• Inline styles are defined within the "style" attribute of the
relevant element:
• <!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a
heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
CSS Backgrounds
The CSS background properties are used to add
background effects for elements.
you will learn about the following CSS background
properties:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
CSS background-color
The background-color property specifies the
background color of an element.
Example
The background color of a page is set like this:
body {
background-color: lightblue;
}
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a
value from 0.0 - 1.0. The lower value, the more transparent:
opacity 1
opacity 0.6
opacity 0.3
opacity 0.1
Example
div {
background-color: green;
opacity: 0.3;
}
For transparency:
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity
*/
}
CSS background-image
The background-image property specifies an image
to use as the background of an element.
By default, the image is repeated so it covers the
entire element.
Example
Set the background image for a page:
body {
background-image: url("[Link]");
}
CSS background-repeat
By default, the background-image property repeats an image both
horizontally and vertically.
Some images should be repeated only horizontally or vertically, or they will
look strange, like this:
Example
body {
background-image: url("gradient_bg.png");
}
If the image above is repeated only horizontally (background-repeat:
repeat-x;), the background will look better:
Example
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
CSS background-repeat: no-
repeat
Showing the background image only once is also
specified by the background-repeat property:
Example
Show the background image only once:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Try it Yourself
CSS background-position
The background-position property is used to specify the
position of the background image.
Example
Position the background image in the top-right corner:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Try it Yourself
CSS background-attachment
The background-attachment property specifies whether the
background image should scroll or be fixed (will not scroll with the
rest of the page):
Example
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Yourself
CSS background-attachment
The background-attachment property specifies whether the background image should scroll or
be fixed (will not scroll with the rest of the page):
Example
Specify that the background image should be fixed:
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: scroll;
}
Yourself
CSS Text
Text Color
The color property is used to set the color of the text. The color is specified by:
•a color name - like "red"
•a HEX value - like "#ff0000"
•an RGB value - like "rgb(255,0,0)"
Look at CSS Color Values for a complete list of possible color values.
The default text color for a page is defined in the body selector.
Example
body {
color: blue;
}
h1 {
color: green;
}
Text Color and Background Color
In this example, we define both the background-color property and the color property:
Example
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
CSS Text
Text Color and Background Color
In this example, we define both the background-color property and the color property:
Example
body {
background-color: lightgrey;
color: blue;
}
h1 {
background-color: black;
color: white;
}
div {
background-color: blue;
color: white;
}
Text Alignment and Text
Direction
In this chapter you will learn about the following
properties:
• Text Decoration
• In this chapter you will learn about the following properties:
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first
letter of each word:
Example
[Link] {
text-transform: uppercase;
}
[Link] {
text-transform: lowercase;
}
[Link] {
text-transform: capitalize;
}
•Text Spacing
• In this chapter you will learn about the following properties:
Text Shadow
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal shadow
(2px) and the vertical shadow (2px):
Example
h1 {
text-shadow: 2px 2px;
}
CSS Fonts
• Font Selection is Important
• Choosing the right font has a huge impact on how the readers experience a
website.
• The right font can create a strong identity for your brand.
• Using a font that is easy to read is important. The font adds value to your text.
It is also important to choose the correct color and text size for the font.
Generic Font Families
In CSS there are five generic font families:
[Link] fonts have a small stroke at the edges of
each letter. They create a sense of formality and
elegance.
[Link]-serif fonts have clean lines (no small
strokes attached). They create a modern and
minimalistic look.
[Link] fonts - here all the letters have the
same fixed width. They create a mechanical look.
[Link] fonts imitate human handwriting.
[Link] fonts are decorative/playful fonts.
• Difference Between Serif and Sans-serif Fonts
Example
Specify some different fonts for three paragraphs:
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
Web Safe Fonts for HTML and
CSS
The following list are the best web safe fonts for HTML and CSS:
•Arial (sans-serif)
•Verdana (sans-serif)
•Tahoma (sans-serif)
•Trebuchet MS (sans-serif)
•Times New Roman (serif)
•Georgia (serif)
•Garamond (serif)
•Courier New (monospace)
•Brush Script MT (cursive)
Commonly Used Font Fallbacks
Below are some commonly used font fallbacks, organized by
the 5 generic font families:
•Serif
•Sans-serif
•Monospace
•Cursive
•Fantasy
Font Style
The font-style property is mostly used to specify italic text.
This property has three values:
•normal - The text is shown normally
•italic - The text is shown in italics
•oblique - The text is "leaning" (oblique is very similar to italic,
but less supported)
Font Weight
The font-weight property specifies the weight of a font:
Example
[Link] {
font-weight: normal;
}
[Link] {
font-weight: bold;
}
Font Variant
The font-variant property specifies whether or not a text should be displayed in a
small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However,
the converted uppercase letters appears in a smaller font size than the original
uppercase letters in the text.
Example
[Link] {
font-variant: normal;
}
[Link] {
font-variant: small-caps;
}
Try it Yoursel
<head>
<link rel="stylesheet" href="https://
[Link]/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>