12/21/2016

css-substrings-within-the-attribute-value-selector

Substring within the attribute value

In previous session I discussed about Attribute value selector, if you new then first see previous session because it is related to previous session.

In Attribute selector we can select whole string we already seen before,but now I am going to show you how can a part of attribute value and manipulate the element.


We can select substring in three ways 

  1. Finding sub-string at beginning of attribute value.  
         Using ^ symbol we can find a substring at the beginning of the string  into            the attribute value.
    2.Finding sub-string at end of attribute value. 

           Using $ symbol we can find a substring at the end of the string  into                     the attribute value.

    3.Finding sub-string at any place of attribute value. 

           Using * symbol we can find a substring at any place of the string  into                     the attribute value.


In previous session i already discussed html element, attribute,attribute value.Now again i am disusing.

 Html element:An HTML element is an individual component of an HTML document or web page, for example <h1>,<p>,<input> etc. this all are elements.

Html attribute:An HTML attribute is a modifier of an HTML element type. An attribute either modifies the default functionality of an element type or provides functionality to certain element types unable to function correctly without them. In HTML syntax, an attribute is added to an HTML start tag.
      
    This is optional to use attribute or attribute value but as per project requirement we can use one or more attribute, for example <img src="pic1.gif" alt="auther"> it use two attribute
src and alt .

 Attribute value:All attribute decorated with some value this is attribute value,suppose,src="pic1.gif" here pic1.gif is attribute value.



Program:


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        h1[class^="main"]{
            color:green;
        }

       [class*="main"]{
           border:2px solid red;
       }

       [class$="button"]:hover{
           background-color:green;
       }
      
    </style>
</head>
<body>
    <h1 class="main-heading">TTN TUTORIALS </h1>
    <img src="pic1.gif" class="main-icon" />
    <p class="Contain-main">Open Html file in notepad and see code</p>
    <input type="button" class="main-button" value="submit" />
    <input type="reset" value="Reset" />

</body>
</html>

output:


Download the project






Posted by at No comments:

12/18/2016

css-attribute-selector

Attribute selector

One of the most important selector is attribute selector.

Every element they can use attribute (id,class,alt all are attribute) as project requirement,developer can select this attribute and manipulate the HTML element using CSS.


What is attribute selector?

Attribute selector is used to select elements using their present uses attribute.
We can select Element using there attribute, whatever attribute they contain it doesn’t matter.

Example.
In your project there you use three <img> element some of them uses alt attribute .

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        img[alt]{
            border:3px solid red;
           
        }
        p[id]{
            color:red;
            font-size:50px;
        }
        h1[class]{
            color:#4800ff;
        }
    </style>
</head>
<body>
    <h1 class="head">Heading</h1>
    <img src="pic1.gif" alt="tajmahal"  />
    <img src="pic1.gif" />
    <img src="pic1.gif" alt="SoL" />
    <p id="#">TTN</p>
</body>

 When we use img[alt] it select <img> element which having alt attribute,

In above Example there are three <img> element, 1st and 3rd  <img> element contain alt attribute.When you run the program then 1st and 3rd  <img> element showing image with border.

also one <p> and one <h1> tag there after running they are also affected by the css code.

also

OutPut: 

Download the Project



Posted by at No comments:

12/17/2016

css-selectors-part1


Selectors


one of the most impotent topic is css selector.

I am sure that if you have a very good knowledge about selector then you can easily manipulate all other font-end language like Java Script,Jquery,Angular js, because all they are inherit selector from css selector.

using selector we can select HTML element and manipulate selected element with appropriate css property and value.

There are several different type selector in css.
  1. Universal selector.
  2. Id selector.
  3. Class selector.
  4. Element/Tag selector.




Universal selector(*)

To Universal selector select all element in a web page.

For example- In a web page there have a h1 tag and a p tag.


<h1 style="color:red;font-size:50px;">Universal Selector</h1>

<p>Open Html file in notepad and see code</p>

After that decorate with css.

<style type="text/css">
    * {
        border: 1px solid;
        color: #892121;
        padding-left: 3px;
     }

</style>

Output:

Id selector

Id selector select id attribute of HTML element.

Id name always unique in a HTML file.

In css file id selector decorate with '#' symbol.


Id is most higher precedence from other selector.

In a file id should be unique. If you use more then one id  name same then first one select and remaining duplicate id name value are not selected.

<!DOCTYPE html>
<html>
<head>
    <title></title>
<style type="text/css">
    #sel1 {
        border: 1px solid #bb8484;      
     }
</style>
</head>
<body>
    <h1 id="sel1">Universal Selector</h1>
    <p>Open Html file in notepad and see code</p>
</body>
</html>

output


Class selector

Using class selector we can select one or more then one element at once in a web page.

Class selector is generic type selector.

For example, suppose i a web page there more then one html element contain same class name.Now when run the code then all same class name element are affected by css class value at same time.

Class name value should not started with a numbers.
In css file class name selector started with (.) dot.

example


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
       .sel1 {
            border: 1px solid #bb8484;
            color: pink;
        }
    </style>
</head>
<body>
    <h1 class="sel1">Id selector </h1>
    <p class="sel1">Open Html file in notepad and see code</p>
</body>

</html>

Output

--

Element selector

Element selector select html element wise,find html element and decorate with css.

Example


<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
       h1 {
            border: 1px solid #bb8484;
            color: pink;
        }
    </style>
</head>
<body>
    <h1>Id selector </h1>
    <p>Open Html file in notepad and see code</p>
</body>
</html>

Output


Posted by at No comments:
Subscribe to: Posts (Atom)