Scribd
Upload
1 views

CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of HTML elements across various media. It allows for the styling of multiple web pages simultaneously through external stylesheets and includes various selectors and properties for layout, spacing, and design. Key features include the box model, flexbox, and grid layout, which facilitate responsive design and control over element positioning and appearance.

Uploaded by

Arpit Jaiswal
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
1 views

CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of HTML elements across various media. It allows for the styling of multiple web pages simultaneously through external stylesheets and includes various selectors and properties for layout, spacing, and design. Key features include the box model, flexbox, and grid layout, which facilitate responsive design and control over element positioning and appearance.

Uploaded by

Arpit Jaiswal
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/ 16

CSS

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 mul ple web pages all at once
 External stylesheets are stored in CSS files

CSS Syntax
A CSS rule consists of a selector and a declara on block.

The selector points to the HTML element you want to style.


The declara on block contains one or more declara ons separated by semicolons.
Each declara on includes a CSS property name and a value, separated by a colon.
Mul ple CSS declara ons are separated with semicolons, and declara on blocks
are surrounded by curly braces.
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 rela onship between
them)
 Pseudo-class selectors (select elements based on a certain state)
 Pseudo-elements selectors (select and style a part of an element)
 A ribute selectors (select elements based on an a ribute or a ribute value)

The CSS element Selector

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;
}
The CSS class Selector
The class selector selects HTML elements with a specific class a ribute.
To select elements with a specific class, write a period (.) character, followed by
the class name.
.center {
text-align: center;
color: red;
}

The CSS Universal Selector


The universal selector (*) selects all HTML elements on the page.
*{
text-align: center;
color: blue;
}

Three Ways to Insert CSS


There are three ways of inser ng a style sheet:
 External CSS
 Internal CSS
 Inline CSS

External CSS

 With an external style sheet, you can change the look of an entire website by
changing just one file!
 Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

Internal CSS
An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the <style> element, inside the head sec on.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-le : 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Inline CSS
An inline style may be used to apply a unique style for a single element.
To use inline styles, add the style a ribute to the relevant element. The style
a ribute can contain any CSS property.
Example
<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

CSS Backgrounds
CSS background-color
The background-color property specifies the background color of an element.

CSS Borders
The CSS border proper es allow you to specify the style, width, and color of an
element's border.
CSS Border Style
The border-style property specifies what kind of border to display.
The following values are allowed:
 do ed - Defines a do ed border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-
color value
 ridge - Defines a 3D ridged border. The effect depends on the border-
color value
 inset - Defines a 3D inset border. The effect depends on the border-color
value
 outset - Defines a 3D outset border. The effect depends on the border-
color value
 none - Defines no border
 hidden - Defines a hidden border
Example
p.do ed {border-style: do ed;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: do ed dashed solid double;}

CSS Border Width


CSS Border Width
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of
the three pre-defined values: thin, medium, or thick:
Example
p.one {
border-style: solid;
border-width: 5px;
}

p.two {
border-style: solid;
border-width: medium;
}

p.three {
border-style: do ed;
border-width: 2px;
}

p.four {
border-style: do ed;
border-width: thick;
}
CSS Margins
CSS Margins
The CSS margin proper es are used to create space around elements, outside of
any defined borders.
With CSS, you have full control over the margins. There are proper es for se ng
the margin for each side of an element (top, right, bo om, and le ).
Margin - Individual Sides
CSS has proper es for specifying the margin for each side of an element:
 margin-top
 margin-right
 margin-bo om
 margin-le
All the margin proper es can have the following values:
 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the parent
element

CSS Padding
Padding is used to create space around an element's content, inside of any
defined borders.
The CSS padding proper es are used to generate space around an element's
content, inside of any defined borders.
With CSS, you have full control over the padding. There are proper es for se ng
the padding for each side of an element (top, right, bo om, and le ).

Padding - Individual Sides


CSS has proper es for specifying the padding for each side of an element:
 padding-top
 padding-right
 padding-bo om
 padding-le
All the padding proper es can have the following values:
 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing element
 inherit - specifies that the padding should be inherited from the parent
element
Example
div {
padding-top: 50px;
padding-right: 30px;
padding-bo om: 50px;
padding-le : 80px;
}
Padding - Shorthand Property
To shorten the code, it is possible to specify all the padding proper es in one
property.
The padding property is a shorthand property for the following individual
padding proper es:
 padding-top
 padding-right
 padding-bo om
 padding-le
So, here is how it works:
If the padding property has four values:
 padding: 25px 50px 75px 100px;
o top padding is 25px
o right padding is 50px
o bo om padding is 75px
o le padding is 100px
CSS Height, Width and Max-width

The CSS height and width properties are used to set the height and width
of an element.
The CSS max-width property is used to set the maximum width of an
element.

CSS Setting height and width


The height and width properties are used to set the height and width of an
element.
The height and width properties do not include padding, borders, or
margins. It sets the height/width of the area inside the padding, border,
and margin of the element.

CSS height and width Values


The height and width properties may have the following values:
 auto - This is default. The browser calculates the height and width
 length - Defines the height/width in px, cm, etc.
 % - Defines the height/width in percent of the containing block
 initial - Sets the height/width to its default value
 inherit - The height/width will be inherited from its parent value

CSS Box Model


 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 Links

Styling Links
Links can be styled with any CSS property (e.g. color, font-family, background,
etc.).
 a:link - a normal, unvisited link
 a:visited - a link the user has visited
 a:hover - a link when the user mouses over it
 a:active - a link the moment it is clicked

CSS Lists

CSS Website Layout


CSS - The @property Rule
The @property rule is used to define custom CSS properties directly
in the stylesheet without having to run any JavaScript.
The @property rule has data type checking and constraining, sets
default values, and defines whether the property can inherit values
or not.
Example of defining a custom property:
@property --myColor {
syntax: "<color>";
inherits: true;
initial-value: lightgray;
}

CSS Flexbox
Flexbox is short for the Flexible Box Layout module.
Flexbox is a layout method for arranging items in rows or columns.
Flexbox makes it easier to design a flexible responsive layout structure,
without using float or positioning.
The CSS properties we use for the flex container are:
 flex-direction
 flex-wrap
 flex-flow
 justify-content
 align-items
 align-content

The CSS flex-direction Property


The flex-direction property specifies the display-direction of flex items in the
flex container.
The flex-direction property can have one of the following values:
 row
 column
 row-reverse
 column-reverse

.flex-container {
display: flex;
flex-direction: column;
}

The CSS flex-wrap Property


The flex-wrap property specifies whether the flex items should wrap or not, if
there is not enough room for them on one flex line.
The flex-wrap property can have one of the following values:
 nowrap
 wrap
 wrap-reverse
.flex-container {
display: flex;
flex-flow: row wrap;
}
The CSS justify-content Property
The justify-content property is used to align the flex items when they do not
use all available space on the main-axis (horizontally).
The justify-content property can have one of the following values:
 center
 flex-start
 flex-end
 space-around
 space-between
 space-evenly
.flex-container {
display: flex;
justify-content: center;
}
The CSS align-items Property
The align-items property is used to align the flex items when they do not use
all available space on the cross-axis (vertically).
The align-items property can have one of the following values:
 center
 flex-start
 flex-end
 stretch
 baseline
 normal
Example
.flex-container {
display: flex;
flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column


layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}

CSS Grid
CSS Grid Layout Module

You might also like