[go: up one dir, main page]
Scribd
Upload
4 views21 pages

Unit-3 Web Technology

The document discusses web page design using CSS, contrasting traditional table-based designs with modern table-less designs that utilize divs and other semantic elements for better performance and maintainability. It covers the history of CSS, its syntax, and various ways to insert CSS into HTML, as well as the differences between CSS and CSS3. Additionally, it explains CSS selectors, properties, the box model, and how to manipulate text and background styles.

Uploaded by

Jhalnath Chapagain
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
4 views21 pages

Unit-3 Web Technology

The document discusses web page design using CSS, contrasting traditional table-based designs with modern table-less designs that utilize divs and other semantic elements for better performance and maintainability. It covers the history of CSS, its syntax, and various ways to insert CSS into HTML, as well as the differences between CSS and CSS3. Additionally, it explains CSS selectors, properties, the box model, and how to manipulate text and background styles.

Uploaded by

Jhalnath Chapagain
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/ 21

Page |1

Unit-3
Page Designing with CSS
Introduction to designing approach
a. Table-based design
Traditionally, layouts were built using HTML with tables to layout the page structure and
content. Web design became more interesting with the introduction of table markups in
HTML. Web designers saw the opportunity to structure their design with the original
table markup. Sites were still text heavy, but at least they could separate the content
into different columns, rows, and other navigation elements. Designers could finally play
around with some graphic design elements as it grew rapidly in popularity, such as
having visit counters, animated GIFs, and so on. Texts and images were literally dancing
across websites everywhere.

We can see this in this website from 3drealms in 1996, which shows all the fancy
elements designers used to add to their websites:

Jhalnath Chapagain | [SCHOOL]


Page |2

The basic idea behind table based design is to partition our web page into various sections and
columns to give it a professional looks and to make it more user friendly. The easiest way to
divide our web page into subsections is to start by rendering it as one big table that spans the
entire width and at least the entire height (or more) of the web browser viewport. We can do
this by inserting a table in between the <body>...</body> tags of your HTML document and
then using the following code in the <table> start tag:
<table width="100%" style="height: 100%;">
Then everything on your web page goes inside this table.
Examples:

Basic two column layout

Two column layout with header, navigation bar and footer

Jhalnath Chapagain | [SCHOOL]


Page |3

Flaws of Table based Design

 Slow to render as the browser needs to download most - if not all - of the table to
render it properly
 They require more HTML than non-table layouts which means slower loading and
rendering, as well as an increased bandwidth usage
 They can be a nightmare to maintain as they can quickly get complex
 They were never intended to be used for page layouts
 They are not as flexible as using proper semantic markup

b. Table-less designs
Tables are for tabular data, not for design. It is wrong to use tables to create our layout. We
should use other elements for layout (divs, lists, sections, articles, headers, footers, asides, etc.).
And we can achieve great effects with minimal HTML/CSS (leaving our code semantically
meaningful, lightweight, and easy to maintain). All along people used tables to create column
layouts and templates for their websites because they shied away from learning CSS and <div>s.
HTML tables have many problems which can be overcome using divs. Take an example of
changing the size of a column while using <table> tag, expanding a column also expands the
column next to it. Of course we can use colspan and rowspan attributes to correct this to an
extent but that makes it cumbersome and eats up precious bytes. With tableless design in CSS
we can overcome all these problems and have complete control over our design.

Cascading Stylesheet and its properties


Introduction:
CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web
pages, including colors, layout, and fonts, thus making our web pages presentable to the users.
Now let’s try to break the acronym:
 Cascading: Falling of Styles
 Style: Adding designs/Styling our HTML tags
 Sheets: Writing our style in different documents
CSS History
1994: First Proposed by Hakon Wium Lie on 10th October
1996: CSS was published on 17th November with influencer Bert Bos
Later he became co-author of CSS
1996: CSS became official with CSS was published in December
1997: Created CSS level 2 on 4th November
1998: Published on 12th May

Jhalnath Chapagain | [SCHOOL]


Page |4

CSS Editors CSS Syntax


 Atom Selector {
 Visual Studio Code Property 1 : value;
 Brackets Property 2 : value;
 Notepad++(Great for HTML & CSS) Property 3 : value;
 Komodo Edit (Simple) }
 Sublime Text (Best Editor) For example:
h1
{
Color: red;
Text-align: center;

CSS vs CSS3

CSS CSS3

W3C developed the first version of CSS CSS3 is the latest version of CSS released
in 1996. in the year 2005.

For responsive web designing, it supports


It doesn’t support media queries.
media queries.

CSS3 is the latest evolution which is


CSS is relatively slower than CSS3.
much faster than its previous iterations.

CSS3 is backwards compatible even with


CSS isn’t compatible with CSS3.
CSS.

It does not support 3D We can create 3D transformations,


transformations and animations. transitions, and animations using CSS3.

It offers exciting new ways to play with


Css has old and standard colors.
colors.

Jhalnath Chapagain | [SCHOOL]


Page |5

Inserting CSS inside webpage


CSS can be added to HTML documents in 3 ways:
 Inline CSS
 Internal CSS
 External CSS
Inline CSS
Inline styles are used to apply the unique style rules to an element by putting the CSS rules
directly into the start tag. It can be attached to an element using the style attribute.

The style attribute includes a series of CSS property and value pairs. Each "property: value" pair
is separated by a semicolon (;), just as you would write into an embedded or external style sheets.
But it needs to be all in one line i.e. no line break after the semicolon, as shown here:

<h1 style="color:red; font-size:30px;">This is a heading</h1>


<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

Using the inline styles are generally considered as a bad practice. As style rules are embedded
directly inside the HTML tag, it causes the presentation to become mixed with the content of the
document; which makes the code hard to maintain and negates the purpose of using CSS.

Internal CSS
An internal CSS is used to define a style for a single HTML page. An internal CSS is defined in the
<head> section of an HTML page, within a <style> element. Comparatively, this looks neater,
simple, elegant and organized because of the separate styling and tagging. Here, Redundancy is
removed but the idea of separation of concerns still lost.

<html>
<head><title> Example of internal css</title>
<style>
body{
background-color: powderblue;
}
h1{
color: blue;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>

Jhalnath Chapagain | [SCHOOL]


Page |6

External CSS

External stylesheets are used to allow people to format and recreate their web pages on an
entirely different document. This effectively means that you can have two or more workplaces,
as more than one stylesheet can be embedded inside the document, thereby providing you with
a much cleaner workspace. The stylesheet would be easily accessible in this case which is a huge
advantage, but on the other hand, any changes done in the external sheet would affect all the
parent sheets it is linked to.

Before linking, we need to create a style sheet first


body {
background: lightyellow;
font: 18px Arial, sans-serif;
}
h1 {
color: orange;
}
Let’s save it as “style.css”.

An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag
goes inside the <head> section, as you can see in the following example:

<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

Jhalnath Chapagain | [SCHOOL]


Page |7

CSS selectors
 element Selector, id Selector and class Selector
element selector
The element selector selects HTML elements based on the element name.
p{
text-align: center;
color: red;
}

id Selector
The id selector uses the id attribute of an HTML element to select a specific 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;
}

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.

. center {
text-align: center;
color: red;
}

CSS Properties
Text Properties
Property Description Values
color Sets the color of a text RGB, hex, keyword
line-height Sets the distance between lines normal, number, length, %
Increase or decrease the space between
letter-spacing normal, length
characters
text-align Aligns the text in an element left, right, center, justify
text- none, underline, overline, line-
Adds decoration to text
decoration through

Jhalnath Chapagain | [SCHOOL]


Page |8

Indents the first line of text in an


text-indent length, %
element
text- none, capitalize, uppercase,
Controls the letters in an element
transform lowercase
text-direction Change the text direction of an element rtl ,ltr
word-spacing Specify the space between the words normal, length
text-shadow Adds the shadow to the text length

Font Properties

Property Description Values


Sets all the font font-style, font-variant, font-weight, font-size/line-
font properties in one height, font-family, caption, icon, menu, message-
declaration box, small-caption, status-bar, inherit
Specifies the font family
font-family family-name, generic-family, inherit
for text
Specifies the font size of xx-small, x-small, small, medium, large, x-large,
font-size
text xx-large, smaller, larger, length, %, inherit
Specifies the font style
font-style normal, italic, oblique, inherit
for text
Specifies whether or not
font- a text should be
normal, small-caps, inherit
variant displayed in a small-caps
font
normal, bold, bolder, lighter,
font- Specifies the weight of a
100, 200, 300, 400, 500, 600, 700, 800, 900, inherit
weight font
Careful, many of these are not supported!

Colors and Background


background-color
The background-color property specifies the background color of an element.
Ex:
body {background-color: blue;}

Jhalnath Chapagain | [SCHOOL]


Page |9

background-image
The background-image property specifies an image to use as the background of an element.
Ex:
body {background-image: url("flower.gif");}

background-repeat
By default, the background-image property repeats an image both horizontally and vertically.
Ex:
body {background-image: url("rock.png"); background-repeat: no-repeat;}

Values:
 no-repeat
 repeat
 repeat-x
 repeat-y
 space

background-attachment
The background-attachment property sets whether a background image scrolls with the rest of
the page, or is fixed.
Ex:
body {background-image: url("tree.gif");
background-repeat: no-repeat;
background-attachment: fixed;
}

background-position
The background-position property sets the starting position of a background image..
Ex:
body {
background-image: url(‘glass.gif');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
}

Jhalnath Chapagain | [SCHOOL]


P a g e | 10

background-size
It specifies the size of a background-image.
Ex:
div {
background: url(mountain.jpg);
background-repeat: no-repeat;
background-size: 300px 100px;
}

background (shorthand property)


It sets different background properties in one declaration:
Ex:
body {
background: lightblue url("img_tree.gif") no-repeat fixed center;
}

Color in css
In CSS, a color can be specified by using a predefined color name as well as using RGB values, HEX
values, HSL values, RGBA values, and HSLA values:
Ex.
<h1 style="border:2px solid Violet;">Hello World</h1>
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>

Box Model in CSS


The CSS box model is a container that contains multiple properties including borders, margin,
padding, and the content itself. It is used to create the design and layout of web pages. The CSS
box model is essentially a box that wraps around every HTML element.

It is used to develop the design and structure of a web page. It can be used as a set of tools to
personalize the layout of different components. According to the CSS box model, the web
browser supplies each element as a square prism.

Jhalnath Chapagain | [SCHOOL]


P a g e | 11

Properties of the Box Model


There are several properties in the CSS box model. They are as mentioned below:

Content
The content area, bounded by the content edge, contains the "real" content of the element, such
as text, an image, or a video player. Its dimensions are the content width (or content-box width)
and the content height (or content-box height). It often has a background color or background
image.

Padding
The padding area is the space around the content area and within the border-box. The thickness
of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left,
and shorthand padding properties.

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.

Jhalnath Chapagain | [SCHOOL]


P a g e | 12

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.

Demonstration of the box model:

<!DOCTYPE html>
<html>
<head><title>Demo</title>
<style>
div {
background-color: lightgrey;
width: 300px;
border: 25px solid green;
padding: 35px;
margin: 15px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<div>This text is the content of the box. We have added a 35px padding, 15px margin and a 25px
green border. </div>
</body>
</html>

CSS Position
The position property specifies the type of positioning method used for an element.
Possible values are: static, relative, fixed, absolute and sticky.
a. Static:
Every element has a static position by default, so the element will stick to the normal page flow.
So if there is a left/right/top/bottom/z-index set then there will be no effect on that element.
p{
position: static;
border: 3px solid green;
}

Jhalnath Chapagain | [SCHOOL]


P a g e | 13

b. Relative:
An element’s original position remains in the flow of the document, just like the static value. But
now left/right/top/bottom/z-index will work. The positional properties “nudge” the element
from the original position in that direction.
h2 {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}

c. Absolute:
The element is removed from the flow of the document and other elements will behave as if
it’s not even there whilst all the other positional properties will work on it. An element with
position: absolute; is positioned relative to the nearest positioned ancestor.
div {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}

d. Fixed:
The element is removed from the flow of the document like absolutely positioned elements.
In fact they behave almost the same, only fixed positioned elements are always relative to
the document, not any particular parent, and are unaffected by scrolling.
div {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #73AD21;
}

Jhalnath Chapagain | [SCHOOL]


P a g e | 14

e. Sticky:
the element is treated like a relative value until the scroll location of the viewport reaches a
specified threshold, at which point the element takes a fixed position where it is told to stick.
div{
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
}

CSS Display
Every element on a web page is a rectangular box. The display property in CSS determines just
how that rectangular box behaves.
Use of some different display values:
p.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display: block;}
p.ex4 {display: inline-block;}

Value Description

None The element is completely removed

Inline Displays an element as an inline element (like <span>). Any height and
width properties will have no effect

Block Displays an element as a block element (like <p>). It starts on a new line,
and takes up the whole width

contents Makes the container disappear, making the child elements children of the
element the next level up in the DOM

inline-block Displays an element as an inline-level block container. The element itself is


formatted as an inline element, but you can apply height and width values.

Jhalnath Chapagain | [SCHOOL]


P a g e | 15

CSS List
Lists are very helpful in conveying a set of either numbered or bullet
points. 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.
 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.
 The list-style-image specifies an image for the marker rather than
a bullet point or number.
 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.
The list-style-type Property for unordered list
 none-n/a
 disc (default)- A filled-in circle
 circle- An empty circle
 square- A filled-in square
The list-style-type Property for ordered list
Value Description Example

Decimal Number 1,2,3,4,5

decimal-leading-zero 0 before the number 01, 02, 03, 04, 05

lower-alpha Lowercase alphanumeric characters a, b, c, d, e

upper-alpha Uppercase alphanumeric characters A, B, C, D, E

lower-roman Lowercase Roman numerals i, ii, iii, iv, v

upper-roman Uppercase Roman numerals I, II, III, IV, V

lower-greek The marker is lower-greek alpha, beta, gamma

Jhalnath Chapagain | [SCHOOL]


P a g e | 16

CSS Tables
A table in CSS is used to apply the various styling properties to the HTML Table elements to
arrange the data in rows and columns, or possibly in a more complex structure in a properly
organized manner.
The look of an HTML table can be greatly improved with CSS:
CSS Table Style

Horizontal Dividers
we can add the border-bottom property to <th> and <td> for horizontal dividers:
th, td {
border-bottom: 1px solid #ddd;
}

Hoverable Table
Use the :hover selector on <tr> to highlight table rows on mouse over:
tr:hover {background-color: coral;}

Striped Tables
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;}

Table Color
The example below specifies the background color and text color of <th> elements:
th {
background-color: #04AA6D;
color: white;
}

Table Width and Height


The width and height of a table are defined by the width and height properties.
To create a table that should only span half the page, use width: 50%:
table {
width: 50%;
}

Jhalnath Chapagain | [SCHOOL]


P a g e | 17

Table Borders
Collapse Table Borders
The border-collapse property sets whether the table borders should be collapsed into a single
border:
table {
border-collapse: collapse;
}
If you only want a border around the table, only specify the border property for <table>:
table {
border: 1px solid;
}

CSS Table Alignment


Horizontal Alignment
The text-align property sets the horizontal alignment (like left, right, or center) of the content in
<th> or <td>.
td {
text-align: center;
}
Vertical Alignment
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;
}

Responsive Table
A responsive table will display a horizontal scroll bar if the screen is too small to display the full
content.
Add a container element (like <div>) with overflow-x:auto around the <table> element to make
it responsive:

<div style="overflow-x:auto;">
<table>
... table content ...
</table>
</div>

Jhalnath Chapagain | [SCHOOL]


P a g e | 18

CSS Media Queries

CSS Media queries are a way to target browser by certain characteristics, features, and user
preferences, then apply styles or run other code based on those things. Perhaps the most
common media queries in the world are those that target particular viewport ranges and apply
custom styles, which birthed the whole idea of responsive design.

Syntax:
@media [media-type] ([media-feature]) {
/* Styles! */
}

Media-type:
all
Suitable for all devices.
print
Intended for paged material and documents viewed on a screen in print preview mode.
screen
Intended primarily for screens.

Media features:
a. scripting
The scripting CSS media feature can be used to test whether scripting (such as JavaScript) is
available.
HTML:
<p class="script-enabled">You have scripting enabled! :-)</p>
CSS:
@media (scripting: enabled) {
.script-enabled {
color: red;
}
}
The scripting feature is specified as a keyword value chosen from the list below.

none
Scripting is completely unavailable on the current document.

initial-only
Scripting is enabled during the initial page load, but not afterwards.

Jhalnath Chapagain | [SCHOOL]


P a g e | 19

enabled
Scripting is supported and active on the current document.

b. width
The width CSS media feature can be used to test the width of the viewport (or the page box, for
paged media). The width feature is specified as a <length> value representing the viewport width.
It is a range feature, meaning that you can also use the prefixed min-width and max-width
variants to query minimum and maximum values, respectively.
HTML:
<div>Watch this element as you resize your viewport's width. </div>
/* Exact width */
@media (width: 120px) {
div {
color: red;
}
}
CSS:
/* Minimum width */
@media (min-width: 50px) {
div {
background: yellow;
}
}

/* Maximum width */
@media (max-width: 300px) {
div {
border: 2px solid blue;
}
}

c. hover
The hover CSS media feature can be used to test whether the user's primary input mechanism
can hover over elements.
HTML:
<a href="#">Try hovering over me! </a>
CSS:
a: hover {/* default hover effect */
color: black;
background: yellow;
}

Jhalnath Chapagain | [SCHOOL]


P a g e | 20

@media (hover: hover) {/* when supported */


a: hover {
color: white;
background: black;
}
}

d. Resolution
The resolution CSS media feature can be used to test the pixel density of the output device.

HTML
<p>This is a test of your device's pixel density.</p>

CSS
/* Exact resolution */
@media (resolution: 150dpi) {
p{
color: red;
}
}

/* Minimum resolution */
@media (min-resolution: 72dpi) {
p{
text-decoration: underline;
}
}

/* Maximum resolution */
@media (max-resolution: 300dpi) {
p{
background: yellow;
}
}
There are lots of other things we can target. That might be screen resolution, device orientation,
operating system preference, or even more among a whole thing we can query and use to style
content.

Jhalnath Chapagain | [SCHOOL]


P a g e | 21

Logical operators
The logical operators not, and, and only can be used to compose a complex media query. You can
also combine multiple media queries into a single rule by separating them with commas.

and
Used for combining multiple media features together into a single media query, requiring each
chained feature to return true for the query to be true. It is also used for joining media features
with media types.

not
Used to negate a media query, returning true if the query would otherwise return false. If present
in a comma-separated list of queries, it will only negate the specific query to which it is applied.
If you use the not operator, you must also specify a media type.

only
Applies a style only if an entire query matches. It is useful for preventing older browsers from
applying selected styles. When not using only, older browsers would interpret the query screen
and (max-width: 500px) as screen, ignoring the remainder of the query, and applying its styles on
all screens. If you use the only operator, you must also specify a media type.

, (comma)
Commas are used to combine multiple media queries into a single rule. Each query in a comma-
separated list is treated separately from the others Thus, if any of the queries in a list is true, the
entire media statement returns true. In other words, lists behave like a logical or operator.

Converting Image design to HTML (Slicing)


We have to work on numerous things to make a website. And, Image Design to HTML process is
one of those aspects we handle for creating an engaging and robust website. It provides us with
a way to craft unmatched quality websites for business. Therefore, businesses are choosing this
process to create unique websites that stand out from others.

The following are a few benefits of Image Design to HTML conversion that show why it is
necessary.

 Pixel-perfect, standards-compliant, and quality code.


 Unique and customized websites.
 Responsive and fast-loading websites.
 Optimized code providing SEO-friendly websites.

Jhalnath Chapagain | [SCHOOL]

You might also like