Module 3 CSS

CSS
Cascading Style sheet

Cascading Style Sheets, referred to as CSS, is a simple design language intended to simplify the process
of making web pages presentable
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding
elements in your document.
A style rule is made of three parts
Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag i.e. all the HTML attributes are converted into CSS properties. They could
be color, border etc.
Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc.
Syntax:
selector { property: value; }
Example:
h1 { color: #36CFFF; }
Including CSS
There are four ways to include CSS in HTML document
▪ Embedded CSS
▪ Inline CSS
▪ External CSS
▪ Imported CSS
Embedded CSS
Put CSS rules into an HTML document using the <style> element inside the <head>...</head>
tags.
Rules defined using this syntax will be applied to all the elements available in the document
Example:
<html>
<head>
<style type = "text/css" media = "all">
body { background-color: linen; }
h1 { color: maroon; margin-left: 40px; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Inline CSS
Use style attribute of any HTML element to define style rules.
These rules will be applied to that element only
Example:
<h1 style = "color:#36C;">This is inline CSS </h1>
<h1>This has no CSS</h1>
External CSS
An external style sheet is a separate text file with .css extension.
Define all the Style rules within this text file
You can include this file in any HTML document using <link> element.
Syntax:
<head>
<link type = "text/css" href = "..." media = "..." />
</head>
Example:
mystyle.css
h1, h2, h3 { color: #36C; font-weight: normal; letter-
spacing: .4em; margin-bottom: 1em; text-transform:
lowercase; }
HTML document
<head>
<link rel= “stylesheet” href = "mystyle.css" media = " all" />
</head>
Import style
@import is used to import an external stylesheet in a manner similar to the
<link> element
Syntax:
<head> @import "URL"; </head>
Example:
<head> @import "mystyle.css"; </head>
Attributes of <style> element
Attribute Value Description
Specifies the style sheet language as a content-type (MIME type). This
type text css
attribute is required.
Specifies the style sheet file having Style rules. This attribute is a
href URL
required.
screen
tv
projection
handheld Specifies the device the document will be displayed on. Default value
media
print is all. This is optional attribute.
braille
aural
all
Types of selectors
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)
Basic CSS selectors
The CSS element Selector
The element selector selects HTML elements based on the element name
p {
text-align: center;
color: red;
}
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
#para1 {
text-align: center;
color: red;
}
Universal Selector
The CSS rule for universal selector renders the content of every element in our document
*{
color: #000000;
}
The Class Selector
The class selector selects HTML elements with a specific class attribute.
All the elements having that class will be formatted according to the defined rule
To select elements with a specific class, write a period (.) character, followed by the class name.
.center {
text-align: center;
color: red;
}
You can also specify that only specific HTML elements should be affected by a class
E.g. In this example style rule will be applied to only <p> elements with class="center"
p.center {
text-align: center;
color: red;
}
Grouping Selector
The CSS rule is applied to a group of elements
h1, h2, p {
text-align: center;
color: red;
}
Attribute Selector
Attribute selectors apply styles to HTML elements with particular attributes.
E.g. The style rule below will match all the input elements having a type attribute with a value of text
input[type = "text"] {
color: #000000;
}
There are following variations of rules applied to attribute selector.

p[lang] − Selects all paragraph elements with a lang attribute.
p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly "fr".
p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word "fr".
p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that are exactly "en", or
begin with "en-".
Descendant/contextual Selector
The descendant selectors select only those elements that are descendants of a specific
element i.e. when it lies inside a particular element
P b {
color: #000000;
}
Child Selector
The child selectors select only those elements that are immediate children of a specific
element
P>b {
color: #000000;
}
child selectors can be combined with other selectors too. E.g.
body >* selects all children of <body> element
body >*>* selects all grand children of <body> element
body >*>p selects all <p> grand children of <body> element
Pseudo classes and elements
A pseudo-class is used to define a special state of an element
For example, it can be used to:
• Style an element when mouse pointer moves over it
• Style visited and unvisited links differently
• Style an element when it gets focus
It can be combined with a CSS selector to add an effect to existing elements based on their states
Syntax:
selector: pseudo-class{
property: value;
}
Example:
input: focus{
background-color: grey;
}
Pseudo classes
Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent,
counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its
parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its
parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read- Selects <input> elements with no "readonly" attribute

write
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor
name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links

Pseudo Elements
Selector Example Example description
::after p::after Insert content after every <p> element
::before p::before Insert content before every <p> element
::first-letter p::first-letter Selects the first letter of every <p> element
::first-line p::first-line Selects the first line of every <p> element
::selection p::selection Selects the portion of an element that is selected by a user

BOX Model
The CSS box model is a container that contains multiple properties
including borders, margins, padding, and the content itself.
It is used to create the design and layout of web pages.
It can be used as a toolkit for customizing the layout of different elements.
The web browser renders every element as a rectangular box according to
the CSS box model.
Box-Model has multiple properties in CSS. Some of them are given
below:
• Content: This is where the actual data, such as text, images, or other
media, is stored. It can be sized using the width and height properties.
• Padding: This property is used to create space around the element, inside
any defined border.
• Border: This property covers both the content and any padding, and
allows you to set the border's style, color, and width.
• Margin: This property is used to create space around the border area of
the element.
While setting the width and height properties of an element with CSS, we have only
set the width and height of the content area.
We need to add padding, borders, and margins in order to calculate the full size of
an element.
Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
Consider the below example.
.Box1
{
font-size:40px;
font-weight:bold;
color:black;
margin-top:60px;
background-color:purple;
padding:10px;
}
Float
The float CSS property is used to position the elements to the left, right, of its container along with
permitting the text and inline elements to wrap around it.
The float property defines the flow of content in the page.
The remaining elements will be part of the flow if the element is removed from the normal flow of the
content.
This property is ignored by the absolutely positioned elements
Float property can take following values
• none: This is the default value & the element does not float.
• left: Element floats on the left side of the container.
• right: Element floats on the right side of the container.
• initial: Element will be set to its default value.
• inherit: Element inherits floating property of its parent property.
The following example specifies that an image should float to the left in a text
img {
float: left;
}
Position
The position property in CSS tells about the method of positioning for an
element or an HTML entity and the positioning of an element can be done
using the top, right, bottom, and left properties.
These specify the distance of an HTML element from the edge of the
viewport.
There are five different types of position properties available in CSS:
• Fixed position:
Any HTML element with position: fixed property will be positioned relative to the viewport.
An element with fixed positioning allows it to remain in the same position even we scroll the page.
We can set the position of the element using the top, right, bottom, and left.
• Static:
This method of positioning is set by default. If we don’t mention the method of positioning for
any element, the element has the position: static method by default.
By defining Static, the top, right, bottom, and left will not have any control over the element.
The element will be positioned with the normal flow of the page.
• Relative:
An element with position: relative is positioned relatively with the other elements which are
sitting on top of it.
If we set its top, right, bottom, or left, other elements will not fill up the gap left by this element.
An element with its position set to relative and when adjusted using top, bottom, left, and right
will be positioned relative to its original position.
• Absolute:
An element with position: absolute will be positioned with respect to its nearest Non-static
ancestor.
The positioning of this element does not depend upon its siblings or the elements which are at
the same level.
• Sticky:
Element with position: sticky and top:0 played a role between fixed & relative based on the
position where it is placed.
If the element is placed in the middle of the document then when the user scrolls the document,
the sticky element start scrolling until it touched the top. When it touches the top, it will be
fixed at the top place in spite of further scrolling. we can stick the element at the bottom, with
the bottom property.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>

Module 3 CSS

Uploaded by

Copyright:

Available Formats

You might also like

Module 3 CSS

Uploaded by

Document Information

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

Module 3 CSS

Uploaded by

Copyright:

Available Formats

CSS

Cascading Style sheet

There are following variations of rules applied to attribute selector.

:read-write input:read- Selects <input> elements with no "readonly" attribute

:required input:required Selects <input> elements with a "required" attribute specified

:root root Selects the document's root element

:valid input:valid Selects all <input> elements with a valid value

:visited a:visited Selects all visited links

Selector Example Example description

::after p::after Insert content after every <p> element

::before p::before Insert content before every <p> element

::first-letter p::first-letter Selects the first letter of every <p> element

::first-line p::first-line Selects the first line of every <p> element

::selection p::selection Selects the portion of an element that is selected by a user

You might also like