Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
3 views

Chapter 3 - Introduction to CSS

This document provides an introduction to CSS, detailing its purpose for formatting web pages and the various ways to implement it, including inline, internal, and external styles. It explains CSS selectors, specificity, and various properties such as borders, margins, paddings, and background images. Additionally, it covers text formatting options and the importance of understanding CSS syntax for effective web development.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
3 views

Chapter 3 - Introduction to CSS

This document provides an introduction to CSS, detailing its purpose for formatting web pages and the various ways to implement it, including inline, internal, and external styles. It explains CSS selectors, specificity, and various properties such as borders, margins, paddings, and background images. Additionally, it covers text formatting options and the importance of understanding CSS syntax for effective web development.

Uploaded by

marjune.gabon07
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 56

WD 101: Web

Development &
Application

LESSON 2
Introduction to CSS
• What is CSS?
• Cascading Style Sheets (CSS) is used to format the layout of a webpage.
• With CSS, you can control the color, font, the size of text, the spacing between
elements, how elements are positioned and laid out, what background images or
background colors are to be used, different displays for different devices and screen
sizes, and much more!
CSS Syntax
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)
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)
CSS Selectors
The Element Selector

The element selector selects HTML elements based on the element name.

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.

#para1 {
text-align: center;
color: red;
}
CSS Selectors
The 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.

.center {
text-align: center;
color: red;
}

You can also specify that only specific HTML elements should be affected by a class.

p.center {
text-align: center;
color: red;
}

HTML elements can also refer to more than one class.


CSS Selectors
The CSS Universal Selector

The universal selector (*) selects all HTML elements 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, h2, p {
text-align: center;
color: red;
}
Using CSS
CSS can be added to HTML documents in 3 ways:

•Inline - by using the style attribute inside HTML elements


•Internal - by using a <style> element in the <head> section
•External - by using a <link> element to link to an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
Has the highest styling priority.

Syntax:
• style=“property: value;”

Example:
• <p style=“color: red;”>This text is color red</p>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within a <style> element.
Is the second styling priority after internal CSS.
The following example sets the text color of ALL the <h1> elements (on that page) to blue, and the text color of ALL
the <p> elements to red. In addition, the page will be displayed with a "powderblue" background color:
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color: powderblue;
}
h1{
color: blue;
}
p{
color: red;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
Is least styling priority.
To use an external style sheet, add a link to it in the <head> section of each
HTML page:
body {
<!DOCTYPE html> background-color: powderblue;
<html> }
<head> h1 {
<link rel="stylesheet" href="styles.css"> color: blue;
</head> }
<body> p {
color: red;
<h1>This is a heading</h1> }
<p>This is a paragraph.</p>

</body>
</html>
CSS Specificity
CSS priority (or specificity) determines which styles are applied when there
are multiple rules for the same element. Here’s a simplified breakdown:

• ID Selectors (using #) are next in priority.


• Example: #header { color: blue; }
• Class Selectors (using .), Attributes (like [type="text"]), and Pseudo-classes
(like :hover) have medium priority.
• Example: .main { color: green; }
• Element Selectors (like p, div) have the lowest priority.
• Example: p { color: black; }
• Important! You can override all priorities by using !important in your CSS,
but use it sparingly.
• Example: p { color: yellow !important; }
CSS Borders
The CSS border properties allow you to specify the style, width, and color of
an element's border.
CSS Border Styles
The border-style property specifies what kind of border to display.

The following values are allowed:

dotted - Defines a dotted border


dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
CSS Border Styles

Example:

p.dotted {border-style: dotted;}


p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
CSS Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of the three pre-defined
values: thin, medium, or thick:

p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: dotted;
border-width: 2px;
}

p.four {
border-style: dotted;
border-width: thick;
}
CSS Border Color
The border-color property is used to set the color of the four borders.

p.one {
border-style: solid;
border-color: red;
}

p.two {
border-style: solid;
border-color: green;
}

p.three {
border-style: dotted;
border-color: blue;
}
CSS Border Sides
In CSS, there are also properties for specifying each of the borders (top, right, bottom, and left):

p { p {
border-top-style: dotted; border-style: dotted solid;
border-right-style: solid; }
border-bottom-style: dotted;
border-left-style: solid;
}
CSS Border Sides
If the border-style property has four values:

border-style: dotted solid double dashed;


top border is dotted
right border is solid
bottom border is double
left border is dashed
If the border-style property has three values:

border-style: dotted solid double;


top border is dotted
right and left borders are solid
bottom border is double
If the border-style property has two values:

border-style: dotted solid;


top and bottom borders are dotted
right and left borders are solid
If the border-style property has one value:

border-style: dotted;
all four borders are dotted
CSS Border Shorthand
To shorten the code, it is also possible to specify all the individual border properties in one property.
The border property is a shorthand property for the following individual border properties:

border-width
border-style
border-color

p {
border: 5px solid red;
}

You can also specify all the individual border properties for just one side:

p {
border-left: 6px solid red;
}
CSS Rounded Borders
The border-radius property is used to add rounded borders to an element:

<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
border: 2px solid red;
padding: 5px;
}
p.round1 {
border: 2px solid red;
border-radius: 5px;
padding: 5px;
}
p.round2 {
border: 2px solid red;
border-radius: 8px;
padding: 5px;
}
p.round3 {
border: 2px solid red;
border-radius: 12px;
padding: 5px;
}
</style>
</head>
<body>
<p class="normal">Normal border</p>
<p class="round1">Round border</p>
<p class="round2">Rounder border</p>
<p class="round3">Roundest border</p>
</body>
</html>
CSS Margins
The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each
side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:

• auto - the browser calculates the margin


• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent element
CSS Margins
Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS Margins</h2>
<div>This element has a margin of 70px.</div>

</body>
</html>
CSS Margin Collapse
Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to the largest of the two
margins.

This does not happen on left and right margins! Only top and bottom margins!

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}

h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of
20px. So, the vertical margin between h1 and h2 should have been 70px (50px + 20px). However, due to
margin collapse, the actual margin ends up being 50px.</p>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html>
CSS Paddings
The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.

With CSS, you have full control over the padding. There are properties for setting the padding for each
side of an element (top, right, bottom, and left).

CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties can have the following values:

• length - specifies a padding in px, pt, cm, etc.


• % - specifies a padding in % of the width of the containing element
• inherit - specifies that the padding should be inherited from the parent element
CSS Paddings
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>
<h2>Using individual padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding
of 50px, and a left padding of 80px.</div>
</body>
</html>
Background Images
To add a background image on an HTML element, use the HTML style attribute and the CSS background-
image property:

<body style="background-image: url('img_girl.jpg');">

<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Background Images
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will


repeat itself if it is smaller than the
element where it is specified, in this case
the body element.</p>

</body>
</html>
Background Images
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>

<h2>Background Image</h2>

<p>By default, the background image will


repeat itself if it is smaller than the
element where it is specified, in this case
the body element.</p>

</body>
</html>
Background Images
Background Repeat
If the background image is smaller than the element, the image will repeat itself, horizontally
and vertically, until it reaches the end of the element:

To avoid the background image from repeating itself, set the background-repeat property to no-
repeat.
Background Images
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image:
url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background No Repeat</h2>
<p>You can avoid the image from being
repeated by setting the background-repeat
property to "no-repeat".</p>
</body>
</html>
Background Images
Background Cover
If you want the background image to cover the entire element, you can set the background-size
property to cover.

Also, to make sure the entire element is always covered, set the background-attachment
property to fixed:

This way, the background image will cover the entire element, with no stretching (the image
will keep its original proportions):

<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Background Images
Background Stretch
If you want the background image to stretch to fit the entire element, you can set the
background-size property to 100% 100%:
CSS Text Formatting
CSS has a lot of properties for formatting text.

• Text Color
• Text Alignment and Text Direction
• Text Decoration
• Text Transformation
• Text Spacing
• Text Shadow
CSS 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)“

h1 {
color: green;
}
CSS Text Alignment and Text
Direction
text-align-last
The text-align property is used to set the horizontal alignment of a text. A text can be left or right
aligned, centered, or justified.

<h1 style="text-align: center;">Heading 1 (center)</h1>


<h2 style="text-align: left;">Heading 2 (left)</h2>
<h3 style="text-align: right;">Heading 3 (right)</h3>
<p style="text-align: justify; text-align-last: center;">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.</p>
CSS Text Alignment and Text
Direction
Text Direction
The direction and unicode-bidi properties can be used to change the text direction of an
element:

<p>This is the default text direction.</p>


<p style="direction: rtl; unicode-bidi: bidi-override;">This is right-to-left text
direction.</p>
CSS Text Alignment and Text
Direction
Vertical Alignment
The vertical-align property sets the vertical alignment of an element.
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with
img.a { a default alignment.</p>
vertical-align: baseline;
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with
a text-top alignment.</p>
} <p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with
img.b { a text-bottom alignment.</p>
vertical-align: text-top; <p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with
a sub alignment.</p>
}
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with
img.c { a super alignment.</p>
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
CSS Text Decoration
Text Decoration Properties:

• text-decoration-line
• text-decoration-color
• text-decoration-style
• text-decoration-thickness
• text-decoration
CSS Text Decoration – Line and
Color
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h2 {
text-decoration-line: line-through;
text-decoration-color: blue;
}
h3 {
text-decoration-line: underline;
text-decoration-color: green;
}
p {
text-decoration-line: overline underline;
text-decoration-color: purple;
}
CSS Text Decoration – Style and
Thickness
h1 {
text-decoration-line: underline;
text-decoration-style: solid; /* this is default */
text-decoration-thickness: auto;
}h2 {
text-decoration-line: underline;
text-decoration-style: double;
text-decoration-thickness: 5px;
}h3 {
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 25%;
}p.ex1 {
text-decoration-line: underline;
text-decoration-style: dashed;
}p.ex2 {
text-decoration-line: underline;
text-decoration-style: wavy;
text-decoration-thickness: 5px;
}p.ex3 {
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: wavy;
}
CSS 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:

p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
CSS Text Spacing
Text Spacing Properties:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space
CSS Text Spacing – Text Indention
and Letter Spacing
Text Indention
The text-indent property is used to specify the indentation of the first line of a text:

p {
text-indent: 50px;
}

Letter Spacing
The letter-spacing property is used to specify the space between the characters in a text.

h2 {
letter-spacing: 5px;
}
h3 {
letter-spacing: -2px;
}
CSS Text Spacing – Text Indention
and Letter Spacing
Line Height
The line-height property is used to specify the space between lines:

p.small {
line-height: 0.7;
}

p.big {
line-height: 1.8;
}
CSS Text Shadow
Text Shadow
The text-shadow property adds shadow to text.

.ex1{
text-shadow: 2px 2px;
}
.ex2{
text-shadow: 2px 2px rgba(0,0,0,0.3);
}
.ex3{
text-shadow: 2px -2px 5px blue;
}
.ex4{
text-shadow: 0px 0px 5px green;
}
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.

Generic Font Families


In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
• Sans-serif fonts have clean lines (no small strokes attached). They create a modern and
minimalistic look.
• Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.
Difference Between Serif and
Sans-serif Fonts
Some Font Examples
The CSS font-family
In CSS, we use the font-family property to specify the font of a text.

.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
The CSS font-style and font-
weight:
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:
This property has five values:
• normal: Default font weight (equivalent to 400).
• bold: Bold text (equivalent to 700).
• bolder: Bolder than the parent element's font-weight.
• lighter: Lighter than the parent element's font-weight.
• numeric: The numerical values range from 100 to 900 in increments of 100:
o 100: Thin
o 200: Extra Light (Ultra Light)
o 300: Light400: Normal (Regular)
o 500: Medium600: Semi Bold (Demi Bold)
o 700: Bold800: Extra Bold (Ultra Bold)
o 900: Black (Heavy)
The CSS font-size
The font-size property sets the size of the text.
The font-size value can be an absolute, or relative size.

Absolute size:

• Sets the text to a specified size


• Does not allow a user to change the text size in all browsers (bad for accessibility
reasons)
• Absolute size is useful when the physical size of the output is known.

Relative size:

• Sets the size relative to surrounding elements


• Allows a user to change the text size in browsers
The CSS font-size: Pixels
Setting the text size with pixels gives you full control over the text size:

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}
The CSS font-size: Em
To allow users to resize the text (in the browser menu), many developers use em instead of
pixels.
1em is equal to the current font size. The default text size in browsers is 16px. So, the
default size of 1em is 16px.
The size can be calculated from pixels to em using this formula: pixels/16=em

div{
font-size:30px;
}
p {
font-size: 1em;
}
The CSS font-size: viewport width
The text size can be set with a vw unit, which means the "viewport width".
That way the text size will follow the size of the browser window:

<h1 style="font-size:10vw">Hello World</h1>

You might also like