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

Full Stack Unit - 1 (CSS)

Uploaded by

Akanksha Raj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Full Stack Unit - 1 (CSS)

Uploaded by

Akanksha Raj
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 72

Unit -1

CSS
Prepared by:
Dr. Susheela
Cascading Style Sheets
• CSS is the language we use to style an HTML
document.
• CSS provides a set of style rules for defining the layout
of HTML documents.
• CSS describes how HTML elements should be displayed.
• HTML largely determines textual content, CSS
determines visual structure, layout, and aesthetics.
HTML is a markup language, and CSS is a style sheet
language.
• CSS makes it easier to enhance the look of the different
elements on a web page.
Need for CSS
1. Faster Page Speed / Reduce redundancy and increase usability
• CSS enables you to use less code. By using CSS, you can use one CSS rule and apply it to all
occurrences of a certain tag within an HTML document.
2. Better User Experience
• CSS not only makes web pages easy on the eye, it also allows for user-friendly formatting.
When buttons and text are in logical places and well organized, user experience improves.
3. Quicker Development Time
• With CSS, you can apply specific formatting rules and styles to multiple pages with one string
of code. One cascading style sheet can be replicated across several website pages.
4. Easy Formatting Changes /Easier to Maintain the site
• If you need to change the format of a specific set of pages, there’s no need to change for
every individual page. Just edit the corresponding CSS stylesheet and the changes will be
applied to all the pages that are using that style sheet. site
5. Compatibility Across Devices
• Whether mobile or tablet, desktop, or even smart TV, CSS combines with HTML to make
responsive design possible
6. Supported by all browsers
7. Presentation style of document separated from content
Basic Syntax and Structure
• 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 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
Types of CSS
• Inline CSS –
• by using the style attribute inside HTML elements
• Internal CSS –
• by using a <style> element in the <head> section
• External CSS –
• by using a <link> element to link to an external CSS file
• An external style sheet is used to define the style for many HTML
pages.
• To use an external style sheet, add a link to it in the <head> section of
each HTML page:
Inline CSS External CSS

Internal CSS styles.css


Types of Elements
• Block Level Elements
CSS Selectors
There are 6 types of selectors
1. Simple Selector
2. Class Selector
3. Id Selector
4. Nested Selector
5. Universal Selector
6. Group Selector
7. Pseudo Classes Selectors
Simple Selector – Select by Tag
• Selector form is a single element to which the property and value is applied
• For example - Select all <span> elements
span
{
background: DodgerBlue;
color: #ffffff;
}

<span>Here's a span with some text.</span>


<p>Here's a p with some text.</p>
<span>Here's a span with more text.</span>
Class Selector
• Class Selectors are used when you have a bunch of elements that should receive same styling.
• Using Class Selector, we can assign different styles to the same element.
• Example - <span> with class="sky” and Elements with class="code"
span.sky
{
background: DodgerBlue;
}
.code
{
font-family:Consolas;
}

<span class="sky">Here's a span with some text.</span>


<span>
Another <span class="code"><span> &lt; span &gt; </span>
</span>
Id Selector
• To define a special style for special element we can use “id Selector".
• Id Selectors are used when you have exactly one element that should
receive a certain kind of styling
• Example - Select <span> with id="top"
<span id="top">Here's a span with some text.</span>
<span>Here's another.</span>
span#top
{
background: DodgerBlue;
}
Universal Selector
• * selector is commonly known as the universal selector
• This selector selects and styles ALL elements
• Example

*
{
font-family: Calibri;
}
Nested Selector: Descendant
• <a> inside <div class="items">
div.items a
{
color: green;
font-weight: bold;
}
<div class="items">
<a href="#">Item1</a>
<a href="#">Item2</a>
<a href="#">Item3</a>
<ul>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
<li><a href="#">Item6</a></li>
</ul>
</div>
Nested Selector: Adjacent Sibling
• <p> coming after <p>
p+p
{
font-style: italic;
font-weight: bold;
}
<div>
<p>I'm a paragraph</p>
<p>I am selected!</p>
</div>
<p>I am selected!</p>
<h2>Monkey hair</h2>
<p>I am NOT selected</p>
Grouping Selector
• You can apply a style to many selectors if you like.
• Just separate the selectors with a comma, as given in the
following example:
h1, h2, h3
{
color: #36C;
font-weight: normal;
font-size:20px;
}
Pseudo Classes Selectors
• A way of accessing HTML items that are not a part of the document
tree.
• One of its main uses is to control the appearance of unvisited and
visited links on a Webpage.
• Types of pseudo-class selectors
• a:link – an unvisited link
• a:visited – a visited link
• a:hover – a link you have your mouse over
• CSS example:
a: hover
{
text-decoration: none;
}
<!DOCTYPE html>
<html>
HTML Link Colors Using CSS
<head>
<style>
a:link {
color: green;
background-color: transparent;
}
a:visited {
color: pink;
background-color: transparent;
}
a:hover {
color: red;
background-color: transparent;
}
a:active {
color: yellow;
background-color: transparent;
}
</style>
•a:link - a normal, unvisited link
<h2>Link Colors</h2>
•a:visited - a link the user has visited
<p>You can change the default colors of links</p>
•a:hover - a link when the user mouses over it
<a href="html_images.asp" target="_blank">HTML Images</a>
•a:active - a link the moment it is clicked

</body>
</html>
CSS Length Units
• There are two types of length units: absolute and relative.
• Absolute Length Units
• The absolute length units are fixed, and a length expressed in any of these will
appear as exactly that size.
• Absolute length units are not recommended for use on screen, because
screen sizes vary so much. However, they can be used if the output medium is
known, such as for print layout.
• Relative Length Units
• Relative length units specify a length relative to another length property.
• Relative length units scale better between different rendering mediums.
Absolute Length Units
Relative Length Units
CSS Box Model
• 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
every HTML element.
• It consists of margins, borders, padding, and the actual
content. The image below illustrates the box model:
• Explanation of the different parts:
• Content - The content of the box, where text and images
appear
• Padding - Clears an area around the content. The padding
is transparent
• Border - A border that goes around the padding and
content
• Margin - Clears an area outside the border. The margin is
transparent
CSS Box Model
• box-sizing property is used to define the size of the Box
using width property.
• By default, width property is used to define the width
of the content box.
• It consists of margins, borders, padding, and the actual
content. The image below illustrates the box model:
CSS Box Model
• overflow property is used in-case when the content of
the box takes more space than the specified size of the
box (height & width of the box).
• Possible values: auto, hidden, inherit, scroll, visible
• Default value is visible.
CSS - background property
• The background property is a shorthand property for:
• background-color
• background-image
• background-position
• background-size
• background-repeat
• background-origin
• background-clip
• background-attachment
background-color
• With CSS, a color is most often
specified by:
• a valid color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
• 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
transparency
Transparency using RGBA
background-image
• The background-image property sets one or more background
images for an element.
• By default, a background-image is placed at the top-left corner
of an element, and repeated both vertically and horizontally.
• Possible property values:
• url - The URL to the image. To specify more than one image, separate
the URLs with a comma
• none - No background image will be displayed. This is default
• initial - Sets this property to its default value.
• inherit - Inherits this property from its parent element.
background-position
• The background-position property sets the starting position of a
background image.
• By default, a background-image is placed at the top-left corner of an
element, and repeated both vertically and horizontally.
• The top left corner is 0 0 or 0% 0%. The right bottom corner is 100 100 0r
100% 100%.
• Possible values:
• left top, left center, left bottom, right top, right center, right bottom, center top,
center center, center bottom - If you only specify one keyword, the other value will
be "center”
• x% y% - x is the horizontal position and y is the vertical position.
• xpos ypos – xpos is the horizontal position and ypos is the vertical position.
• initial - Sets this property to its default value.
• inherit - Inherits this property from its parent element.

background-position: 50% 50%;


background-position: bottom right;
background-position: 50px 150px;
background-size
• The background-size property specifies the size of the background
images.
• Possible property values:
• auto – Default value (original size)
• length - Sets the width and height of the background image. The first value
sets the width, the second value sets the height. If only one value is given, the
second is set to "auto".
• percentage – Sets the width and height of the background image in percent
of the parent element. The first value sets the width, the second value sets the
height. If only one value is given, the second is set to "auto"
• cover - Resize the background image to cover the entire container, even if it
has to stretch the image or cut a little bit off one of the edges
• contain – Resize the background image to make sure the image is fully visible
• initial – Sets this property to its default value
• inherit – Inherits this property from its parent element.
• background-size: auto;
• background-size: 75% 50%;
• background-size: cover;
background-repeat
• The background-repeat property sets if/how a background
image will be repeated.
• By default, a background-image is repeated both vertically and
horizontally.
background-attachment
• The background-attachment property sets whether a
background image scrolls with the rest of the page, or is fixed.
background-origin
• The background-origin property specifies the origin position
(the background positioning area) of a background image.

Note: This property has no effect if background-attachment is


"fixed".
background-clip
• The background-clip property defines how far the background
(color or image) should extend within an element.
Manipulating Texts
• 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)"
Text Alignment and Text Direction
• text-align:
• used to set the horizontal alignment of a text
• center, left, right, justify, initial, inherit
• text-align-last:
• specifies how to align the last line of a text
• auto, left, right, center, justify, start, end, initial, inherit
• vertical-align:
• sets the vertical alignment of an element.
• Baseline, text-top, text-bottom, sub, super
CSS Text
• color
• background-color
• text-align
• text-align-last
• direction
• unicode-bidi
• vertical-align
CSS Fonts
1. Font Family
2. Font Style
3. Font Weight
4. Font Variant
5. Font Size
6. Font Color
7. Font Shorthand
CSS Font Families
In CSS there are five generic font families:
1.Serif fonts have a small stroke at the edges of each
letter. They create a sense of formality and elegance.
2.Sans-serif fonts have clean lines (no small strokes
attached). They create a modern and minimalistic look.
3.Monospace fonts - here all the letters have the same
fixed width. They create a mechanical look.
4.Cursive fonts imitate human handwriting.
5.Fantasy fonts are decorative/playful fonts.
CSS 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)

p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
CSS Font Weight
• The font-weight property specifies the weight of a font: normal
or bold

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}
CSS 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.

p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
CSS Font Variant
• The font-size property sets the size of the text.
• Always use the proper HTML tags, like <h1> - <h6> for headings
and <p> for paragraphs.
• The font-size value can be an absolute, or relative size.
h1 {
font-size: 40px;
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
body {
font-size: 100%;
}
p {
font-size: 10vw;
}
CSS Font with Shorthand Declaration
• The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
• The font-size and font-family values are required. If one of the other values
is missing, their default value are used.
Note: The line-height property sets the space between lines.
• if you specify background-color specifically and then you go ahead and
override it with the background, but you don't specify the color or you
don't specify whatever the specific property is, whether it's background-
image or background-repeat or background-position and so on.
• If you specify font without any dash subproperty, whatever properties that
are inherited with a dash will be overridden unless you actually call them
out directly, straight in the font property.
CSS Border
• The ”border-style” property specifies what kind of border to display.
Padding
The CSS padding properties are used to generate space around an element's
content, inside of any defined borders.If the padding property has four values:
•padding: 25px 50px 75px 100px;
• top padding is 25px
• right padding is 50px
• bottom padding is 75px
• left padding is 100px
CSS Lists
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items
• CSS Lists Properties
• list-style-type - specifies the type of list item marker (circle,
square, upper-roman, lower-alpha).
• list-style-image - specifies an image as the list item marker.
• list-style-position - specifies the position of the list-item markers
(bullet points).
• "list-style-position: outside;" means that the bullet points will be
outside the list item.
• "list-style-position: inside;" means that the bullet points will be inside
the list item.
• list-style-type:none - can also be used to remove the
markers/bullets. Default margin and padding will remains in the list.
To remove this, add margin:0 and padding:0 to <ul> or <ol>
CSS List - Shorthand property
• The list-style property is a shorthand property. It is used to
set all the list properties in one declaration:
ul {
list-style: square inside url(“gehu.jpg”);
}
• When using the shorthand property, the order of the
property values are:
• list-style-type (if a list-style-image is specified, the value of this
property will be displayed if the image for some reason cannot be
displayed)
• list-style-position (specifies whether the list-item markers should
appear inside or outside the content flow)
• list-style-image (specifies an image as the list item marker)
• If one of the property values above is missing, the default value
for the missing property will be inserted, if any.
Position Property
• The position property specifies the type of
positioning method used for an element.
• There are five different position values:
• static
• relative
• fixed
• absolute
• sticky
position: static
• HTML elements are positioned static by default
• Static positioned elements are not affected by the top,
bottom, left, and right properties.
position: relative
• HTML element is positioned relative to its normal
position. Setting the top, right, bottom, and left
properties of a relatively-positioned element will cause
it to be adjusted away from its normal position.
• Other content will not be adjusted to fit into any gap
left by the element
position: fixed
• HTM element is positioned relative to the viewport, which means it
always stays in the same place even if the page is scrolled. The top,
right, bottom, and left properties are used to position the element.
• A fixed element does not leave a gap in the page where it would
normally have been located.
position: absolute
• An element with position: absolute; is positioned
relative to the nearest positioned ancestor (instead of
positioned relative to the viewport, like fixed).
• However; if an absolute positioned element has no
positioned ancestors, it uses the document body, and
moves along with page scrolling.
position: sticky
• An element with position: sticky; is positioned based on
the user's scroll position.
• A sticky element toggles between relative and fixed,
depending on the scroll position. It is positioned relative
until a given offset position is met in the viewport -
then it "sticks" in place (like position:fixed).
Output After Scrolling
Bootstrap
• Bootstrap is an open-source and free CSS framework that helps in directing
a responsive device-friendly mobile-first front-end webpage development
tool.
• Bootstrap mainly includes CSS (Cascading Style Sheets) and an optional
JavaScript-supported design template (plug-ins) that deals with typography,
buttons, forms, and other user interface components. This Bootstrap
framework helps rapid web development and supports developers in
creating responsive web pages.
• Twitter Blueprint was the first name for Bootstrap and was developed on
Twitter by Mr. Mark Otto and Jacob Thornton. It was released as an open-
source product on GitHub in August 2011. The framework is primarily built
to encourage design uniformity and reliability of web pages across
applications. Before its existence, developers used various external libraries
to perform responsive web development, leading to incompatibilities in
web development and heavy maintenance burdens.
Benefits of Bootstrap
• Browser supportive: Every browser supports this Bootstrap Framework.
• Mobile-first approach: The Bootstrap framework has a preexisting mobile-first style all through the library and not as separate
files.
• Simple and easy to start: If you know HTML and CSS, you can quickly start working with Bootstrap, and its documentation is
available on the official site.
• Responsive design and looks: Web pages designed using the Bootstrap framework have responsive CSS that can adjust to the
screen size of large desktops, notebooks, tablets, and mobiles.
• Easy customization: It provides some built-in components and functionalities that are easy to customize.
• Clean interface or Developers: The bootstrap framework provides a new and consistent result for building user interfaces on web
pages.
• It is an open-source framework with web-based customization.
• Benefits of Bootstrap Framework
• It produces fewer cross-browser bugs.
• It is a consistent framework supported by all web browsers and CSS-based compatibility improvements.
• It is a lightweight and hence widely used framework for creating responsive sites.
• It's easily customizable.
• It has a simple and effective grid system.
•
Media Query
• Media Query is used to design a responsive device-friendly front-end
webpage.
Program (Media Query)
OUTPUT (When Page width is
in between 500 – 1000px

OUTPUT (When Page width


either less than 500 or
greater than 1000px

You might also like