Css Part 1

Css
Stands for Cascading Style Sheets

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once
• External stylesheets are stored in CSS files
CSS Syntax
• A CSS rule consists of a selector and a declaration block.
• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations 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:
1. Simple selectors (select elements based on name, id, class)
2. Combinator selectors (select elements based on a specific relationship
between them)
3. Pseudo-class selectors (select elements based on a certain state)
4. Pseudo-elements selectors (select and style a part of an element)
5. Attribute selectors (select elements based on an attribute or attribute
value)
Simple selectors
Simple selectors (select elements based on name, id, class)
• p {
text-align: center;
color: red;
}
Simple selectors
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.
Simple selectors
The CSS rule below will be applied to the HTML element with
id="para1":
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
Simple selectors
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.
Simple selectors
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
.center { p.center {
text-align: center; text-align: center;
color: red; color: red;
} }
</style> </style>
</head> </head>
<body> <body>
<h1 class="center">Red and <h1 class="center">This heading will not be
center-aligned heading</h1> affected</h1>
<p class="center">Red and <p class="center">This paragraph will be red and
center-aligned paragraph.</p> center-aligned.</p>
</body> </body>
</html> </html>
In this example all HTML elements In this example only <p> elements with class="center"
with class="center" will be red will be red and center-aligned:
and center-aligned:
Simple selectors
HTML elements can also refer to more than one class.
<!DOCTYPE html> In this example the
<html> <p> element will be
<head>
<style> styled according to
p.center { class="center" and to
text-align: center; class="large":
color: red;
}
p.large {
font-size: 300%;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
Simple selectors
The CSS Universal Selector
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the

style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Simple selectors
The CSS Grouping Selector
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
Simple selectors
Combinators selectors
CSS Combinators
• A combinator is something that explains the relationship between the

selectors.
• A CSS selector can contain more than one simple selector. Between
the simple selectors, we can include a combinator.
• There are four different combinators in CSS:
1. Descendant(বংশধর) selector (space).
2. Child(শিশু) selector (>)
3. adjacent sibling (ভাইবোন)selector (+)
4. general sibling (ভাইবোন) selector (~)
Combinators
<!DOCTYPE html> descendant selector (space). বংশধর
<html>
<head> The descendant selector matches all
<style> elements that are descendants of a
div p { specified element.
background-color: yellow; The following example selects all
}
</style> <p> elements inside <div>
</head> elements:
<body>
<h2>Descendant Selector</h2>
<p>The descendant selector matches all elements that are descendants of a
specified element.</p>
<div>
<p>Paragraph 1 in the div.</p>
<section><p>Paragraph 3 in the div.</p></section>
</div>
<p>Paragraph 4. Not in a div.</p>

</body>
</html>
Combinators
<!DOCTYPE html>
<html>
Child Selector (>)
<head> The child selector selects all
<style>
div > p {
elements that are the children of a
background-color: yellow; specified element.
}
</style>
The following example selects all
</head> <p> elements that are children of a
<body> <div> element:
<h2>Child Selector</h2>
<p>The child selector (>) selects all elements that are the children of a specified
element.</p>
<div>
<h1>

<p>Paragraph 3 in the div (inside a section element).</p>
</h1>
</div>
</body>
</html>
Combinators
<!DOCTYPE html>
<html>
Adjacent Sibling Selector (+)
<head> The adjacent sibling selector is used
<style>
div + p {
to select an element that is directly
background-color: yellow; after another specific element.
}
</style>
Sibling elements must have the
</head> same parent element, and
<body>
<h2>Adjacent Sibling Selector</h2>
"adjacent" means "immediately
following".
<p>The + selector is used to select an element that is directly after another specific
element.</p>
The following example selects the
<p>The following example selects the first p element that are placed immediately after first <p> element that are placed
div elements:</p> immediately after <div> elements:
<div> Example
</div>
<p>Paragraph 3. After a div.</p>
<div>
</div>
</body>
</html>
Combinators
<!DOCTYPE html>
<html>
General Sibling Selector (~) ভাইবোন
<head> The general sibling selector selects
<style>
div ~ p {
all elements that are next siblings of
background-color: yellow; a specified element.
}
</style>
The following example selects all
</head> <p> elements that are next siblings
<body> of <div> elements:
<h2>General Sibling Selector</h2>
<p>The general sibling selector (~) selects all elements that are next siblings of a
specified element.</p>
<p>Paragraph 1.</p>
<div>
<p>Paragraph 2.</p>
</div>
<p>Paragraph 3.</p>
<code>Some code.</code>
<p>Paragraph 4.</p>
</body>
</html>
Combinators
Pseudo-class selectors
CSS Pseudo-classes
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to:
1. Style an element when a user mouses over it
2. Style visited and unvisited links differently
3. Style an element when it gets focus
Pseudo-classes selectors
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html> <html>
<head> <head> <head> <head>
<style> <style> <style> <style>
/* unvisited link */ a.highlight:hover { div { p{
a:link { color: #ff0000; background-color: green; display: none;
color: red; font-size: 22px; color: white; background-color: yellow;
} } padding: 25px; padding: 20px;
</style> text-align: center; }
/* visited link */ </head> }
a:visited { <body> div:hover p {
color: green; div:hover { display: block;
} <h2>Pseudo-classes and HTML Classes</h2> background-color: blue; }
} </style>
/* mouse over link */ <p>When you hover over the first link below, </style> </head>
a:hover { it will change color and font size:</p> </head> <body>
color: hotpink; <body>
} <p><a class="highlight" <div>Hover over this div element to show the
href="css_syntax.asp">CSS Syntax</a></p> <p>Mouse over the div element below to p element
/* selected link */ change its background color:</p> <p>Tada! Here I am!</p>
a:active { <p><a href="default.asp">CSS </div>
color: blue; Tutorial</a></p> <div>Mouse Over Me</div>
} </body>
</style> </body> </body> </html>
</head> </html> </html>
<body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp"
target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link
and a:visited in the CSS definition in order to be
effective.</p>
<p><b>Note:</b> a:active MUST come after
a:hover in the CSS definition in order to be
effective.</p>
</body>
</html>
Pseudo-elements
The ::first-line Pseudo-element
<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can use the ::first-line pseudo-element to add a special effect to the first line of a text. Some
more text. And even more, and more, and more, and more, and more, and more, and more, and
more, and more, and more, and more, and more.</p>
</body>
</html>
Pseudo-elements selectors
Pseudo-elements
The ::first-letter Pseudo-element
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
</style>
</head>
<body>
<p>You can use the ::first-letter pseudo-element to add a special effect to the first character of a
text!</p>
</body>
</html>
Multiple Pseudo-elements
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}
</style>
</head>
<body>
<p>You can combine the ::first-letter and ::first-line pseudo-elements to add a special effect to the
first letter and the first line of a text!</p>
</body>
</html>
Pseudo-elements
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html> <html>
<head> <head> <head> <head>
<style> <style> <style> <style>
h1::before { h1::after { ::marker { ::selection {
content: url(smiley.gif); content: url(smiley.gif); color: red; color: red;
} } font-size: 23px; background: yellow;
</style> </style> } }
</head> </head> </style> </style>
<body> <body> </head> </head>
<body> <body>
<h1>This is a heading</h1> <h1>This is a heading</h1>
<p>The ::before pseudo-element inserts content <p>The ::after pseudo-element inserts <ul> <h1>Select some text on this page:</h1>
before the content of an element.</p> content after the content of an element.</p> <li>Coffee</li>
<li>Tea</li> <p>This is a paragraph.</p>
<h1>This is a heading</h1> <h1>This is a heading</h1> <li>Milk</li> <div>This is some text in a div element.</div>
</ul>
</body> </body> </body>
</html> </html> <ol> </html>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ol>
</body>
</html>
The ::before Pseudo-element The ::after Pseudo-element The ::marker Pseudo-element The ::selection Pseudo-element
CSS Attribute Selectors
Attribute Selectors
• CSS [attribute] Selector
• CSS [attribute="value"] Selector
• CSS [attribute~="value"] Selector
• CSS [attribute|="value"] Selector
• CSS [attribute^="value"] Selector
• CSS [attribute$="value"] Selector
• CSS [attribute*="value"] Selector
Attribute Selectors
CSS [attribute] Selector
<!DOCTYPE html>
<html>
<head>
<style>
a[target] {
background-color: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute] Selector</h2>
<p>The links with a target attribute gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Attribute Selectors
CSS [attribute="value"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
a[target=_blank] {
}
</style>
</head>
<body>
<h2>CSS [attribute="value"] Selector</h2>
<p>The link with target="_blank" gets a yellow background:</p>
<a href="https://www.w3schools.com">w3schools.com</a>
<a href="http://www.disney.com" target="_blank">disney.com</a>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</body>
</html>
Attribute Selectors
CSS [attribute~="value"] Selector
<!DOCTYPE html>
<html>
<head>
<style>
[title~=flower] {
border: 5px solid yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute~="value"] Selector</h2>
<p>All images with the title attribute containing the word "flower" get a
yellow border.</p>
<img src="klematis.jpg" title="klematis flower" width="150" height="113">

<img src="img_flwr.gif" title="flower" width="224" height="162">
<img src="img_tree.gif" title="tree" width="200" height="358">
</body>
</html>
Attribute Selectors
CSS [attribute|="value"] Selector
The [attribute|="value"] selector is used to select elements with the specified attribute, whose value can be exactly the specified value, or
the specified value followed by a hyphen (-).
Note: The value has to be a whole word, either alone, like class="top", or followed by a hyphen( - ), like class="top-text".
<!DOCTYPE html>
<html>
<head>
<style>
[class|=top] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute|="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Attribute Selectors
CSS [attribute^="value"] Selector
The [attribute^="value"] selector is used to select elements with the specified attribute, whose value starts with the
specified value.
The following example selects all elements with a class attribute value that starts with "top":
Note: The value does not have to be a whole word!
<!DOCTYPE html>
<html>
<head>
<style>
[class^="top"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute^="value"] Selector</h2>
<h1 class="top-header">Welcome</h1>
<p class="top-text">Hello world!</p>
<p class="topcontent">Are you learning CSS?</p>
</body>
</html>
Attribute Selectors
CSS [attribute*="value"] Selector
The [attribute*="value"] selector is used to select elements whose attribute value contains a specified value.
The following example selects all elements with a class attribute value that contains "te":
Note: The value does not have to be a whole word!
<!DOCTYPE html>
<html>
<head>
<style>
[class*="te"] {
background: yellow;
}
</style>
</head>
<body>
<h2>CSS [attribute*="value"] Selector</h2>
<div class="first_test">The first div element.</div>

<div class="second">The second div element.</div>
<div class="my-test">The third div element.</div>
<p class="mytest">This is some text in a paragraph.</p>
</body>
</html>
Attribute Selectors example
Styling Forms

<!DOCTYPE html>
<html>
<head>
<style>
input[type=text] {
width: 150px;
display: block;
margin-bottom: 10px;
}
input[type=button] {
width: 120px;
margin-left: 35px;
display: block;
}
</style>
</head>
<body>
<h2>Styling Forms</h2>
<form name="input" action="" method="get">
Firstname:<input type="text" name="Name" value="Peter" size="20">
Lastname:<input type="text" name="Name" value="Griffin" size="20">
<input type="button" value="Example Button">
</form>
</body>
</html>
How To Add CSS
Add CSS
• Three Ways to Insert CSS
• There are three ways of inserting a style sheet:
1. External CSS
2. Internal CSS
3. Inline CSS
External CSS Internal CSS Inline CSS
<!DOCTYPE html> <!DOCTYPE html> <!DOCTYPE html>
<html> <html> <html>
<head> <head> <body>
<link rel="stylesheet" href="mystyle.css"> <style>
</head> body { <h1 style="color:blue;text-
<body> background-color: linen; align:center;">This is a heading</h1>
} <p style="color:red;">This is a
<h1>This is a heading</h1> paragraph.</p>
<p>This is a paragraph.</p> h1 {
color: maroon; </body>
</body> margin-left: 40px; </html>
</html> }
</style>
"mystyle.css" </head>
body { <body>
background-color: lightblue;
} <h1>This is a heading</h1>
<p>This is a paragraph.</p>
h1 {
color: navy; </body>
margin-left: 20px; </html>
} "mystyle.css"
Multiple Style Sheets:

If some properties have been defined for the same selector (element) in different style sheets, the value from
the last read style sheet will be used.
Cascading Order
• What style will be used when there is more than one style specified
for an HTML element?
• All the styles in a page will "cascade" into a new "virtual" style sheet
by the following rules, where number one has the highest priority:
1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
Cascading Order
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
body {background-color: green;}
</style>
</head>
<body style="background-color: red">
<h1>Multiple Styles Will Cascade into One</h1>

<p>Here, the background color of the page is set with inline CSS, and also with an
internal CSS, and also with an external CSS.</p>
<p>Try experimenting by removing styles to see how the cascading stylesheets work (try
removing the inline CSS first, then the internal, then the external).</p>
</body>
</html>
CSS Comments
CSS Comments
• comments are not displayed in the browser, but they can help
document your source code.
Comments are used to explain the code, and may help when you edit the source code at a later
date.Comments are ignored by browsers.A CSS comment is placed inside the <style> element, and
starts with /* and ends with */
/* This is a single-line comment */

p {
color: red;
}
CSS Layout Float
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
*{
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
/* Style the header */

header {
background-color: #666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
/* Create two columns/boxes that floats next to each other */

nav {
float: left;
width: 30%;
height: 300px; /* only for demonstration, should be removed */
background: #ccc;
padding: 20px;
}
/* Style the list inside the menu */

Home Work

Css Part 1

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css Part 1

Uploaded by

Copyright:

Available Formats

Css

Stands for Cascading Style Sheets

• The id selector uses the id attribute of an HTML element to select a

<p id="para1">Hello World!</p>

<p>Every element on the page will be affected by the

• A combinator is something that explains the relationship between the

<p>Paragraph 4. Not in a div.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113">

<h2>CSS [attribute|="value"] Selector</h2>

<h2>CSS [attribute^="value"] Selector</h2>

<h2>CSS [attribute*="value"] Selector</h2>

<div class="first_test">The first div element.</div>

Multiple Style Sheets:

<h1>Multiple Styles Will Cascade into One</h1>

/* This is a single-line comment */

/* Style the header */

/* Create two columns/boxes that floats next to each other */

/* Style the list inside the menu */

You might also like