Scribd
Upload
6 views

html_css

Uploaded by

Deeksha Baweja
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
6 views

html_css

Uploaded by

Deeksha Baweja
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 40

HTML

Features of HTML:
HTML is the most common used language to write web pages. It has recently
gained popularity due to its advantages such as: -
1. It is the language which can be easily understood and can be modified.
2. Effective presentations can be made with the HTML with the help of its all
formatting tags.
3. It provides the more flexible way to deign web pages along with the text.
4. Links can also be added to the web pages so it helps the readers to browse the
information of their interest.
5. You can display HTML documents on any platforms such as Macintosh,
Windows and Linux etc.
6. Graphics, videos and sounds can also be added to the web pages which give
an extra attractive look to your web pages.
HTML Documents

All HTML documents must start with a document type declaration: <!
DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>

HTML Paragraphs

HTML paragraphs are defined with the <p> tag:


<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

HTML Line Breaks

• HTML defines a line break with the use of <br/> tag

• <br> tag is a empty tag, that means this tag doesn’t need ending tag.

• It helps the content to go to the next line.

• More than one <br> Tag can be used at once to give bigger space
between two lines.

HTML Attributes

 All HTML elements can have attributes


 Attributes provide additional information about elements
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"

1. The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the
page the link goes to:

<a href="https://google,com">google</a>

2. src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute
specifies the path to the image to be displayed:

<img src="img_girl.jpg">

There are two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.


Example: src="https://www.brightinstitue.com/images/img_girl.jpg".

Notes: External images might be under copyright. If you do not get permission
to use it, you may be in violation of copyright laws. In addition, you cannot
control external images; it can suddenly be removed or changed.
2. Relative URL - Links to an image that is hosted within the website. Here, the
URL does not include the domain name. If the URL begins without a slash, it
will be relative to the current page. Example: src="img_girl.jpg". If the URL
begins with a slash, it will be relative to the domain. Example:
src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you
change domain.

3. width and height Attributes

The <img> tag should also contain the width and height attributes, which
specify the width and height of the image (in pixels):

<img src="img_girl.jpg" width="500" height="600">

4. The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an
image, if the image for some reason cannot be displayed. This can be due to a
slow connection, or an error in the src attribute, or if the user uses a screen
reader.

<img src="img_girl.jpg" alt="Girl with a jacket">

<img src="img_typo.jpg" alt="Girl with a jacket">

5. The style Attribute

The style attribute is used to add styles to an element, such as color, font, size,
and more.

Example
<p style="color:red;">This is a red paragraph.</p>
6. The lang Attribute

You should always include the lang attribute inside the <html> tag, to declare
the language of the Web page. This is meant to assist search engines and
browsers.

The following example specifies English as the language:


<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>

Country codes can also be added to the language code in the lang attribute. So,
the first two characters define the language of the HTML page, and the last two
characters define the country.

The following example specifies English as the language and United States as
the country:

<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
7. The title Attribute

The title attribute defines some extra information about an element.

The value of the title attribute will be displayed as a tooltip when you mouse
over the element:

Example
<p title="I'm a tooltip">This is a paragraph.</p>

HTML Headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important
heading.

Example
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Headings Are Important

Search engines use the headings to index the structure and content of your web
pages.

Users often skim a page by its headings. It is important to use headings to show
the document structure.

<h1> headings should be used for main headings, followed by <h2> headings,
then the less important <h3>, and so on.

Bigger Headings

Each HTML heading has a default size. However, you can specify the size for
any heading with the style attribute, using the CSS font-size property:

Example
<h1 style="font-size:60px;">Heading 1</h1>

HTML Styles

The HTML style attribute is used to add styles to an element, such as color,
font, size, and more.

Example

I am Red

I am Blue

I am Big
The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.

Background Color

The CSS background-color property defines the background color for an HTML
element.

Example

Set the background color for a page to powder blue:

<body style="background-color:powderblue;">

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

</body>

Set background color for two different elements:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>


<p style="background-color:tomato;">This is a paragraph.</p>

</body>
Text Color

The CSS color property defines the text color for an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts

The CSS font-family property defines the font to be used for an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

Text Alignment

The CSS text-align property defines the horizontal text alignment for an HTML
element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
The class-
• The class attribute is used to associate an element with a style sheet, and
specifies the class of element.
 Assigns a class name to an element; any number of elements may share
the same class name or names
 Mostly used for styling with style sheets.
 Example:-
 <h2 class="city">London</h2>

HTML Formatting Elements

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

Example
<b>This text is bold</b>
The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.
Example
<strong>This text is important!</strong>

HTML <i> and <em> Elements

The HTML <i> element defines a part of text in an alternate voice or mood. The
content inside is typically displayed in italic.

Tip: The <i> tag is often used to indicate a technical term, a phrase from
another language, a thought, a ship name, etc.

Example
<i>This text is italic</i>
The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.

Tip: A screen reader will pronounce the words in <em> with an emphasis,
using verbal stress.

Example
<em>This text is emphasized</em>
HTML <small> Element

The HTML <small> element defines smaller text:

Example
<small>This is some smaller text.</small>
HTML <mark> Element

The HTML <mark> element defines text that should be marked or highlighted:

Example
<p>Do not forget to buy <mark>milk</mark> today.</p>
HTML <del> Element

The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:

Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element

The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:

Example
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
HTML <sub> Element

The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H2O:

Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element

The HTML <sup> element defines superscript text. Superscript text appears
half a character above the normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like WWW[1]:

Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Text Formatting Elements
Tag Description

<b> Defines bold text

<em> Defines emphasized text

<i> Defines a part of text in an alternate voice or mood

<small> Defines smaller text

<strong> Defines important text

<sub> Defines subscripted text

<sup> Defines superscripted text

<ins> Defines inserted text

<del> Defines deleted text

<mark> Defines marked/highlighted text

HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML",
"CSS", "Mr.", "Dr.", "ASAP", "ATM".

Marking abbreviations can give useful information to browsers, translation


systems and search-engines.

Tip: Use the global title attribute to show the description for the
abbreviation/acronym when you mouse over the element.

Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded
in 1948.</p>
HTML <address> for Contact Information

The HTML <address> tag defines the contact information for the author/owner
of a document or an article.

The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.

The text in the <address> element usually renders in italic, and browsers will
always add a line break before and after the <address> element.

Example
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML Comments

HTML comments are not displayed in the browser, but they can help document
your HTML source code.

HTML Comment Tag

You can add comments to your HTML source by using the following syntax:

<!-- Write your comments here -->


Notice that there is an exclamation point (!) in the start tag, but not in the end
tag.

Note: Comments are not displayed by the browser, but they can help document
your HTML source code.

HTML Color
HTML colors are specified with predefined color names, or with RGB, HEX,
HSL, RGBA, or HSLA values.
Color Names

In HTML, a color can be specified by using a color name:

Tomato

Orange

DodgerBlue

MediumSeaGreen

Gray

SlateBlue
Violet
Background Color

You can set the background color for HTML elements:

Hello World

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.

Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color

You can set the color of borders:

Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL
values, RGBA values, and HSLA values.

The following three <div> elements have their background color set with RGB,
HEX, and HSL values:

rgb(255, 99, 71)

#ff6347

hsl(9, 100%, 64%)

The following two <div> elements have their background color set with RGBA
and HSLA values, which add an Alpha channel to the color (here we have 50%
transparency):, 100%, 64%, 0.5)

Example
<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>

HTML Style Tags

Tag Description
<style> Defines style information for an HTML document

<link> Defines a link between a document and an external resource

HTML Links - The target Attribute

By default, the linked page will be displayed in the current browser window. To
change this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was


clicked
 _blank - Opens the document in a new window or tab
 _parent - Opens the document in the parent frame
 _top - Opens the document in the full body of the window

Example

Use target="_blank" to open the linked document in a new browser window or


tab:

<a href="https://brightinstitute.com/" target="_blank">Visit Bright institute</a>

HTML Links - Use an Image as a Link

To use an image as a link, just put the <img> tag inside the <a> tag:

Example
<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;">
</a>
Button as a Link

To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click
of a button:

Example
<button onclick="document.location='default.asp'">HTML Tutorial</button

HTML Link Tags

Tag Description

<a> Defines a hyperlink

For a complete list of all available HTML tags, visit our HTML Tag Reference.

HTML Tables

Define an HTML Table

A table in HTML consists of table cells inside rows and columns.

Example

A simple HTML table:

<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>

HTML Table Tags

Tag Description

<table> Defines a table

<th> Defines a header cell in a table

<tr> Defines a row in a table

<td> Defines a cell in a table

<caption> Defines a table caption


<colgroup> Specifies a group of one or more columns in a table for formatting

<col> Specifies column properties for each column within a <colgroup> element

<thead> Groups the header content in a table

<tbody> Groups the body content in a table

<tfoot> Groups the footer content in a table

HTML Lists

HTML lists allow web developers to group a set of related items in lists.

Example

An unordered HTML list:

 Item
 Item
 Item
 Item

An ordered HTML list:

1. First item
2. Second item
3. Third item
4. Fourth item

Unordered HTML List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles) by default:

Example
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

Try it Yourself »

Ordered HTML List

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers by default:

Example
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

MULTIMEDIA

HTML5 has introduced two new multimedia tags, AUDIO and VIDEO, for displaying the audio and
video streams on a Web page.

You can play the multimedia files, which are stored in your local computer, on the Web page by
specifying their location. The src attribute is used to specify the multimedia file to play it on the Web
page.
If the Web browser does not support AUDIO and VIDEO tags, then the text defined between the
starting and the closing tags of these tags are displayed on the Web page.

Attributes of AUDIO Tag

The AUDIO tag of HTML5 supports only three audio file formats i.e. .oog, .mp3, .wav

Embedding Video

• Here is the simplest form of embedding a video file in your webpage −

• <video src = "foo.mp4" width = "300" height = "200" controls> Your browser does not
support the element. </video>

Embedding Audio

• HTML5 supports <audio> tag which is used to embed sound content in an HTML or XHTML
document as follows.

• <audio src = “music.wav" controls autoplay> Your browser does not support the element.
</audio>
HTML Styles – CSS
CSS Introduction


Cascading Style Sheets, fondly referred to as CSS, is a simply designed


language intended to simplify the process of making web pages presentable.
CSS allows you to apply styles to web pages. More importantly, CSS enables
you to do this independently of the HTML that makes up each web page. It
describes how a webpage should look: it prescribes colours, fonts, spacing,
and much more. In short, you can make your website look however you want.
CSS lets developers and designers define how it behaves, including how
elements are positioned in the browser.
While HTML uses tags, CSS uses rulesets. CSS is easy to learn and
understand, but it provides powerful control over the presentation of an HTML
document.

Why CSS?
 CSS saves time: You can write CSS once and reuse the same sheet
in multiple HTML pages.
 Easy Maintenance: To make a global change simply change the
style, and all elements in all the webpages will be updated
automatically.
 Search Engines: CSS is considered a clean coding technique, which
means search engines won’t have to struggle to “read” its content.
 Superior styles to HTML: CSS has a much wider array of attributes
than HTML, so you can give a far better look to your HTML page in
comparison to HTML attributes.
 Offline Browsing: CSS can store web applications locally with the
help of an offline cache. Using this we can view offline websites.
CSS versions release years:

CSS Syntax:
CSS comprises style rules that are interpreted by the browser and then applied
to the corresponding elements in your document. A style rule set consists of a
selector and declaration block.
1. Selector: A selector in CSS is used to target and select specific
HTML elements to apply styles to.
2. Declaration: A declaration in CSS is a combination of a property
and its corresponding value.
Selector -- h1
Declaration -- {color:blue;font size:12px;}
 The selector points to the HTML element you want to style.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value,
separated by a colon.
For example :
CSS
selector {
property1: value1;
property2: value2;
}

CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Here is a more specific example: In the following example all p elements
will be centre-aligned, with a blue text colour:
CSS
p{
color: blue;
text-align: center;
}

CSS can be added to HTML documents in 3 ways:

 Inline - by using the style attribute inside HTML elements


 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file

The most common way to add CSS, is to keep the styles in external CSS files.
However, in this tutorial we will use inline and internal styles, because this is
easier to demonstrate, and easier for you to try it yourself.

Types of CSS (Cascading Style Sheet)




Cascading Style Sheet (CSS) is used to set the style in web pages that
contain HTML elements. It sets the background color, font-size, font-family,
color, … etc. properties of elements on a web page.
There are three types of CSS which are given below:
 Inline CSS
 Internal or Embedded CSS
 External CSS
Priorities of CSS: Inline CSS has the highest priority, then comes
Internal/Embedded followed by External CSS which has the least priority.
Multiple style sheets can be defined on one page. For an HTML tag, styles can
be defined in multiple style types and follow the below order.
 As Inline has the highest priority, any styles that are defined in the
internal and external style sheets are overridden by Inline styles.
 Internal or Embedded stands second in the priority list and overrides
the styles in the external style sheet.
 External style sheets have the least priority. If there are no styles
defined either in inline or internal style sheet then external style sheet
rules are applied for the HTML tags.
CSS is the foundation of webpages and is used for webpage development by
styling websites and web apps.
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.

An inline CSS uses the style attribute of an HTML element.

The following example sets the text color of the <h1> element to blue, and the
text color of the <p> element to red:

Example
<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>


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.

The following example sets the text color of ALL the <h1> elements (on that
page) to blue, and the text color of ALL the <p> elements to red. In addition,
the page will be displayed with a "powderblue" background color:

Example
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

External CSS

An external style sheet is used to define the style for many HTML pages.

To use an external style sheet, add a link to it in the <head> section of each
HTML page:

Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>

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

</body>
</html>

The external style sheet can be written in any text editor. The file must not
contain any HTML code, and must be saved with a .css extension.

Here is what the "styles.css" file looks like:

"styles.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p{
color: red;
}

Tip: With an external style sheet, you can change the look of an entire web site,
by changing one file!

CSS Colors, Fonts and Sizes

Here, we will demonstrate some commonly used CSS properties. You will learn
more about them later.

The CSS color property defines the text color to be used.

The CSS font-family property defines the font to be used.

The CSS font-size property defines the text size to be used.

Example

Use of CSS color, font-family and font-size properties:

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p{
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border

The CSS border property defines a border around an HTML element.

Tip: You can define a border for nearly all HTML elements.

Example

Use of CSS border property:

p{
border: 2px solid powderblue;
}

CSS Padding

The CSS padding property defines a padding (space) between the text and the
border.

Example

Use of CSS border and padding properties:

p{
border: 2px solid powderblue;
padding: 30px;
}

CSS Margin

The CSS margin property defines a margin (space) outside the border.

Example

Use of CSS border and margin properties:

p{
border: 2px solid powderblue;
margin: 50px;
}

CSS Colors


CSS Color property is used to set the color of HTML elements. This property is
used to set font color, background color, etc. The color of an element can be
defined in the following ways:
Built-In Color

 RGB Format
 RGBA Format
 Hexadecimal Notation
 HSL
 HSLA
Built-In Color: These are a set of predefined colors which are used by its
name. For example: red, blue, green etc.
Syntax:
h1 {
color: color-name;
}
RGB Format: The RGB(Red, Green, Blue) format is used
to define the color of an HTML element by specifying
the R, G, B values range between 0 to 255. For
example: RGB value of Red color is (255, 0, 0), Green
color is (0, 255, 0), Blue color is (0, 0, 255) etc.
Syntax:
h1 {
color: rgb(R, G, B);
}

RGBA Format: The RGBA format is similar to the RGB, but the difference is
RGBA contains A (Alpha) which specifies the transparency of elements. The
value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and
1.0 represents not transparent.
Syntax:
h1 {
color:rgba(R, G, B, A);
}
Example:
 html
<!DOCTYPE html>
<html>

<head>
<title>CSS RGBA color property</title>
<style>
h1 {
color: rgba(0, 153, 0, 0.5);
text-align: center;
}
</style>
</head>

<body>
<h1>
hello
</h1>
</body>

</html>

Output:
Hexadecimal Notation: The hexadecimal notation begins with # symbol
followed by 6 characters each ranging from 0 to F. For example: Red #FF0000,
Green #00FF00, Blue #0000FF etc.
Syntax:
h1 {
color:#(0-F)(0-F)(0-F)(0-F)(0-F)(0-F);
}
Example:
 html
<!DOCTYPE html>
<html>

<head>
<title>CSS hex property</title>
<style>
h1 {
color: #009900;
text-align: center;
}
</style>
</head>

<body>
<h1>
hello
</h1>
</body>

</html>
HSL: HSL stands for Hue, Saturation, and Lightness respectively. This format
uses the cylindrical coordinate system.
 Hue: Hue is the degree of the color wheel. Its value lies between 0 to
360 where 0 represents red, 120 represents green and 240 represents
blue color.
 Saturation: It takes a percentage value, where 100% represents
completely saturated, while 0% represents completely unsaturated
(gray).
 Lightness: It takes percentage value, where 100% represents white,
while 0% represents black.
Syntax:
h1 {
color:hsl(H, S, L);
}
Example:
 html
<!DOCTYPE html>
<html>

<head>
<title>CSS hsl color property</title>
<style>
h1 {
color: hsl(120, 100%, 30%);
text-align: center;
}
</style>
</head>

<body>
<h1>
hello
</h1>
</body>

</html>

Output:

HSLA:
The HSLA color property is similar to HSL property, but the difference is
HSLA contains A (Alpha) which specifies the transparency of elements. The
value of alpha lies between 0.0 to 1.0 where 0.0. represents fully transparent and
1.0 represents not transparent.
Syntax:
h1 {
color:hsla(H, S, L, A);
}
Example:
 html
<!DOCTYPE html>
<html>

<head>
<title>CSS hsla color property</title>
<style>
h1 {
color: hsla(120, 100%, 50%, 0.50);
text-align: center;
}
</style>
</head>
<body>
<h1>
hello
</h1>
</body>

</html>

Border Color: It is used to set the border color of an element. Border-style is


used to set the border type.
Syntax:
h1 {
border-style:solid/dashed/dotted
border-color:color_name;
}
List of Colors: Following is the list of a few CSS colors.
Color
Name Hex(RGB) Decimal(RGB) Color

Red FF0000 255, 0, 0

Pink FFC0CB 255, 192, 203

Orange FFA500 255, 165, 0

Yellow FFFF00 255, 255, 0

Violet EE82EE 238, 130, 238


Color
Name Hex(RGB) Decimal(RGB) Color

Green 008000 0, 128, 0

Aqua 00FFFF 0, 255, 255

Blue 0000FF 0, 0, 255

Brown A52A2A 165, 42, 42

White FFFFFF 255, 255, 255

Gray 808080 128, 128, 128

Black 000000 0, 0, 0

Properties of CSS Borders:


1. Border Style
 CSS border-top style Property
 border-right-style Property
 border-bottom-style Property
 border-left-style Property
2. Border Width
 border-top-width Property
 border-right-width Property
 border-bottom-width Property
 border-left-width Property
3. Border Color
 border-top-color Property
 border-right-color Property
 border-bottom-color Property
 border-left-color Property
4. Border individual sides
5. Border radius property
1. Border Style: The border-style property specifies the type of border. None of
the other border properties will work without setting the border style.
Following are the types of borders:
 dotted – It describes a dotted border
 dashed – It describes a dashed border
 solid – It describes a solid border
 double – It describes a double border
 groove – It describes a 3D grooved border.
 ridge – It describes a 3D ridged border.
 inset – It describes a 3D inset border.
 outset – It describes a 3D outset border.
 none – It describes no border
 hidden – It describes the hidden border

2. Border Width: Border width sets the width of the border. The width of the
border can be in px, pt, cm or thin, medium, and thick.

3. Border Color: This property is used to set the color of the border. Color can
be set using the color name, hex value, or RGB value. If the color is not
specified border inherits the color of the element itself.

4. Border individual sides: Using border property, we can provide width, style,
and color to all the borders separately for that we have to give some values to all
sides of the border.
Syntax:
border-top-style : dotted;
border-bottom-width: thick;
border-right-color: green;
etc.

CSS Basic Properties

Here are some basic CSS properties to work with.

 Text Properties
 List Properties
 Border Properties
 Font 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


letter-spacing normal, length
between characters

text-align Aligns the text in an element left, right, center, justify

text- none, underline, overline,


Adds decoration to text
decoration line-through

Indents the first line of text in an


text-indent length, %
element

text- Controls the letters in an none, capitalize, uppercase,


transform element lowercase

For more information, visit the w3schools.com page on CSS Text.


List Properties

Property Description Values

Sets all the properties for a list-style-type, list-style-position,


list-style
list in one declaration list-style-image, inherit

list-style- Specifies an image as the


URL, none, inherit
image list-item marker

list-style- Specifies where to place the


inside, outside, inherit
position list-item marker

none, disc, circle, square,


decimal, decimal-leading-zero,
list-style- Specifies the type of list- armenian, georgian, lower-alpha,
type item marker upper-alpha, lower-greek,
lower-latin, upper-latin, lower-
roman, upper-roman, inherit

Border Properties

Property Description Values

Sets all the border


border-width, border-style, border-
border properties in one
color
declaration

Sets all the bottom


border- border-bottom-width, border-bottom-
border properties in
bottom style, border-bottom-color
one declaration

border- Sets the color of the


border-color
bottom-color bottom border

border- Sets the style of the


border-style
bottom-style bottom border

border- Sets the width of the


border-width
bottom-width bottom border
Sets the color of the color_name, hex_number,
border-color
four borders rgb_number, transparent, inherit

Sets all the left border


border-left-width, border-left-style,
border-left properties in one
border-left-color
declaration

border-left- Sets the color of the


border-color
color left border

border-left- Sets the style of the


border-style
style left border

border-left- Sets the width of the


border-width
width left border

Sets all the right


border-right-width, border-right-
border-right border properties in
style, border-right-color
one declaration

border-right- Sets the color of the


border-color
color right border

border-right- Sets the style of the


border-style
style right border

border-right- Sets the width of the


border-width
width right border

none, hidden, dotted, dashed, solid,


Sets the style of the
border-style double, groove, ridge, inset, outset,
four borders
inherit

Sets all the top border


border-top-width, border-top-style,
border-top properties in one
border-top-color
declaration

border-top- Sets the color of the


border-color
color top border

border-top- Sets the style of the


border-style
style top border

border-top- Sets the width of the border-width


width top border

Sets the width of the


border-width thin, medium, thick, length, inherit
four borders

Font Properties

Property Description Values

font-style, font-variant, font-weight,


Sets all the font
font-size/line-height, font-
Font properties in one
family, caption, icon, menu, message-
declaration
box, small-caption, status-bar, inherit

font- Specifies the font family


family-name, generic-family, inherit
family for text

xx-small, x-small, small, medium, large,


Specifies the font size of
font-size x-large, xx-large, smaller, larger, length,
text
%, 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,


100, 200, 300, 400, 500, 600, 700, 800,
font- Specifies the weight of a
900, inherit
weight font
Careful, many of these are not
supported!

You might also like