Scribd
Upload
45 views

Introduction To CSS

The document discusses Cascading Style Sheets (CSS) and the CSS box model. It covers: - What CSS is and why it is used to separate content from presentation - The three ways CSS can be defined: inline, internal, and external stylesheets - CSS syntax including selectors, properties, and values - The CSS box model which represents elements using boxes with properties for content, padding, border, and margin - Inheritance and how nested elements can inherit styles from their parents

Uploaded by

TGOW
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
45 views

Introduction To CSS

The document discusses Cascading Style Sheets (CSS) and the CSS box model. It covers: - What CSS is and why it is used to separate content from presentation - The three ways CSS can be defined: inline, internal, and external stylesheets - CSS syntax including selectors, properties, and values - The CSS box model which represents elements using boxes with properties for content, padding, border, and margin - Inheritance and how nested elements can inherit styles from their parents

Uploaded by

TGOW
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/ 46

TCS 693: FULL STACK WEB

DEVELOPMENT

UNIT II: CSS


(CASCADING STYLE SHEETS)

Mr. Pranav More


Assistant Professor-CSE
Graphic Era (Deemed to be) University
CONTENTS OF THE UNIT:
⚫ Need for CSS, introduction to CSS, basic syntax and
structure using CSS, type of CSS(inline CSS, internal CSS,
external CSS), CSS Box model , material design, SCSS,
background images, colors and properties, manipulating
texts using fonts, borders and boxes, margins, padding
lists, positioning using CSS, Introduction to Bootstrap.
INTRO TO CSS
Covered in this Session:
⚫ Overview
What is CSS?
Why to use CSS?
CSS for Skinning your Website
⚫ Structure
CSS Syntax Introduction
Three places CSS can be defined
CSS Syntax Specifics
Cascading Inheritance
CSS Box Model
WHAT IS CSS?
Cascading: Falling of
Cascading Style Sheet Styles.
Stylesheet Language
Standards-based set of properties and Style: Adding designs/
Styling our HTML tags.
attributes to define styles
To describe the presentation a document written Sheets: Writing our style
in a ‘markup language’ like HTML or XML in different documents
Markup encoding: <p>My paragraph here.</p>
Defines the style of how things in <p> tags
appear.
Font, color, size, margins, etc.
Cascading
Rules to determine how to
apply markup that contains other
markup.
WHY CSS?
Separate Content from Form
⚫ Content is the text and images, marked up to define regions of
specific types
⚫ Form defines the “style” for the content

<font size=“14px”>
My First Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
My information 1 goes here.
The old </font>
<font size=“14px”>
way: My Second Header
</font>
<font size=“12px” color=“red” face=“Verdana”>
Different information goes here.
</font>
WHY CSS? CONTINUED.
Separate Content from Form
⚫ Content

<p class=“header”>My First Header</p>


<p class=“info”>My Information 1 goes here</p>
<p class=“header”>My Second Header</p>
<p class=“info”>Different Information goes here</p>
(Specific markup properties like Class will be discussed later).

⚫ Form or Style

.header { font-size:14px;}
.info { font-family: verdana;
font-color: blue;
font-size: 12px; }
WHAT DOES THIS SEPARATION GET US?
Separate Content from Form
⚫ Specify the style once for every instance of that class.
Example: Specify the font once for all text on the HTML page that
you’ve identified as a “header”.

⚫ The stylesheet can be a separate file which all HTML pages


on your entire site can link to.
Only have to specify the style once for your ENITRE SITE

⚫ Can change the style for your entire site by editing only
ONE FILE.
CSS SKINNING
“Skinning” - changing the look of a page or your site
⚫ Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin1.css" />

<p class=“info”>My Information 1 goes here</p>


+
skin1.css
.info { background-color: White;
font-family: Verdana;
font-color: Blue; }
=
My Information 1 goes here
CSS SKINNING 2
“Skinning” - changing the look of a page or your site
⚫ Selecting an appearance by choosing which stylesheet to use.

<link rel="stylesheet" type="text/css" href=“skin2.css" />

<p class=“info”>My Information 1 goes here</p>


+
skin2.css
.info { background-color: Blue;
font-family: Serif;
font-color: White; }
=
My Information 1 goes here
CSS SYNTAX
3 Elements to a CSS Statement
⚫ Selector
What HTML sections does it affect?
⚫ Property
What attribute of that HTML section will be affected?
⚫ Value
What change will be made to that attribute?
THREE CSS DEFINITION LOCATIONS
Inline: the “style” attribute
Inline styles are defined right in the (X)HTML file along side the
element you want to style. See example below.

Note, the selector for inline CSS is the tag which contains the style
attribute.

<p style=“font-color:red;font-size:10px;”>Content</p>
THREE CSS DEFINITION LOCATIONS
Internal: the <style> markup tag
This way you are simply placing the CSS code within the
<head></head> tags of each (X)HTML file you want to style with the
CSS.

<head> <html><head><style>
<title><title> p { background-color: Red;
<style type=”text/css”> font-family: serif;
CSS Content Goes Here font-color: White; }
</style> </style></head><body>
</head> <p>Content</p>
<body> </body></html>

With this method each (X)HTML file contains the CSS code needed to style
the page. Meaning that any changes you want to make to one page, will
have to be made to all. This method can be good if you need to style only
one page, or if you want different pages to have varying styles.
THREE CSS DEFINITION LOCATIONS

External: the .css stylesheet file


An external CSS file can be created with any text or HTML editor such as
“Notepad” or “Dreamweaver”. A CSS file contains no (X)HTML, only CSS.
You simply save it with the .css file extension. You can link to the file
externally by placing one of the following links in the head section of
every (X)HTML file you want to style with the CSS file.

<link rel="stylesheet" type="text/css" href=“mystylesheet.css" />

By using an external style sheet, all of your (X)HTML files link to one
CSS file in order to style the pages. This means, that if you need to alter
the design of all your pages, you only need to edit one .css file to make
global changes to your entire website.
CSS SYNTAX: SELECTORS
There are many kinds of selectors and many ways to reference them:
⚫ Type, Class, ID, Pseudo, etc.

HTML Type Tag – selected with the tag type


p { font-size: 10px;
font-color: White; }

<p>Content</p>

The Class Attribute – precede the class with a period


.myinfo { font-size: 10px;
font-color: White; }

<p class=“myinfo”>Content</p>
<div class=“myinfo”>Other content</div>
CASCADING INHERITANCE
Nested elements inherit
the properties from the
its parent

If you specify a style for the body { font-family: Verdana;


<body> tag it will affect all font-size: 14px; }
content in your HTML page.
body { font-family: Verdana;
font-size: 1.1em; }
If you want to override .littletext { font-size: 8px; }
inherited settings, you <body>
need to specify a style in This text is larger.
a more local element <p class=“littletext”>This text is
smaller.</p>
CSS BOX MODEL
Every element in CSS can be represented using the BOX model

It allows us to add a border and define space between the content

It helps the developer to develop and manipulate the elements

It consists of 4 edges
⚫ Content edge – It comprises of the actual content

⚫ Padding edge – It lies in between content and border edge

⚫ Border edge – Padding is followed by the border edge

⚫ Margin edge – It is an outside border and controls the margin of


the element
CSS BOX MODEL
Content: The content area consists of content like image, text, or other forms
of media content. The height and width properties help to modify the box
dimensions.

Padding: The padding area is the space around the content area and within
the border-box. It can be applied to all sides of the box or to the specific,
selected side(s) - top, right, bottom, and/or left.

Border: The border area surrounds the padding and the content, and can be
applied to all the sides of the box or to selected side(s) - top, right, bottom,
and/or left.

Margin: The margin area consists of space between the border and the
margin. The margin does not possess its own background color and is
completely transparent. It shows the background color of the element, like the
body element.
CSS BOX MODEL

• The most inner rectangle


represents our content.
• The padding is nothing but the
space between the content
and border.
• The margin is the area outside
the border.
CSS BOX MODEL
The following diagram illustrates how the CSS properties
of width, height, padding, border and margin dictate that how much
space an attribute will occupy on a web page.
CSS BOX MODEL
<body>
Example:
<h2>Demonstrating the Box Model</h2>
div {
<p>The CSS box model is essentially a box that wraps
width: 300px;
around every HTML element. </p>
border: 15px solid green;
<div>This text is the content of the box. We have
padding: 50px;
added a 50px padding, 20px margin and a 15px green
margin: 20px;
border. </div>
}
</body>
WIDTH AND HEIGHT OF AN ELEMENT
In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.

Important: When you set the width and height properties of an element with
CSS, you just set the width and height of the content area. To calculate the full
size of an element, you must also add padding, borders and margins.

Example:
<body>
div {
<h2>Calculate the total width:</h2>
width: 320px;
<img src="k4_big.jpg" width="350" height="263" alt="Klematis">
padding: 10px;
<div>The picture above is 350px wide. The total width of this
border: 5px solid gray;
element is also 350px</div>
margin: 0;
</body>
}
WIDTH AND HEIGHT OF AN ELEMENT
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of an element should be calculated like this:

Total element width = width + left padding + right padding + left border + right
border + left margin + right margin

The total height of an element should be calculated like this:

Total element height = height + top padding + bottom padding + top border + bottom
border + top margin + bottom margin
WIDTH AND HEIGHT OF AN ELEMENT

Calculate Width and Height ? Example 2:


.box
Example 1: {
.test padding-top:30px;
{ width: 300px;
margin-left:50px; height: 100px;
border:50px solid Purple; border: 40px solid red;
width:300px; margin: 30px;
height:200px; text-align:center;
text-align:center; font-size:32px;
padding:50px; font-weight:bold;
} }
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)
SIMPLE CSS SELECTORS
The CSS element Selector
The element selector selects HTML elements based on the element name.

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.

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.
You can also specify that only specific HTML elements should be affected by a class.
SIMPLE CSS SELECTORS
The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.

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 {
text-align: center;
color: red;
} h1, h2, p {
h2 { text-align: center;
text-align: center;
color: red; color: red;
} }
p{
text-align: center;
color: red;
}
SIMPLE CSS SELECTORS
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 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:

descendant selector (space)

child selector (>)

adjacent sibling selector (+)

general sibling selector (~)


CSS COMBINATORS
Descendant Selector
The descendant selector matches all elements that are descendants of a specified
element.

Child Selector (>)


The child selector selects all elements that are the children of a specified element.

Adjacent Sibling Selector (+)


The adjacent sibling selector is used to select an element that is directly after another
specific element.
Sibling elements must have the same parent element, and "adjacent" means
"immediately following".

General Sibling Selector (~)


The general sibling selector selects all elements that are next siblings of a specified
element.
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 PSEUDO-CLASSES
What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.

For example, it can be used to:


Style an element when a user mouses over it
Style visited and unvisited links differently
Style an element when it gets focus

Syntax:
The syntax of pseudo-classes:
selector:pseudo-class
{
property: value;
}
CSS PSEUDO-ELEMENTS
What are Pseudo-Elements?
A CSS pseudo-element is used to style specified parts of an element.

For example, it can be used to:


Style the first letter, or line, of an element
Insert content before, or after, the content of an element

Syntax:
The syntax of pseudo-elements:
selector::pseudo-element
{
property: value;
}
CSS ATTRIBUTE SELECTORS
Style HTML Elements With Specific Attributes
It is possible to style HTML elements that have specific attributes or attribute values.

CSS [attribute] Selector


The [attribute] selector is used to select elements with a specified attribute.

The following example selects all <a> elements with a target attribute:
a[target]
{
background-color: yellow;
}
CSS COLORS
CSS uses color values to specify a color. Typically, these are used to set a color
either for the foreground of an element (i.e., its text) or else for the background of
the element.

They can also be used to affect the color of borders and other decorative effects.

You can specify your color values in various formats. Following table lists all the
possible formats −
CSS BACKGROUNDS
This teaches you how to set backgrounds of various HTML elements. You can set the
following background properties of an element −

The background-color property is used to set the background color of an element.

The background-image property is used to set the background image of an element.

The background-repeat property is used to control the repetition of an image in the


background.

The background-position property is used to control the position of an image in the


background.

The background-attachment property is used to control the scrolling of an image in the


background.

The background property is used as a shorthand to specify a number of other


background properties.
CSS BACKGROUNDS- OPERATIONS
Set the Background Color

Set the Background Image

Repeat the Background Image

Set the Background Image Position

Set the Background Attachment


CSS FONTS
This teaches you how to set fonts of a content, available in an HTML element. You can
set following font properties of an element −

The font-family property is used to change the face of a font.

The font-style property is used to make a font italic or oblique.

The font-variant property is used to create a small-caps effect.

The font-weight property is used to increase or decrease how bold or light a font
appears.

The font-size property is used to increase or decrease the size of a font.

The font property is used as shorthand to specify a number of other font properties.
CSS TEXTS
This teaches you how to manipulate text using CSS properties. You can set following
text properties of an element −
The color property is used to set the color of a text.
The direction property is used to set the text direction.
The letter-spacing property is used to add or subtract space between the letters
that make up a word.
The word-spacing property is used to add or subtract space between the words of a
sentence.
The text-indent property is used to indent the text of a paragraph.
The text-align property is used to align the text of a document.
The text-decoration property is used to underline, overline, and strikethrough text.
The text-transform property is used to capitalize text or convert text to uppercase
or lowercase letters.
The white-space property is used to control the flow and formatting of text.
The text-shadow property is used to set the text shadow around a text.
CSS TABLE
This will teach you how to set different properties of an HTML table using CSS.
You can set following properties of a table −

The border-collapse specifies whether the browser should control the


appearance of the adjacent borders that touch each other or whether each cell
should maintain its style.

The border-spacing specifies the width that should appear between table cells.

The caption-side captions are presented in the <caption> element. By default,


these are rendered above the table in the document. You use
the caption-side property to control the placement of the table caption.

The empty-cells specifies whether the border should be shown if a cell is empty.

The table-layout allows browsers to speed up layout of a table by using the first
width properties it comes across for the rest of a column rather than having to
load the whole table before rendering it.
CSS SCROLLBAR
There may be a case when an element's content might be larger than the amount of space
allocated to it. For example, given width and height properties do not allow enough room to
accommodate the content of the element.
CSS provides a property called overflow which tells the browser what to do if the box's
contents is larger than the box itself. This property can take one of the following values −
CSS BORDER
The border properties allow you to specify how the border of the box representing an element
should look. There are three properties of a border you can change −
The border-color specifies the color of a border.
border-bottom-color changes the color of bottom border.
border-top-color changes the color of top border.
border-left-color changes the color of left border.
border-right-color changes the color of right border.
The border-style specifies whether a border should be solid, dashed line, double line, or one of
the other possible values.
none − No border. solid − Border is a single solid line.
dotted − Series of dots. dashed − Series of short lines.
double − two solid lines. groove − Border carved into the page.
ridge − Opposite of groove. inset − look like it is embedded in the page.
Outset- look like it is coming out of the canvas.
hidden − Same as none, except in terms of border-conflict resolution for table
The border-width specifies the width of a border.
border-bottom-width border-top-width
border-left-width border-right-width
CSS LISTS
Lists are very helpful in conveying a set of either numbered or bullet points. This teaches you
how to control list type, position, style, etc., using CSS. We have the following five CSS
properties, which can be used to control lists −

The list-style-type allows you to control the shape or appearance of the marker.

None: NA disc (default): A filled-in circle

Circle: An empty circle Square: A filled-in square

The list-style-position specifies whether a long point that wraps to a second line should align
with the first line or start underneath the start of the marker.

None Inside Outside

The list-style-image specifies an image for the marker rather than a bullet point or number.

The list-style-image allows you to specify an image so that you can use your own bullet style.

The list-style serves as shorthand for the preceding properties.

The marker-offset specifies the distance between a marker and the text in the list.
CSS SELF STUDY CONCEPTS
CSS Margins

CSS Padding

CSS Outline

CSS Dimension

CSS Visibility

CSS Positioning

CSS Layers

CSS Text & Image Effect


CSS3- ROUNDED CORNERS
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 −

border-radius: Use this element for setting four boarder radius property.

border-top-left-radius: Use this element for setting the boarder of top left corner.

border-top-right-radius: Use this element for setting the boarder of top right corner.

border-bottom-right-radius: Use this element for setting the boarder of bottom right corner.

border-bottom-left-radius: Use this element for setting the boarder of bottom left corner.

Syntax:

#rcorners7 {
border-radius: 60px/15px;
background: #FF0000;
padding: 20px;
width: 200px;
height: 150px;
}
CSS3- MULTI COLUMNS
CSS3 supported multi columns to arrange the text as news paper structure. Some of
most common used multi columns properties as shown below −

column-count: Used to count the number of columns that element should be


divided.

column-fill: Used to decide, how to fill the columns.

column-gap: Used to decide the gap between the columns.

column-rule: Used to specifies the number of rules.

rule-color: Used to specifies the column rule color.

rule-style: Used to specifies the style rule for column.

rule-width: Used to specifies the width.

column-span: Used to specifies the span between columns.

You might also like