[go: up one dir, main page]
Scribd
Upload
4 views52 pages

Chapter 3 CSS

Uploaded by

verifiednot162
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views52 pages

Chapter 3 CSS

Uploaded by

verifiednot162
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 52

CSS Introduction

• Short for "Cascading Style Sheets".


• Designed to separate the content of a web page from the presentation of
that content.
• CSS provides powerful control over the presentation of an HTML
document.
• Enables us to make all pages of our website look similar and consistent
(font, color, etc.).
• Allows us to make changes from a single location (rather than having to
edit each page individually).
• One HTML Page - Multiple Styles!
Benefits of
CSS
Separation of Style and Structure - The basic idea behind CSS is to separate the structure of a
document from the presentation of the document.

CSS saves time − You can write CSS once and then reuse the same sheet in multiple HTML pages.
You can define a style for each HTML element and apply it to as many Web pages as you want.

Easy maintenance − To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.

Platform Independence − The Script offer consistent platform independence and can support
latest browsers as well.

Faster Web Page Download Time - less code behind your web pages which helps the
download times of a page.
Basic Syntax of CSS
• A CSS rule has two main parts: a selector, and one or more declarations
Selector Declaration 1 Declaration 2

h1 {color:blue ; font-size: 12px;}

property value property value

• The selector can be HTML element, id or class.


• Each declaration consists of a property and a value.
• The property is the style attribute you want to change. Each property has a value.
The “id” selector
• The id selector is used to specify a style for a single, unique element.
• The id selector uses the id attribute of the HTML element, and is defined with a
"#“ in css.
• The style rule below will be applied to the element with id="para1":

HTML CSS
<h1 id=“para1”> #para1{
Hello Friends color: blue;
</h1> }

<h1> Output
How are you Hello Friends
</h1> How are you
The “class” selector
• The class selector is used to specify a style for a group of elements.
• The class selector uses the HTML class attribute, and is defined with a ".“ in css.
HTML CSS
<h1 class=“myClass”> .myClass{
Hello Friends color: blue;
</h1> }
<h1>
How are you
</h1> Output
<h1 class=“myClass”> Hello Friends
How are you How are you
</h1> How are you
Different ways to write CSS
• There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet
1) Inline Style
• It is possible to place CSS right in your HTML code, and this method of CSS usage
is referred to as inline css.
• Inline CSS has the highest priority out of external, internal, and inline CSS.
• This means that you can override styles that are defined in external or internal by
using inline CSS.
• If you want to add a style inside an HTML element all you have to do is specify the
desired CSS properties with the style HTML attribute.
• Example:

HTML
<p style="background: blue; color: white;"> My Inline CSS </p>
2) Internal Style Sheet
• This type of CSS is only for Single Web Page.
• When using internal CSS, we must add a new tag, <style>, inside the <head> tag.
• The HTML code below contains an example of <style>'s usage.
HTML
<html>
<head>
<style type="text/css">
p{ color: red;}
</style>
</head>
<body>
<p>Your page's content!</p>
</body>
</html>
3) External Style Sheet
• When using CSS it is preferable to keep the CSS separate from your HTML.
• Placing CSS in a separate file allows the web designer to completely differentiate
between content (HTML) and design (CSS).
• External CSS is a file that contains only CSS code and is saved with a ".css" file
extension.
• This CSS file is then referenced in your HTML using the <link> instead of <style>.
Demo.html test.css
<html> #para1{
<head> text-align: center;
<link rel=“stylesheet” type=“text/css” }
href=“test.css”> p
</head> {
<body> color : blue;
<p> Hello Friends </p> }
<p id=“para1”> How are you? </p>
</body> Output
</html> Hello Friends
How are you?
3) External Style Sheet (Cont.)
• Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file. Instead of
typing the same CSS code on every web page you have, simply have many pages
refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in a single
CSS file.
Assign Multiple Classes
• We can apply different class to same html element by giving space separated
class names in the class attribute:
Demo.html test.css
<html> . class1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head> . class2
<body> {
text-align : center;
<h1 class=“class1 class2”> }
How are you?
</h1> Output

</body>
How are you?
</html>
Multiple Selection
• We can apply same css to multiple selectors using comma separated selector list,
for example :
Demo.html test.css
<html> p, h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>

<p> Hello Friends </p>


<h1> How are you? </h1> Output
Hello Friends
</body>
</html>
How are you?
Multi-level Selection
• We can use hierarchical path to target html element by space separated
element/class/id names, for example :
Demo.html test.css
<html> div h1
<head> {
<link rel=“stylesheet” type=“text/css” color : blue;
href=“test.css”> }
</head>
<body>
<h1>Hello Friends…</h1>
<div>
<h1>How are you?</h1> Output
</div> Hello Friends…
How are you?
</body>
</html>
Background Property
Property Name

• Background Color (background-color)


• Background Image (background-image)
• Background Image Repeat (background-repeat)
• Fixed Background Image (background-attachment)
• Background Image Positioning (background-position)
Background Color
• The background-color property specifies the background color of an element.
• The background color of a page is defined in the body selector:
• Below is example of CSS backgrounds
test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}
Background Image
• The background-image property specifies an image to use as the background of
an element.
• For Example,
test.css
body
{
background-image : url(‘pathToImage.jpg’);
}
Background Image Repeat
• You can have a background image repeat vertically (y-axis), horizontally (x-axis), in both
directions, or in neither direction.
test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : repeat;
background-repeat : repeat-x; repeat-x
background-repeat : repeat-y;
background-repeat : no-repeat;
}

repeat-y
no-repeat
Fixed Background Image
• The background-attachment property sets whether a background image is fixed or
scrolls with the rest of the page.
• For Example,

test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-attachment : fixed;
}
Background Image Positioning
• The background-position property sets the starting position of a background
image.

test.css
body
{
background-image : url(‘pathToImage.jpg’);
background-repeat : no-repeat;
background-position: 20px 10px;
background-position: 30%30%;
background-position: top center;
}
CSS Font
• CSS font properties define the font family, boldness, size, and the style of a text.

Property Name

1. Font Color (color)


2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)
CSS Font (Cont.)
h4{
• Font Color color : red;
• Set the text-color for different elements }
h4{
font-family : sans-serif;
• Font Family }
• The font family of a text is set with the font-family property. h4{
font-size: 120%;
font-size : 10px;
• Font Size font-size : small;
font-size : smaller;
• The font-size property sets the size of the text. font-size : x-small;
• font-size : 120% font-size : xx-small;
• font-size : 10px; font-size : large;
• font-size : x-large; font-size : larger;
font-size : x-large;
font-size : xx-large;
font-size : medium;
}
CSS Font (Cont.)
• Font Style h4{
font-style: italic ;
• The font-style property is mostly used to specify italic text. }

h4{
• Font Weight font-weight : 300;
• The font-weight property sets how thick or thin characters font-weight : bolder;
font-weight : lighter;
in text should be displayed. }

h4{
• Font Variant font-variant: small-caps;
• The font-variant property specifies whether or not a text
should be displayed in a small-caps font. }

• font-variant : small-caps;
CSS Text Property
• While CSS Font covers most of the traditional ways to format your text, CSS Text
allows you to control the spacing, decoration, and alignment of your text.
Property Name

1. Text Decoration (text-decoration)


2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)
CSS Text Property (Cont.)
• Text Decoration h4{
text-decoration : line-through;
• The text-decoration property is used to set or remove text-decoration : overline;
decorations from text. text-decoration : underline;
• The text-decoration property is mostly used to remove text-decoration : none;
}
underlines from links for design purposes.
h4{
• Text Indent text-indent : 20px;
• The text-indentation property is used to specify the text-indent : 30%;
indentation of the first line of a text. }

h4{
• Text Align text-align : right;
• The text-align property is used to set the horizontal text-align : justify;
alignment of a text. text-align : left;
text-align : center;
}
CSS Text Property (Cont.)
• Text Transform h4{
text-transform : capitalize;
• The text-transform property is used to specify uppercase text-transform : uppercase;
and lowercase letters in a text. text-transform : lowercase;
}

• White Space h4{


• The white-space attribute allows you to prevent text from white-space : nowrap;
wrapping until you place a break <br /> into your text. }

h4{
• Word Spacing word-spacing : 10px;
• With the CSS attribute word-spacing you are able to }
specify the exact value of the spacing between your
words. Word-spacing should be defined with exact values.
CSS Text Property (Cont.)
• Letter Spacing h4{
letter-spacing : 3px;
• With the CSS attribute letter-spacing you are able to }
specify the exact value of the spacing between your
letters. Letter-spacing should be defined with exact
values. h4{
line-height : 10px;
• Line Height }
• The line-height attribute will set the height of the line in the
page.
The Box Model
• All HTML elements can be considered as boxes. In CSS, the term "box model" is
used when talking about design and layout.
• The CSS box model is essentially a box that wraps around HTML elements, and it
consists of: margins, borders, padding, and the actual content.
• The box model allows us to place a border around elements and space elements
in relation to other elements.
The Box Model (Cont)
• The image below illustrates the box model:
Margin
Border
Padding
Content
The Box Model (Cont)
margin-top
border-top
padding-top

padding-right

margin-right
border-right
padding-left
margin-left
border-left

Content

padding-bottom
border-bottom
margin-bottom
CSS Padding
h4{
• The CSS padding properties define the space between padding : 10px;
the element border and the element content. }

h4{
padding-top : 10px;
• The top, right, bottom, and left padding can be padding-right : 20px;
changed independently using separate properties. padding-bottom : 30 px;
padding-left : 40 px;
}
• A shorthand padding property can also be used, to
h4{
change all padding at once. padding : 10px 20px 30px 40px;
}
CSS Border
• The CSS border properties allow you to specify the style h4{
border : 1px solid red;
and color of an element's border. }
• Border Style Types h4{
• The border-style property specifies what kind of border to border-style : solid;
display. border-style : dotted;
border-style : double;
• Border Width }
• The border-width property is used to set the width of the
h4{
border.
border-width : 7px;
• Border Color }
• The border-color property is used to set the color of the h4{
border. border-color : red;
• Border colors can be any color defined by RGB, hexadecimal, }
or key terms. Below is an example of each of these types. h4{
• The top, right, bottom, and left border can be changed border-top : 1px solid red;
}
independently using separate properties.
CSS Margin
• The CSS margin properties define the space around h4{
margin: 10px;
elements }

h4{
• The top, right, bottom, and left margin can be margin -top : 10px;
changed independently using separate properties. margin -right : 20px;
margin -bottom : 30 px;
margin -left : 40 px;
}

h4{
margin : 10px 20px 30px 40px;
• A shorthand margin property can also be used, to }
change all margins at once.
CSS Position
❑CSS position property defines the position of an element in a document.
❑This property works with the left, right, top, bottom to determine the final position of an element on a page.
• Static Positioning
h1{
• This is the default position for elements. position : absolute;
left : 50px;
• The element is positioned according to the normal flow of the
document. top : 100px;
• Absolute Positioning }
• With absolute positioning, you define the exact pixel value where
the specified HTML element will appear.
• The point of origin is the top-left of the browser's viewable area, h1{
so be sure you are measuring from that point. position : relative;
left : 50px;
• Relative Positioning top : 100px;
• Relative positioning changes the position of the HTML element }
relative to where it normally appears.
h1{
• Fixed Positioning
position : fixed;
• The element is positioned relative to the browser window, in
fixed position, element will be in the same place even we scroll top : 50px;
the screen. left : 100px;
}
CSS Layers
• CSS allows you to control which item will CSS
#division1{
appear on top with the use of layers. position : absolute;
height : 100px;
• In CSS, each element is given a priority. width : 100px;
• If there are two overlapping CSS positioned left : 100px;
top : 150px;
elements, the element with the higher priority background-color : red;
will appear on top of the other. z-index : 5;
}
• To manually define a priority, set the z-index #division2{
position : absolute;
value. The larger the value, the higher the height : 200px;
priority the element will have. width : 200px;
HTML left : 50px;
top : 100px;
<div id="division1"> background-color : blue;
</div> z-index : 2;
<div id="division2"> }
</div>
CSS Float Property
• The CSS float property defines that an element should be taken out of the normal
flow of the document and placed along the left or right side of its containing
block.
• Text and inline elements will then wrap around this element. CSS
#division1{
background-color : red;
float : left;
width: 40%;
}
#division2{
background-color : blue;
HTML float : right;
width: 40%;
<div id="division1"> }
ABC Content
</div>
<div id="division2">
XYZ Content
</div>
Introduction to CSS3
• CSS3 is the latest standard for CSS.
• CSS3 is completely backwards-compatible with earlier versions of CSS.
• CSS3 has been split into "modules". It contains the "old CSS specification" (which
has been split into smaller pieces). In addition, new modules are added.
• CSS3 Transitions are a presentational effect which allow property changes in CSS
values, such as those that may be defined to occur on :hover or :focus, to occur
smoothly over a specified duration – rather than happening instantaneously as is
the normal behavior.
• Transition effects can be applied to a wide variety of CSS properties, including
background-color, width, height, opacity, and many more.
Introduction to CSS3 (Cont)
Some of the most important CSS3 modules are:
• Selectors
• Box Model
• Backgrounds
• Image Values and Replaced Content
• Text Effects
• 2D Transformations
• 3D Transformations
• Animations
• Multiple Column Layout
• User Interface
Animations
• CSS animations make it possible to animate transitions from one CSS style
configuration to another.
• Animations consist of two components,
• a style describing the CSS animation
• a set of key frames that indicate the start and end states of the animation’s style, as well as
possible intermediate waypoints.
• Key advantages to CSS animations over traditional script-driven animation
techniques:
• They’re easy to use for simple animations; you can create them without even having to know
JavaScript.
• The animations run well, even under moderate system load. Simple animations can often
perform poorly in JavaScript.
Configuring the animation
• To create a CSS animation sequence, you style the element you want to animate with the animation property
or its sub-properties.
• Note: This does not configure the actual appearance of the animation, which is done using the
@keyframes
• The sub-properties of the animation property are:
• animation-name : Specifies the name of the @keyframes at-rule describing the animation’s keyframes.
• animation-duration : Configures the length of time that an animation should take to complete one cycle.
• animation-timing-function : Configures the timing of the animation; that is, how the animation
transitions through keyframes, by establishing acceleration curves. (linear, ease, ease-in, ease-out etc…)
• animation-delay : Configures the delay between the time the element is loaded and the beginning of the
animation sequence.
• animation-iteration-count : Configures the number of times the animation should repeat; you can specify
infinite to repeat the animation indefinitely.
• animation-direction : Configures whether or not the animation should alternate direction on each run
through the sequence or reset to the start point and repeat itself. (normal, reverse, alternate etc…)
• animation-fill-mode : Configures what values are applied by the animation before and after it is
executing.
• animation-play-state : Lets you pause and resume the animation sequence.
Defining the animation sequence using keyframes
• Once you’ve configured the animation’s timing, you need to define the appearance of the animation. This is done by
establishing two or more keyframes using the @keyframes at-rule.
• Each keyframe describes how the animated element should render at a given time during the animation sequence.
• Example CSS
div {
HTML width: 100px;
height: 100px;
<div> background-color: red;
animation-name: example;
animation-duration: 10s;
Welcome in ASOIT }

</div> @keyframes example {


from {background-color: red;}
to {background-color:blue;}
}
Specifying Intermediate steps
• We can specify intermediate steps using percentage of time in @keyframes, similar to the
example given below.
CSS
p {
HTML animation-duration: 4s;
animation-name: changeColors;
<p> }
Hello World
</p> @keyframes changeColors {
0% {background-color: yellow;}
25% {background-color: blue;}
50% {background-color: green;}
100% {background-color: red;}
}
Style Images
• We can use many properties with Images like,
• opacity
• border-radius
• margin-left, margin-right to be auto and display to be block (to make it aligned center)
• max-width to be 100% and height to be auto (to make it responsive)
• filter
• etc… ❑CSS3 Rounded corners are used to add special colored corner to body or text by using the
border-radius property.
❑A simple syntax of rounded corners is as follows −

#rcorners1
{
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px; height: 150px;
}
Wild Card Selectors
• Wildcard selector is used to select multiple elements simultaneously.
• It selects similar type of class name or attribute and apply CSS property.
• Some of the wild card selector are,
• [attribute*=”str”] Selector
• It will select all the elements with the given attribute containing the str.
• [attribute^=”str”] Selector
• It will select all the elements with the given attribute starts with the str.
• [attribute$=”str”] Selector
• It will select all the elements with the given attribute ends with the str.
Pseudo Classes
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to: Syntax
selector:pseudo-class {
• Style an element when a user mouse over it property: value;
• Style visited and unvisited links differently }
• Style an element when it gets focus
• Some important pseudo classes are:
• Active
• focus
• hover
• visited
• disabled
• first-child
• last-child
• nth-child
<style> /* selected link */
/* unvisited link */
a:active {
a:link { color: blue;
color: red; }
} </style>

/* visited link */ <body>

a:visited { <h2>Styling a link depending on state</h2>


color: green; <p><b>
} <a href="default.html" target="_blank">
This is a link</a></b></p>
/* mouse over link */
</body>
a:hover {
color: hotpink;
}
Pseudo Elements
• A CSS pseudo-element is used to style specified parts of an element.
• For example, it can be used to: Syntax
• Style the first letter, or line, of an element selector::pseudo-element {
property: value;
• Insert content before, or after, the content of an element }
• pseudo elements are,
• after
• before
• first-letter
• first-line
• selection
Media Queries
❑ Media query is a CSS technique introduced in CSS3.
❑ It is used for Responsive web design.
❑ Responsive web design is about creating web pages that look good on all devices!
❑ A responsive web design will automatically adjust for different screen sizes and viewports.
❑ Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a
website, to make it look good on all devices (desktops, tablets, and phones):
❑ It uses the @media rule to include a block of CSS properties only if a certain condition is true.
Example :

The following code will display the font-size at 100% if the width is at least 1024 px

@media screen and (min-width: 1024px) {


body {font-size: 100%;}
}
The following example changes the background-color
to lightgreen if the viewport is 480 pixels wide or wider The following code displays an orange background color
(if the viewport is less than 480 pixels, the when a device hits 1024px width and changes to yellow
background-color will be pink): when the display of a device drop into mobile territory.

@media (max-width: 1024px)


{
body { background: orange;}
}
@media (max-width: 768px)
{
body {background: yellow;}
}
@media (max-width: 540px)
{
body { background: green;}
}
CSS Variables - The var()
Function
❑The var() function is used to insert the value of a CSS variable.
❑The syntax of the var() function is as follows:

var(--name, value)

Value Description
name Required. The variable name (must start with two dashes)
value Optional. The fallback value (used if the variable is not found)

❑The variable name must begin with two dashes (--) and it is case sensitive!
❑CSS variables can have a global or local scope.
Global variables can be accessed/used through the entire document, while local variables can be used only
inside the selector where it is declared.
❑To create a variable with global scope, declare it inside the :root selector.
❑The :root selector matches the document's root element.
❑To create a variable with local scope, declare it inside the selector that is going to use it.
<style> <body>
:root { <h1>Using the var() Function</h1>
--blue: #1e90ff; <div class="container">
--white: #ffffff;
<h2>Lorem Ipsum</h2>
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
body { pulvinar, at pulvinar felis blandit.</p>
background-color: var(--blue); <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat
} pulvinar, at pulvinar felis blandit.</p>
<p>
h2 { <button>Yes</button>
border-bottom: 2px solid var(--blue); <button>No</button>
} </p>
</div>
.container {
color: var(--blue); </body>
background-color: var(--white);
padding: 15px;
}

button {
background-color: var(--white);
color: var(--blue);
border: 1px solid var(--blue);
padding: 5px;
}
</style>

You might also like