CSS Introduction

• CSS stands for Cascading Style Sheets

• CSS is the language we use to style a Web page.
• CSS describes how HTML elements are to be displayed on screen

CSS Uses
• Solves a big problem
• Saves a lot of time
• Provide more attributes
• Pages load faster
• Easier Website maintenance
• Multiple device compatibility
CSS Syntax
Selector {Declaration; Declaration; …}

HTML element you property-name: value

want to style.
CSS Selector
• A CSS selector selects the HTML element(s) you want to style.
Element Selector
• Types of selectors:
Id Selector
Class Selector

Universal Selector

Group Selector

• The element selector selects the HTML element by name.

p{
text-align: center;
color: blue; Applies to all <p> elements in the HTML document.
}

• The id selector selects the id attribute of an HTML element to select a specific element.
#para1 {
text-align: center;
Applies to element having id attribute value
color: blue;
} as para1 in HTML document.
• The class selector selects HTML elements with a specific class attribute.
.center {
text-align: center; Applies to all the elements having class
color: blue; attribute value as center in HTML document.
}

• The universal selector is used as a wildcard character. It selects all the elements on
the pages.
* {
color: green;
font-size: 20px; Applies to all the elements in HTML document.
}

• The group selector is used to select group of elements on which same style is to be
applied.
h1,h2,p {
text-align: center;
color: blue; Applies to only listed elements in HTML document.
}
CSS Colors

• Color value is to be specified for background, font or border.

RGB format
• Ways to specify color:
RGBA format
Hexadecimal notation

Built-in color HSLA HSL

color: rgb(R, G, B); Red(R), Green(G) and Blue(B) values that can either be in
percentage or integer in the range 0 to 255
color: rgba(R, G, B, A); Same as RGB. Alpha(A) specifies elements transparency.
Value of A ranges from 0.0 to 1.0.
0.0 fully transparent & 1.0 opaque.

color: #dddddd; Hexadecimal color code. d ranges from 0 to f

color: color-name; Give any built-in color name.

CSS Background, Font & Text

• The CSS background properties are used to define the background effects for elements.

background-color:color-name;

background-image: url("url");

background-repeat: repeat-x/repeat-y/repeat/no-repeat;

background-position: left/right/top/bottom/center;

background-attachment: fixed;

• The CSS font property is used to set the fonts content of HTML element.
font-family: "font family name";

font-style: normal/italic;

font-weight: normal/bold/lighter/bolder;

font-variant: normal/small-caps;

font-size: pixels/percentage/em or small/large;

• CSS text formatting properties is used to format text and style text.
color: color-name;

text-align: left/right/center/justify;

text-decoration: underline/overline/line-through/none;

text-transform: uppercase/lowercase/capitalise;

text-indent: size;

letter-spacing: size;

line-height: size;

text-shadow: horizontal-size vertical-size color-name;;

word-spacing: size;
CSS Borders
• The CSS border properties allow you to specify the style, width, and color of an
element's border.
• The border-style property specifies what kind of border to display.

border-style: dotted/dashed/solid/double/groove/ridge/inset/outset/none/hidden;

• 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

• The border-color property is used to set the color of the four borders.

• The border-top-style, border-right-style, border-bottom-style, border-left-style

are the properties for specifying each of the borders.

• The border property is a shorthand property for the border-width, border-style,

border-color individual border properties.
• The border-radius property is used to add rounded borders to an element:
CSS Links
• Links can be styled with any CSS property (e.g. color, font-family, background, etc.)
a {
color: hotpink;
}

• Links can be styled differently depending on what state they are in.
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user moves mouse over it
• a:active - a link the moment it is clicked
• The text-decoration property is mostly used to remove underlines from links

text-decoration: underline;

text-decoration: none;

• The background-color property can be used to specify a background color for links
background-color: yellow;
CSS Lists
• The list-style-type property specifies the type of list item marker.

list-style-type: circle;
For <ul>
list-style-type: square;

list-style-type: upper-roman;
For <ol>
list-style-type: lower-alpha;

list-style-type: none; No bullet or marker

• The list-style-image property specifies an image as the list item marker

list-style-image: url('sqpurple.gif');

• The list-style-position property specifies the position of the list-item markers

list-style-position: outside; bullet points will be outside the list item

list-style-position: inside; bullet points will be inside the list item
CSS Tables
• To specify table borders in CSS, use the border property.
table, th, td {
border: 1px solid black;
}

• To span table on entire screen, add width: 100% to the <table> element.
table {
width: 100%;
}

• To collapse table border into a single border add border-collapse: collapse to <table>
element.
table {
border-collapse: collapse;
}

• If you want a border only around the table, specify the border property for <table>
table {
border: 1px solid black;
}
• The width and height of a table are defined by the width and height properties.
table {
width: 100%;
}

th {
height: 70px;
}

• The text-align property sets the horizontal alignment (like left, right, or center) of the
content in <th> or <td>
td {
text-align: center;
}

• The vertical-align property sets the vertical alignment (like top, bottom, or middle) of
the content in <th> or <td>.
td {
height: 50px;
vertical-align: bottom;
}
• To control the space between the border and the content in a table, use
the padding property on <td> and <th> elements
th, td {
padding: 15px;
text-align: left;
}

• Add the border-bottom property to <th> and <td> for horizontal divider.
th, td {
border-bottom: 1px solid #ddd;
}

• Use the :hover selector on <tr> to highlight table rows on mouse over
tr:hover {background-color: #f5f5f5;}

• For zebra-striped tables, use the nth-child() selector and add a background-color to all
even (or odd) table rows

tr:nth-child(even) {background-color: #f2f2f2;}

CSS Margins
• Margins are used to create space around elements, outside of any defined borders.
• The CSS margin properties are used to create space around elements, outside of any
defined borders.
• There are properties for setting the margin for each side of an element (top, right,
bottom, and left).

• CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties 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
• The margin property is a shorthand property for all the individual margin properties

margin: 25px 50px 75px 100px; (top, right, bottom, left)

margin: 25px 50px 75px; (top, right-left, bottom)

margin: 25px 50px; (top-bottom, right-left)

margin: 25px; (all four same)

• Set the margin property to auto to horizontally center the element within its
container.
CSS Padding
• Padding is used to create space around an element's content, inside of any defined
borders.
• The CSS padding properties are used to generate space around an element's content,
inside of any defined borders.
• There are properties for setting the padding for each side of an element (top, right,
bottom, and left).
• CSS has properties for specifying the padding for each side of an element:

• padding-top
• padding-right
• padding-bottom
• padding-left

All the padding properties 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
• The padding property is a shorthand property for all the individual margin properties

padding: 25px 50px 75px 100px; (top, right, bottom, left)

padding: 25px 50px 75px; (top, right-left, bottom)

padding: 25px 50px; (top-bottom, right-left)

padding: 25px; (all four same)

CSS Forms
• The look of an HTML form can be greatly improved with CSS
• Use the width property to determine the width of the input field

input {
width: 100%; Applies to all <input> elements
}

input[type=xxx] Will select specific input type

• Use the padding property to add space inside the input field.

• To add more space outside of input elements use margin property.

• Use the border property to change the border size, style and color of input elements.

• Use the border-radius property to add rounded corners to input elements.

• If you only want a bottom border, use the border-bottom property

• Use the background-color property to add a background color to the input, and the
color property to change the text color

• By default, some browsers will add a blue outline around the input when it gets
focus (clicked on). You can remove this behavior by adding outline: none; to the
input.

• Use the :focus selector to do something with the input field when it gets focus

• If you want an icon inside the input, use the background-image property and
position it with the background-position property. Also notice that we add a large
left padding to reserve the space of the icon

input[type=text] {
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding-left: 40px;
}
• Use the CSS transition property to animate the width of the input when it gets
focus.
input[type=text] {
transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
width: 100%;
}

• Use the resize property to prevent textarea from being resized (disable the
"grabber" in the bottom right corner)
Styling Select Menus Styling Input Buttons

select { input[type=button], input[type=submit],

width: 100%; input[type=reset] {
padding: 16px 20px; background-color: #04AA6D;
border: none; border: none;
border-radius: 4px; color: white;
background-color: #f1f1f1; padding: 16px 32px;
} text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
CSS Cursors
Use the elements cursor property to define the type of mouse cursor when the mouse
pointer is on the element.

<div style = "cursor:alias">alias Value</div>

<div style = "cursor:auto">auto Value</div>
<div style = "cursor:all-scroll">all-scroll value</div>
<div style = "cursor:col-resize">col-resize value</div>
<div style = "cursor:crosshair">Crosshair</div>
<div style = "cursor:default">Default value</div>
<div style = "cursor:copy">copy value</div>
<div style = "cursor:pointer">Pointer</div>
<div style = "cursor:move">Move</div>
<div style = "cursor:e-resize">e-resize</div>
<div style = "cursor:ew-resize">ew-resize</div>
<div style = "cursor:ne-resize">ne-resize</div>
<div style = "cursor:nw-resize">nw-resize</div>
<div style = "cursor:n-resize">n-resize</div>
<div style = "cursor:se-resize">se-resize</div>
<div style = "cursor:sw-resize">sw-resize</div>
<div style = "cursor:s-resize">s-resize</div>
<div style = "cursor:w-resize">w-resize</div>
<div style = "cursor:text">text</div>
<div style = "cursor:wait">wait</div>
<div style = "cursor:help">help</div>
<div style = "cursor:progress">Progress</div>
<div style = "cursor:no-drop">no-drop</div>
<div style = "cursor:not-allowed">not-allowed</div>
<div style = "cursor:vertical-text">vertical-text</div>
<div style = "cursor:zoom-in">Zoom-in</div>
<div style = "cursor:zoom-out">Zoom-out</div>
CSS Box Model

• All HTML elements can be considered as boxes.

• The CSS box model is a box that wraps around every HTML element.

• It consists of: margins, borders, padding, and the actual content.

div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
 Transparent area around the content.

Transparent area outside the border.

The content of the box, where text A border that goes around the padding
and images appear and content
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

div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
• Create a webpage which displays "Hello World" with font size 20 pixels, bold format,
in "Times New Roman" font and green in color using inline CSS, embedded CSS and
external CSS.

• Create a webpage which displays the class time table and apply the following effects
on the table:
• For the table header apply blue as the background color and white for the color
of the text in the table header.
• Display day names (Mon, Tue etc...) in bold format with the first letter in the day
name in uppercase.
• Display lunch slightly in bigger font other than the remaining text.

Period 1 2 3 4 5 6 7
12.30PM-
8.30AM- 9.30AM- 10.40AM- 11.30AM- 1.30PM 1.30PM- 2.30PM- 3.30PM-
Day
9.30AM 10.30AM 11.30AM 12.30AM 2.30PM 3.30PM 4.30PM
Mon AJWT ACN DAA UP IPR2 CA MS
Tue ACN MS UP DAA L AJWT LAB
Wed CA MS DAA ACN U IPR2 AJWT UP
N
Thu UP DAA AJWT CA C CN&UNIX LAB
Fri AJWT ACN CA MS H DAA ACN CRT
Sat MS AJWT CA UP CRT
• Create a webpage to manage personal details like name, class, qualifications,
photo, address etc., using tables and other suitable HTML tags. Apply the following
style information:
• Display the heading of the page in Times New Roman font and with 24px size.
• Align all the field names like Name, Class, Photo etc to right in the table.
• Apply light blue as background color for the left side cells in the table which
contains field names like Name, Class etc.
• Also display your college logo as background image in the top right position of
the web page.
CSS display property

• The display property specifies if/how an element is displayed.

• Every HTML element has a default display value depending on what type of element it is.

• The default display value for most elements is block or inline.

Block-level Elements Inline Elements

• Always starts on a new line and takes up • Doesn’t start on a new line and only
the full width available (stretches out to takes up as much width as
the left and right as far as it can) necessary.

<div> <span>
<h1> - <h6> <a>
<p> <img>
<form>
<header>
<footer>
<section>
Changing an inline element to a block element, or vice versa

li { span { a{
display: inline; display: block; display: block;
} } }

• Set the display property to none to hide an element. The element will be hidden,
and the page will be displayed as if the element is not there

• Setting visibility: hidden; also hides an element. However, the element will still take
up the same space as before.

h1.hidden { h1.hidden {
display: none; visibility: hidden;
} }
CSS overflow property

• The overflow property specifies whether to clip the content or to add scrollbars when
the content of an element is too big to fit in the specified area.
• visible - Default. The overflow is not clipped. The content renders outside the
element's box
• hidden - The overflow is clipped, and the rest of the content will be invisible

• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content

• auto - Similar to scroll, but it adds scrollbars only when necessary

• Note that the overflow property only works for block elements with a specified
height.
CSS float property

• The float property is used for positioning and formatting content

• left - The element floats to the left of its container

• right - The element floats to the right of its container

• none - The element does not float (will be displayed just where it occurs in the text).
This is default

• inherit - The element inherits the float value of its parent

CSS clear property

• The clear property specifies what should happen with the element that is next to a
floating element.

• none - The element is not pushed below left or right floated elements. This is default

• left - The element is pushed below left floated elements

• right - The element is pushed below right floated elements

• both - The element is pushed below both left and right floated elements

• inherit - The element inherits the clear value from its parent
<body> <style>
<div class="div1">div1</div> .div1 {
<div class="div2">div2</div> float: left;
<div class="div3">div3</div> padding: 10px;
<div class="div4">div4</div> border: 3px solid blue;
</body> }

.div2 {
padding: 10px;
border: 3px solid red;
}

.div3 {
float: left;
padding: 10px;
border: 3px solid blue;
}

.div4 {
padding: 10px;
border: 3px solid red;
clear: left;
}
</style>
CSS box-sizing property

• Defines how the width and height of an element are calculated: should they include
padding and borders, or not.

• content-box - The width and height properties includes only the content. Border and
padding are not included

• border-box - The width and height properties includes content, padding and border.
 Style an element when a user
CSS Pseudo Classes
moves mouse over it
Used to define a special state of an element.
Style visited and unvisited links
differently

Style an element when it gets focus

The syntax of pseudo-classes:

selector : pseudo-class { Pseudo-classes and HTML Classes

property: value;
} a.highlight : hover {
color: #ff0000;
}
Anchor Pseudo-classes
Hover on <div>
a:link { color: #FF0000;}
a:visited { color: #00FF00;}
div : hover {
a:hover { color: #FF00FF;}
background-color: blue;
a:active { color: #0000FF;}
}
Simple Tooltip Hover The :first-child Pseudo-class

<style> The :first-child pseudo-class matches a

p{ specified element that is the first child of
display: none; another element.
background-color: yellow;
padding: 20px; p : first-child {
} color: blue;
}
div : hover p {
display: block; Match the first <i> element in all <p> elements
}
</style>
p i:first-child {
<body>
color: blue;
<div>About Us
}
<p>IT Career Swish</p>
</div>
</body> Match all <i> elements in all first child <p> elements

p:first-child i {
color: blue;
}
 Style the first letter, or line, of an
CSS Pseudo elements
element
Used to style specified parts of an element.
Insert content before, or after, the
content of an element

The syntax of pseudo-elements: The ::first-letter pseudo-element

selector :: pseudo-element { Used to add a special style to the first letter of a text.
property: value;
} p::first-letter {
color: #ff0000;
font-size: xx-large;
The ::first-line pseudo-element }

Used to add a special style to the first line of a text.

p::first-line {
color: #ff0000;
font-variant: small-caps;
}
The ::before pseudo-element

Used to insert some content before the content of an element.

h1::before {
content: url(smiley.gif);
}

The ::after pseudo-element

Used to insert some content after the content of an element.

h1::after { The ::selection pseudo-element

content: url(smiley.gif);
} Matches the portion of an element that is
selected by a user.
The ::marker pseudo-element
::selection {
Selects the markers of list items. color: red;
background: yellow;
::marker { }
color: red;
font-size: 23px;
}
CSS Flexbox Layout Before the Flexbox Layout

Block Inline Table Positioned

CSS Flexbox allows users to arrange and organize their webpage horizontally or vertically

Flex item Flex container

The flex container becomes flexible by setting the display property to flex

.flex-container {
display: flex;
}
<div class="flex-container"> <style>
<div>1</div> .flex-container {
<div>2</div> display: flex;
<div>3</div> background-color: DodgerBlue;
</div> }

.flex-container div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
</style>
flex-direction property

Defines in which direction the container wants to stack the flex items.
.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
}

The column value stacks the flex items vertically (from top to bottom)

The column-reverse value stacks the flex items vertically (but from bottom to top)

The row value stacks the flex items horizontally (from left to right)

The row-reverse value stacks the flex items horizontally (but from right to left)
flex-wrap property

Specifies whether the flex items should wrap or not.

.flex-container {
display: flex;
flex-direction: row | row-reverse | column | column-reverse;
flex-wrap: nowrap | wrap | wrap-reverse;
}

The wrap value specifies that the flex items will wrap if necessary

The nowrap value specifies that the flex items will not wrap (this is default)

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse
order
flex-flow property

Shorthand property for setting both the flex-direction and flex-wrap properties

.flex-container {
display: flex;
flex-flow: row wrap;
}
justify-content property Used to align the flex items

.flex-container {
display: flex;
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

The center value aligns the flex items at the center of

the container

The flex-start value aligns the flex items at the

beginning of the container (this is default)

The flex-end value aligns the flex items at the end of

the container

The space-around value displays the flex items with

space before, between, and after the lines

The space-between value displays the flex items with

space between the lines
align-items property Used to align the flex items

.flex-container {
display: flex;
align-items: stretch | flex-start | flex-end | center | baseline;
}

The center value aligns the flex items in the middle of

the container

The flex-start value aligns the flex items at the top of

the container

The flex-end value aligns the flex items at the bottom

of the container

The stretch value stretches the flex items to fill the

container (this is default)

The baseline value aligns the flex items such as their

baselines aligns
align-content property Used to align the flex lines

.flex-container {
display: flex;
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}

The space-between value displays the flex lines with

equal space between them

The space-around value displays the flex lines with

space before, between, and after them

The stretch value stretches the flex lines to take up

the remaining space (this is default)

The center value displays display the flex lines in the

middle of the container

The flex-start value displays the flex lines at the start

of the container

The flex-end value displays the flex lines at the end of

the container
Web Layout

• A website is often divided into headers, menus, content and a footer

Header

Usually located at the top of the website. It often contains a logo or the website name.

header { <header>Hello World</header>

background-color: #F1F1F1;
text-align: center;
padding: 20px;
}
Navigation Bar

Contains a list of links to help visitors navigating through your website

nav { <nav>
overflow: hidden; <a href="#">Home</a>
background-color: #333; <a href="#">About</a>
} <a href="#">Contact</a>
</div>
nav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

nav a:hover {
background-color: #ddd;
color: black;
}
Content

• The layout in this section, often depends on the target users.

• The most common layout is one or more combination of the following:

often used for mobile often used for tablets only used for
browsers and laptops desktops
<div class="row"> *{
<div class="column"> box-sizing: border-box;
<h2>Column</h2> }
<p>…</p>
</div> body {
margin: 0;
<div class="column"> }
<h2>Column</h2>
<p>…</p> .column {
</div> float: left;
width: 33.33%;
<div class="column"> padding: 15px;
<h2>Column</h2> }
<p>…</p>
</div>
</div>
Footer

Placed at the bottom of your page. Often contains information like copyright and contact
info.

footer {
background-color: #F1F1F1;
text-align: center;
padding: 10px;
}

<footer>&copy; 2022 – All rights reserved</header>