Css 214

CSS
CSS
• Cascading Style Sheets, fondly referred to as CSS, is a simple design
language intended to simplify the process of making web pages
presentable.
• CSS handles the look and feel part of a web page. Using CSS, you can
control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background
images or colors are used, layout designs,variations in display for
different devices and screen sizes as well as a variety of other effects.
• CSS is easy to learn and understand but it provides powerful control
over the presentation of an HTML document. Most commonly, CSS is
combined with the markup languages HTML or XHTML.
Advantages
• CSS saves time
• Pages load faster
• Easy maintenance
• Superior styles to html
• Multiple device compatibility
• Global web standards
• Who Creates and Maintains CSS

• Css versions
CSS syntax
• Selector{property:value}
The type of selectors
• H1{
color:#36ffff;
}
• *{
color:#000000;
}
• Ul em {
color:#00000
}
The class selectors
• .black{
color:#000000;
}
• H1.black
{ color:#000000;
}
• <p class =“center bold”>
some content here
</p>
Question
In Css what does h1 can be called as
A selector B attribute
C value D tag
The id selectors
• #black
{ color:#000000;
}
H1#black
{color:#000000;
}
#black h2{
color:#000000;
}
Question
• If we want define style for an unique element, then which css
selector will we use ?
A id B text
C class D name
Question
Can we align a Block element by setting the left and right
margins ?
A yes, we can
B Not possible
Question
Which of the following attributes is used to specify elements to
bind style rules to?
A id B class
C tag D all of the above

The child selectors
• Body>p{
Color:#000000;
}
• Attribute selectors
Input[type=“text”]
{
Color:#000000
}
P[lang],p[lang=“fr”],p[lang]
Multiple Style Rules
• h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Grouping Selectors
Example: Many selectors
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
Example: various id selectors
#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}
Question
• In css what does “color:red” can be called as
• A selector B rule
• C declaration D None of the above

Question
……. Implementation that introduced text, list, box, margin, border,
color, and background properties
A css b html
C ajax d php
How to add CSS
• CSS is added to HTML pages to format the document according to
information in the style sheet.
1.Inline CSS
1.For Example <p style="color:blue">Hello CSS</p>
2.Internal CSS
For example <style>
p{color:blue}
</style>
3.External CSS
For example p{color:blue}
<link rel="stylesheet" type="text/css" href="style.css">
Inline CSS
• Syntax
• <htmltag style="cssproperty1:value; cssproperty2:value;"> </htmltag>
• Example
<h2
style="color:red;marginleft:40px;">Inline CSS is applied on this headin
g.</h2>
<p>This paragraph is not affected.</p>
• Output
• Inline CSS is applied on this heading.
Disadvantages of Inline CSS
• You cannot use quotations within inline CSS. If you use quotations the
browser will interpret this as an end of your style value.
• These styles cannot be reused anywhere else.
• These styles are tough to be edited because they are not stored at a
single place.
• It is not possible to style pseudo-codes and pseudo-classes with inline
CSS.
• Inline CSS does not provide browser cache advantages.
Question
Which type of CSS is used in the below code?
<p style = "border:2px solid red;">
a. Inline CSS b Internal CSS
c External CSS d None of the above

Question
The CSS property used to set the maximum width of the
element's content box is –
A max-width property B height property
C max-height property D position property

Internal CSS
• Example program
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: red;
margin-left: 80px;
}
</style>
</head>
<body>
<h1>The internal style sheet is applied on this heading.</h1>
<p>This paragraph will not be affected.</p>
</body>
External CSS
• Example
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
File:mystyle.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Question
The CSS property used to set the maximum height of the
element's content box is –
A. max-width property
B. height property
C. max-height property
D.position property
<div> element
• It divides the content into individual sections.

• <div> may contain paragraphs, headings, tables and other
division also.
• Each section can have its own formatting.
• It is a block-level element which means that there can be a line
feed after the</div>tag.
• The <div> elements useful for marking large section of a
document.
Example: Demonstration of div tag
• <html>
<head>
<style type="text/css">
.emb{border: double; font-variant:small-caps; border-
color: green;color:red; width:250px;}
</style>
</head>
<body>
<h2>Example of div element</h2>
<div class="emb">The div is a block level element</div>
</body>
</html>
<span> tag
• The span is similar to the div tag. Both of them divide the
content into individual sections.
• The difference is that span goes into a refined level so that by
using span a single character is formatted if required.
• It is used for text-level element and not for a block-level
element.
• There is no line feed after the </span> tag.
• It is used as a selector in style sheet and it includes STYLE class
and ID as its attribute.
• It is a CSS element and used purely to apply style.
• It has no effect when style sheet is disabled.
What will be the program code?
What will be the program code?
How to create a Power grid webpages using
external css
How to create webpages using internal css
Navigation Bars
• A navigation bar is a section of a graphical user interface intended to

aid visitors in accessing information.
• Navigation bars are implemented in file browsers, web browsers and

as a design element of some web sites.
• A navigation bar is basically a list of links.
• Using the <ul> and <li> elements makes perfect

32
Example
<ul>
<li><a href="#">Home</a></li> < body>…..</body>
<li><a href="#">About</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Carrers</a></li>
<li><a href="#">Contact us</a></li>
</ul>
33
Example
ul {
list-style-type: none; (Removes the bullets. No
need list markers )
margin: 0; (To remove browser default settings)
padding: 0;
}
<Style>…….</style>
34
What will be the code?
35
CSS Dropdown Menus
• Description
• The Dropdown menu is used for displaying the links in a list format.
• Create a dropdown box that appears when the user moves the mouse over an element.
• Example Program (Create a hoverable dropdown with CSS.)
<div class="Dropdown">
<button class="dropbtn">About Us</button>

<div class="dropdown-content">
<a href="#">Company Overview</a>
<a href="#">vission & Mission</a>
<a href="#">Our Network</a>
<a href="#"> Milestones</a>
<a href="#"> Accoladers & Awards</a>
<a href="#"> Certificate</a>
<a href="#"> Board & directors</a>
</div>
</div>
36
What will be the program code for this?
37
Media queries
• Media queries are for different style rules for different size devices
such as mobiles, desktops, etc.
• Understanding CSS Media Types and Queries
• CSS Media Types and Queries help the user to define certain
styles in accordance with a device’s general type (screen, print,
etc.) or its characteristics (screen resolution, viewport dimensions,
etc.)
• Syntax
@media not | only mediatype and (expressions) {
CSS-Code;
}
38
Example
• <link rel="stylesheet" media="print and|not|only (expressions)"
href="print.css">
• <link rel="stylesheet" media="screen and|not|only (expressions)"

href="screen.css">
• Media types values (all, print, screen, speech)
39
Question
Which of the following media feature describes the number of
entries in the color lookup table of the output device
a) color b) color-index
c) color-value d) color-@media
40
Question
Which of the following Viewport Property sets the initial scaling
factor?
a) scale b) initial-scale
c) minimum-scale d) user-scale
41
Question
• Which of the following @viewport Property sets the viewport
height in the same way as width?
a) height b) width
c) viewpor-width d) none of the mentioned
42
What will be the program code for this.
Grid
• To design a web page, you can also follow the Grid Layout
Module, i.e. a grid with rows and columns.
• Grid Layout has grid elements, rows, columns, gaps, etc.
• Grid Layout has parent and child elements.
• Rows are the horizontal line of grid items, however, Columns
are the vertical line.
• Using grid you specify one axis using grid-template-rows or
grid-template-columns.
• Then specify how content should auto-repeat in the other axis
using the implicit grid properties: grid-auto-rows, grid-auto-
columns, and grid-auto-flow.
44
Example
• Make a three columns grid layout where the first row is
150px high:
• .grid-container {
display: grid;
grid: 150px / auto auto auto;
}
45
Browser compatibility
46
The Grid Property
• Grid-template-rows
• Grid-template-columns
• Grid-template-areas
• Grid-auto-rows
• Grid-auto-columns
• Grid-auto-flow
47
Grid CSS demonstration
48

Css 214

Uploaded by

Copyright:

Available Formats

Css 214

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 214

Uploaded by

Copyright:

Available Formats

CSS

• Who Creates and Maintains CSS

C tag D all of the above

• C declaration D None of the above

a. Inline CSS b Internal CSS

c External CSS d None of the above

A max-width property B height property

C max-height property D position property

• It divides the content into individual sections.

• A navigation bar is a section of a graphical user interface intended to

• Navigation bars are implemented in file browsers, web browsers and

• A navigation bar is basically a list of links.

• Using the <ul> and <li> elements makes perfect

• Example Program (Create a hoverable dropdown with CSS.)

<button class="dropbtn">About Us</button>

• <link rel="stylesheet" media="screen and|not|only (expressions)"

c) viewpor-width d) none of the mentioned

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.