Please disable your adblock and script blockers to view this page

Search this blog

Tuesday 10 July 2018

Styling HTML elements using CSS

In this post, we'll learn about styling HTML elements using CSS code, CSS stands for Cascading Style Sheet. It is used for changing the look of HTML components on the page and is very important for designing a beautiful user interface. After this tutorial, you'll be able to learn the basics about CSS and can use it in any type of web application or technology to beautify components.



CSS can be used in HTML pages in 3 ways, Here we'll see how to style HTML elements.

Inline CSS

Inline CSS is used to decorate a single HTML element and makes use of style attributes. See this example of styling HTML paragraph tag using inline CSS

<!DOCTYPE html>
<html>
<body>

<p style="color:red;font-size:20px;font-weight:bold;">This is a Red bold Paragraph</p>
<p style="color:darkgreen;font-size:15px;font-style:italic;">This is a green italic Paragraph</p>

</body>
</html>

Try this in our HTML Editor

Internal CSS

Internal CSS is used to decorate elements in a single HTML page. It is defined between <style> - </style> tag in <head> section. See this example of using internal CSS in an HTML page

<!DOCTYPE html>
<html>
<body>

<style>
p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
</style>

<p>This is a Red bold Paragraph with a border and background color</p>

</body>
</html>

Try this in our HTML Editor

External CSS

External CSS is used to decorate many HTML pages, Like for designing a website's template we use external CSS, In this, we create a file with .css extension and this file contains CSS code for all page elements.

A CSS file looks like this - style.css

p{
color:red;
font-size:20px;
font-weight:bold;
border: 1px solid blue;
padding: 50px;
background-color:yellow;
}
h1{
color:blue;
}

And this is how it is attached to the HTML page

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

<p>This is a Red bold Paragraph with a border and background color</p>
<h1>This is the H1 heading</h1>
</body>
</html>

After this information, you'll be able to understand the basics of CSS and get an idea of using styles with any other framework.

Cheers :) Happy Learning

You might also like:

No comments :
Labels: , , ,

Wednesday 4 July 2018

Skinning ADF Dialog box inside popup component

 In this post, we'll see how to change the look n feel of popup component by skinning the ADF dialog box using CSS code in ADF Application. Skinning plays important role in designing a better user interface, You can read more about ADF Skinning here.

Default ADF dialog component inside popup looks like this



And here I'll show you how to customize the look of dialog box using ADF Skin (CSS Code), I hope you all know about creating ADF Skin file. After creating the Skin file put the CSS script mentioned below in that file.

See ADF Skin code used to customize ADF dialog box.

/**Change background color and border color of dialog**/
af|dialog {
    background-color: White;
    border-color: #4267b2;
}

/**Change dialog header style**/
af|dialog::header, af|dialog::header-end, af|dialog::header-start, af|dialog::title {
    color: #FFFFFF;
    text-align: center;
    background-color: #45619d;
    background-image: none;
    font-family: Arial;
    padding: 3px;
}

/**Change dialog button styler**/
af|dialog af|button {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    width: 60px;
}

af|dialog af|button::link {
    background-color: #4267b2;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #4267b2 1.5px solid;
    font-family: Arial;
}

/**Set hover event properties for dialog button**/
af|dialog af|button:hover {
    background-color: red;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    width: 60px;
}

af|dialog af|button::link:hover {
    background-color: #528cff;
    text-align: center;
    vertical-align: middle;
    color: White;
    background-image: none;
    border: #528cff 1.5px solid;
    font-family: Arial;
}

/**Change default close icon of dialog**/
af|dialog::close-icon-style {
    background: none;
    background-image: url("../../lblue_cross_16.png");
    height: 17px;
}

af|dialog::close-icon-style:hover {
    background: none;
    background-image: url("../../red_cross_16.png");
    height: 17px;
}

And after skinning, ADF dialog box looks like this



Cheers :) Happy Learning

You might also like:

No comments :
Labels: , , , , ,

Friday 29 June 2018

HTML Tags and their usage

 

List of Basic HTML Tags

Here a list of HTML tags with their significant use is given. Read this and try in our online HTML editor. Learning Basic HTML helps in the development of Web Applications.





Tag NameTag CodePurpose
Start TagClose Tag
HTML<html></html>Starting & ending tag of page,
HEAD<head></head>Formatting information, and
content is not visible
BODY<body></body>Contains the visible information
HEADING<h1>,<h2>,<h3>,<h4>,<h5>,<h6></h1>,</h2>,</h3>,</h4>,</h5>,</h6>Largest to smallest heading
Bold Text<b>,<strong></b>,</strong>For bold text
Paragraph<p></p>For writing text in paragraphs
Line Break<br>Not neededInsert a line break
LIST<ol></ol>For Ordered List
LIST<ul></ul>For Unordered List
List Item<li></li>For component of list
IMAGE<img src="source">Not needed, </img>For inserting image in webpage
LINK<a href="url of page"></a>For Hyperlink
CENTER<center><center>For center alignment
TT<tt></tt>Typewriter like text
BLOCKQUOTE<blockquote></blockquote>Intends from both side
HR<hr></hr>Horizontal Rule
TABLE<table></table>Specifies the beginning and end of
a table
TABLE ROW<tr></tr>Specifies the beginning and end of
a table row
TABLE DATA<td></td>Specifies the beginning and end of
a table cell
TABLE HEAD<th></th>A normal cell with text that is bold
and centered
TABLE BORDER<table border="1"></table>Specifies the border for table
ITALIC<i></i>For italic text
LESS THAN&lt;Not neededFor < sign
GREATER THAN&gt;Not neededFor > sign
SUBSCRIPT<sub></sub>For subscript
SUPERSCRIPT<sup></sup>For superscript
JAVASCRIPT<script type="javascript"></script>For using javascript

Cheers :) Happy Learning

You might also like:

No comments :
Labels: ,
Subscribe to: Posts ( Atom )