Home
Search results “Css style inside head”
How do I connect my CSS stylesheet to my HTML page?
 
10:07
http://courses.robobunnyattack.com/courses/step-by-step-html-and-css-for-absolute-beginners How do I connect a CSS stylesheet to an HTML webpage? In this lesson, you'll learn: - The reason we have separate HTML and CSS files - The purpose of HTML vs the purpose of CSS - Why it's good to keep content (HTML) separate from presentation (CSS) By the end of this lesson you'll know how to code: 1. The LINK tag (to connect an external CSS stylesheet to your webpage) 2. The REL and TYPE attributes (to describe the CSS stylesheet) 3. The HREF attribute (to specify where to find the CSS stylesheet) ***** This is a sample lesson from the online course "Step-by-step HTML and CSS for Absolute Beginners". Learn how to code HTML5 + CSS3 to create your own website in this beginner-level course. No coding experience required! Enroll today at: http://courses.robobunnyattack.com/courses/step-by-step-html-and-css-for-absolute-beginners Looking for friendly, practical, jargon-free technology training? Visit my website at: http://learn.robobunnyattack.com Thanks for watching! - Kathleen, [email protected] PS Thanks to Reverse Grip for letting me use "Raise Your Fist" as the intro/outro music for this video. You ROCK!! http://reversegriprock.com
Views: 150380 Robobunnyattack!
CSS Positioning Tutorial #4 - Floating Elements
 
10:13
Hey ninjas, in this CSS Positioning tutorial, I'll introduce you to floating elements. CSS floats are one of the most powerful and widely used CSS positioning properties, but can be a little tricky to get your head around at first! SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 70526 The Net Ninja
Make Advanced Tables Using HTML & CSS
 
25:10
Learn how to make an AFL Top 8 Ladder web page by using HTML and CSS. This is a slightly more advanced table than in the previous tutorial.
Views: 91859 tbate54
How to link css to html (Quick Tutorial)
 
02:05
This video will show you How to link css to html. There are three ways to insert the stylesheet. Each way has a different method structure. The inline style method uses the style attribute to style the specific element in the webpage. The internal stylesheet resides within the webpage. The external stylesheet is a separate file from the webpage. An external stylesheet is composed of all the styling attributes to the specific page it was linked to. A "link" tag is added inside the "head" section in the webpage. Read the Article: http://www.22bulbjungle.com/how-to-link-css-to-html-step-by-step/ Follow Us Facebook: http://bit.ly/2srBAX7 Twitter: http://bit.ly/2tAEvgG Instagram: http://bit.ly/2tbfnKn how to link html to css | link html to css | html link to css | link css file to html | html link to css file
Views: 20971 garnatti one
CSS Tutorial For Beginners 46 - Multiple Backgrounds
 
04:59
Yooo ninjas. So in this CSS tutorial, I'll be imparting some extra background property wisdom. More specifically, I'll be teaching you about the awesomeness of multiple backgrounds! First of all we'll talk about how to add in multiple backgrounds to the background-image property. Then we'll use our ninja powers to tweak the background-repeat, background-size & background position properties so that they look nice on a web page. Peace out, have fun & keep coding :). SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML Basics Course ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 18356 The Net Ninja
CSS Virgin - Where to Stick Your CSS
 
02:57
http://codebabes.com/courses/css-virgin Before we get too far into the details, let's talk about where you stick your CSS. CSS is all about separating content from presentation. Take me for example, my hotness is my presentation, or the CSS, my personality, is the content, the HTML. When you put together great content and great presentation you end up with a pretty bangin' website, or this hotness. First, the best practice way to add CSS to a web page is to create a separate CSS file, or an external stylesheet. Let's take a look at the site directory on our desktop. Inside is an HTML file and a CSS file. If we open the HTML file in a browser we see it is just plain text. Let's open the HTML file in a text editor. Ok, so what we have to do is add the stylesheet to the HTML file with this line, link—rel-stylesheet then, href—equals—the the CSS file path within the site directory. Let's go back and refresh the page. Since we linked the CSS file, now the browser applies the external CSS and the content is styled. This method works great because one file can be applied to many pages. But, if you like it quick and dirty, there are two other ways to add CSS. First, is an inline style where you add the style directly to an HTML element in the page. Let's add a background color of gray. Inline styles aren't good because it forces you to edit each page individually to change the style. This is known as tight coupling, and let me tell you, as good as that sounds, it isn't. Second is an internal style. You stick this right in the page, inside the head element. You add the style tag and then some CSS. Let's make the paragraphs bold, by adding a p then font-weight, bold. This method is slightly better than inline styling, but you still have the same problems, it's attached to one HTML file. In conclusion, external stylesheets are good because they can be applied to many HTML files and on a more advanced level it helps make page loads faster because once the browser loads this file, it remembers it and doesn't have to download it again. This is called browser caching. Next we'll talk about properties, specifically color and size options, and it might be a little hotter in here, if you know what I mean. http://codebabes.com/courses/css-virgin
Views: 60214 CodeBabes
Internal css 26
 
04:53
Join our channel for Learn 01 Getting Started 2 HTML5 3 CSS3 4 Javascript 5 JQuery 6 Bootstrap 4 7 Wordpress 8 PHP 9 MySQL 10 APIs 11 MobileApps 12 HTML 5 CSS 3 Special Features 13 Python 14 Bonus Section Twitter Clone Using MVC 15 Where do you go from here ______________________________ When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet. Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the style element, inside the head section of an HTML page: ______________________________________ Please Subscribe my Channel. Write her your comments if you have any query about Lecture. I really need your supported. Please subscribe my channel and like and comments. Thanks a lot.
Views: 6 Sohno Mehar
CSS Positioning Tutorial #11 - Z - Index & Stacking Order
 
08:32
Yo ninjas, in this CSS positioning tutorial, I'll show you how to use the z-index property to control the stacking order of elements on a web page. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 34358 The Net Ninja
CSS Lesson 3 - CSS Styles
 
08:02
CSS Types: Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language. CSS can be added to HTML elements in 3 ways: Inline : An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. Internal : Internal styles are embedded in the head section of the HTML document and are defined inside a style tag. External : An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. ankpro ankpro training Asp.net MVC C# C sharp Bangalore Rajajinagar Selenium Coded UI Mobile automation testing Mobile testing JQuery JavaScript .Net
Views: 105 Ankpro Training
Basic tags of Html | Head | Title | Link | Style | Body tags #2
 
11:39
In this video, you will learn about html tag, head tag, title tag, link tag, style tag, body tag. how to use anchor tag and what is the working of title tag which is shown on tab of browser _____________________* List of HTML Training Videos *_____________________ * Web Development Training | Course ( HTML, CSS, Bootstrap, Java Script JQUERY PHP) #1 Click: https://youtu.be/RLU7EJYh188 * Basic tags of Html | Head | Title | Link | Style | Body tags #2 Click: https://youtu.be/5zhQUM5AfQw * Html Headings (h1 h2 h3 h4 h5 h6) tags | Paragraph tag and Anchor tag #3 Click: https://youtu.be/UqvvIzoqL1U * Button tag and Image tag in html #4 Click: https://youtu.be/LEtwiu0Nqbs * Inspect html elements | How to use console | Change CSS Live #5 Click: https://youtu.be/rUNortWlLn4 * Create Tooltip in html | interesting Concept | Small Popup #6 Click: https://youtu.be/U8GYOe118KY * HTML Styling With CSS (Inline Style | Internal Style | External style ) #7 Click: https://youtu.be/lVB_cPr7hIo * HTML Formatting Basic Tags (br strong i em sub sup del ins mark small ) #8 Click: https://youtu.be/WtVHGenTiuM * HTML Links ( _blank _self _top _parent) Where to Open the Page or Link #9 Click: https://youtu.be/30i-4l7ZNQY * HTML Table | ( table tr th td ) | See Brief and Practical Example #10 Click: https://youtu.be/UdWRVGuITNE * Row Span and Col Span in HTML Table | Simple and Easy Explanation #11 Click: https://youtu.be/zQm0E25vXzI * HTML iframe | Open Page inside Page | very interesting | Why insecure ? #12 Click: https://youtu.be/kd_KPNgipw0 * Style HTML Elements by ID and Class | Learn Difference | Practical Example #13 Click: https://youtu.be/DY0dLM5ikCI * HTML Form | Practicle Example | very Simple and Easy #14 Click: https://youtu.be/NfmB5Q4U1sk * HTML Form with CSS | Practicle Example | Really Simple and Easy #15 Click: https://youtu.be/njlqVFU9K0g * HTML input Attributes ( Placeholder | Required | Readonly | Disabled | Checked) very important #16 Click: https://youtu.be/IY2DWFIL8qM * Types of List in HTML (Ordered List | Unordered List | Description List) Quick Explanation #17 Click: https://youtu.be/7DsSV8UwgWM * Audio Video tags in HTML | interesting Video #18 Click: https://youtu.be/BujSDqvk2Lc * Useful HTML Tags (div, pre, hr, label, hr, empty tags, nested tags) Very Useful Video #19 Click: https://youtu.be/-Cjsq0Guh1s * HTML inline and Block Elements | Practical Difference with example on console #20 Click: https://youtu.be/uLnNZfNf2E8 * Date picker and Color picker in HTML | Solve date validation problem #21 Click: https://youtu.be/EYbpqqWcdIU * html fundamentals (&nbsp, upload, span, entities etc) very important concepts #22 Click: https://youtu.be/DCbF70VtOpU ______________________________________________________ * Quickly Create Website using HTML/CSS * ------------------------------------------------------ Click: https://youtu.be/YKkaRvj49Wk ______________________________________________________ * CSS Training * ------------------------------------------------------ Click: https://youtu.be/0c3gvHTzr3E ______________________________________________________ * PHP Training * ------------------------------------------------------ Click: https://youtu.be/sRUecHHhFp4 ______________________________________________________ * C Language Training * ------------------------------------------------------ Click: https://youtu.be/OZ6nHWdDHEg ______________________________________________________ * Training for How to Create a Blog * ------------------------------------------------------ Click: https://youtu.be/vYuhvYjpkTI ______________________________________________________ * Adobe Photoshop Training * ------------------------------------------------------ Click: https://youtu.be/vYuhvYjpkTI ______________________________________________________ * Computer Graphics Programs * ------------------------------------------------------ Click: https://youtu.be/uKj7TUdTJCM ______________________________________________________ * MS Office Training * ------------------------------------------------------ Click: https://youtu.be/wKUSACgrtG4 ______________________________________________________ * Computer Basics Training * ------------------------------------------------------ Click: https://youtu.be/ZTCknN5RlYo ______________________________________________________ * English Speaking Course * ------------------------------------------------------ Click: https://youtu.be/wnC_KW9uHWw ______________________________________________________ * Wordpress Training * ------------------------------------------------------ Click: https://youtu.be/3Cm6mnoZrH8 ______________________________________________________ * Bootstrap Training (uploading soon...) * LIKE | COMMENT | SHARE | SUBSCRIBE The channel link is : https://goo.gl/XiMV5S
Views: 15 Amazing Learning
Collapsing Header Tutorial | HTML & CSS
 
11:33
This collapsing header effect is really easy to achieve with a simple lines of CSS. Liked this video, why not subscribe? Media Temple the #1 hosting company. Get on the grid now: http://bit.ly/1ghElf3 Let's take our relationship to the next level: Website: patrickbenske.com Facebook: http://goo.gl/R6ZwgF Twitter: http://goo.gl/oYIaWa
Views: 468841 Patrick Benske
How to add Code to the head tag inside Wordpress
 
01:59
https://reneholz.com/pro How to add Code to the head tag inside Wordpress? If you need to add code to the "head" tag inside your wordpress blog (e.g. Facebook Pixel Code or any other tracking code) you need to follow the steps: 1. Wordpress Dashboard 2. Appearance 3. Editor 4. theme header (header.php) 5. Add the code above the "closing head" tag /head
Views: 49698 Rene Holz
Learn Html in Arabic #08 - Head
 
20:06
Learn every element inside the head tag meta charset meta description title link style script
Views: 183764 Elzero Web School
Styling HTML 5 Forms #5 - Styling Select Boxes
 
06:38
----- COURSE LINKS: + Repo - https://github.com/iamshaunjp/styling-html5-forms-playlist + Atom editor - https://atom.io/ CSS Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT HTML Playlist - https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== PSD to WordPress Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W ============ Node.js for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 21494 The Net Ninja
2  Types of CSS in Urdu and hindi
 
22:13
In this video you will learn about css. Types of CSS and it's usees. there are three types of css. 1.inline style. 2.internal style. 3.External style. 1. Inline Styles. Inline Styles cannot be resused at all, period. ... 2.Internal / Embedded Styles. Internal Styles are placed inside the head section of a particular web page via the style tag. ... 3.External Style Sheet. For the most part, we will want to place the majority of our Style Rules on an External Style Sheet.
Views: 50 World Technology
How to Define internal CSS, | HTML Tutorial-3
 
04:22
like us on facebook https://www.facebook.com/tgcin follow us on Twitter https://twitter.com/tgcindia follow us on google+ https://plus.google.com/+Tgcindia Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type, internal. When using internal CSS, you must add a new tag, style, inside the head tag. The HTML code below contains an example of style's usage. CSS code is not written the same way as HTML code is. This makes sense because CSS is not HTML, but rather a way of manipulating existing HTML. Below is an example of some simple, yet fully functional, CSS code. FOLLOW US FOR MORE TUTORIALS VIDEOS
Views: 398 tgcanimation
Things used in the head tag or used inside the head tag | how to write meta data |
 
06:02
Things used inside head tag How to write meta data in the head tag. How to add link in head How to add script file in head
Views: 7 Access world
HTML tutorial: Flowing text around an image | lynda.com
 
05:29
This HTML tutorial shows how to flow text around a normally inline image element using the CSS float property. Watch more at http://www.lynda.com/HTML-tutorials/HTML-Essential-Training-2012/99326-2.html?utm_medium=viral&utm_source=youtube&utm_campaign=videoupload-web-dev-mEMrFbX4Agg. This tutorial is a single movie from the first chapter of the HTML Essential Training course presented by lynda.com author Bill Weinman. The complete course is 5.5 hours long and introduces new web designers to the nuts and bolts of HTML (HyperText Markup Language), the programming language behind most web pages HTML Essential Training table of contents: Introduction 1. Overview 2. Fundamentals of HTML 3. Meta data and the document head 4. Text 5. A CSS Primer 6. Images 7. Hyperlinks 8. Lists 9. Structural, contextual, and semantic elements 10. Audio, video and other objects 11. HTML5 Data Elements 12. HTML5 Microdata 13. Document Outlines 14. Tables 15. Frames 16. Forms 17. A case study Conclusion
Views: 102204 LinkedIn Learning
Sticky Navigation Tutorial (Fixed Position CSS + JavaScript / jQuery)
 
13:07
Learn how to create a "sticky" navigation (element should use "fixed" position once it would normally scroll out of view). Check out my "Get a Developer Job" course: https://www.udemy.com/git-a-web-developer-job-mastering-the-modern-workflow/?couponCode=YOUTUBE-HALF-OFF Link to the demo files shown in the lesson: http://learnwebcode.com/sticky-navigation-tutorial/ Have you put together a neat page infused with JavaScript awesomeness and want to move it from your computer to online so the world can see your JS chops? I’ve partnered with A Small Orange and can now offer my students 20% savings on any hosting plan. Hint: the shared “Small” plan is one of the best bangs for your buck around! http://p.asmallorange.com/learnwebcode/specialoffer Sign up for my newsletter to receive periodic webDev tips, tricks, resources and coupons. Join the list at http://learnwebcode.com/ Follow LearnWebCode on Twitter for resources and updates: https://twitter.com/learnwebcode In this lesson we make use of JavaScript and the jQuery library for event handling and conditional logic. If you are unfamiliar with JavaScript I recommend watching these two introductory videos: https://www.youtube.com/watch?v=1vMFpT0h-WI&list=UUHRp19HU7Y2LwfI0Ai6WAGQ https://www.youtube.com/watch?v=gIvR-WX5lIQ&list=UUHRp19HU7Y2LwfI0Ai6WAGQ
Views: 132405 LearnWebCode
Set up an HTML Document
 
04:02
Intro to HTML and CSS Set up an HTML Document To set up a new HTML document, you will need to start with three things: a doctype, a head tag containing title tags and a link to an external CSS stylesheet, and html tags with body tags inside Text editors: https://atom.io/ http://www.sublimetext.com/ Set Up of a Basic Web Page: https://developer.mozilla.org/en-US/Learn/HTML/Write_a_simple_page_in_HTML
Views: 246 Team Treehouse
CSS Fixed Headers
 
04:33
This is a small tutorial on how to modify your css headers to allow them to be fixed. Fixed headers allows you to create a header on the page and then it is fixed in that position on the page, so that as you scroll the header will overlap the content staying in the same place you set.
Views: 388273 Joseph Smith
Vue JS 2 Tutorial #10 - Dynamic CSS Classes
 
09:32
Hey all, in this Vue JS tutorial I'll show you how we can apply dynamic CSS classes to our elements using data binding. ----- COURSE LINKS: + Repo - https://github.com/iamshaunjp/vuejs-playlist + Atom editor - https://atom.io/a + Download GIT - https://git-scm.com/ + Vue docs - https://vuejs.org/v2/guide/ --------------------------------------------------------------------------------------------- You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress, Node.js & more on the channel homepage... SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== PSD to WordPress Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W ============ Node.js for Beginners Playlist ============= https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 50642 The Net Ninja
CSS Grid Tutorial #6 - Aligning & Justifying Items
 
05:28
----- COURSE LINKS: + Atom editor - https://atom.io/a + GitHub Repo - https://github.com/iamshaunjp/css-grid-playlist --------------------------------------------------------------------------------------------- Other tutorials: ----- HTML FOR BEGINNERS: https://www.youtube.com/watch?v=Y1BlT4_c_SU&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ----- CSS FOR BEGINNERS: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ----- NODE.JS TUTORIALS https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 20884 The Net Ninja
Customize any Wordpress Theme (Part 1) - Understanding style.css, header.php, footer.php
 
16:00
Learn how to customize any Wordpress theme by understanding the files that control the themes appearance and structure starting with 3 of the most important files to understand: style.css, header.php, footer.php - Learning how these 3 files construct your Wordpress site is the beginning of learning how to customize the appearance and structure of any WP theme into any website you can design.
Views: 614790 LuckyWabbitWebDesign
HTML5 Header & Horizontal Navigation Menu (PART 1) | XO PIXEL
 
05:38
How to code a fixed header and horizontal navigation bar with HTML5 and CSS3! The code editor used is called Brackets and is an open source code editor created by Adobe. This is a great and simple tutorial if you have a basic understanding of HTML5 and CSS. I hope, this helped you :) Let me know what you've made with this tutorial, I'd love to feature them in a video and on my blog. TOOLS USED Brackets: http://brackets.io/?lang=en ___ ♥︎ THE XO PIXEL SHOP ▸ XO PIXEL Sticker Pack http://bit.ly/2nowEz1 ▸The Essential HTML5 & CSS3 Reference Sheet: http://bit.ly/2nU8qgY ♥︎ M O R E V I D E O S ▸ Web Design Speed Art Modern Website | http://bit.ly/2nfhEjF ▸ Adobe XD App Design | http://bit.ly/2nrf3UG ▸ Responsive Animated Image Grid | http://bit.ly/2o7tyAp ▸ Nexus 6P Unboxing & Review | http://bit.ly/2iNiyRJ ▸ TIDAL REVIEW: Is It Worth It? (2016) | http://bit.ly/2imcyRf ___ ♥︎ R E S O U R C E S 💌 Sign-up to my weekly newsletter to get your FREE HTML & CSS Coding Cheat Sheets: http://xopixel.com/?p=4004 📚 My Favorite Books: Coding: http://amzn.to/2nr0wso Typography: http://amzn.to/2odhevl Web Design: http://amzn.to/2nfeIUr 🎥 My equipment for my YouTube videos & Blog: Camera: http://amzn.to/2nzeVVs Microphone: http://amzn.to/2n2l7RN ___ ♥︎ F O L L O W ▸ blog | http://xopixel.com ▸ facebook | http://facebook.com/xopixell ▸ twitter| http://twitter.com/xopixell ▸ instagram | http://instagram.com/xopixell ▸ pinterest | https://www.pinterest.com/xopixel/ Subscribe to XO PIXEL for new videos every week! https://www.youtube.com/channel/UC97rIjLDrO9ji6oAQsfgyiw?sub_confirmation=1 ___ ♥︎ FILMED & EDITED BY MARISA BLAIR ___ ♥︎ A B O U T XO PIXEL is the place to grow your love for design, code, and technology! Explore tutorials, articles, and freebies to become inspired and creative as you develop your web design, coding, and graphic design skills. The articles and tutorials have reached hundreds of thousands of people online, in hundreds of countries around the world. Since beginning in 2014, XO PIXEL’s mission is to provide creative and inspiring design and coding tutorials and helpful articles for enthusiastic learners online. ___ FOR BUSINESS INQUIRIES: [email protected] ___ Disclaimer: This is NOT a sponsored video.
Views: 79705 XO PIXEL
How to Inject Custom HTML and CSS into an iFrame
 
14:22
Ever been to a site like JSBin, where you can write HTML, CSS, and JavaScript, and then see the results in a panel to the right? An iframe is how we can accomplish this task.
Views: 99861 Tuts+ Code
Css Tutorials Part-2 || Three Ways to insert Css || Use Css with Html
 
10:24
Three Ways to Insert CSS There are three ways of inserting a style sheet: a)External style sheet b)Internal style sheet c)Inline style External Style Sheet: With an external style sheet, you can change the look of an entire website by changing just one file! Each page must include a reference to the external style sheet file inside the link element. The link element goes inside the head section. An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. Internal Style Sheet: An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the style element, inside the head section of an HTML page Inline Styles: An inline style may be used to apply a unique style for a single element. To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. ****************************HTML Tutorials************************************** HTML Part 1 https://youtu.be/FH5CJdoyeXc HTML Part 2 https://youtu.be/Ynb6XQY4l10 *****************************CSS TUTORIALS************************************* Css Part !1 https://youtu.be/O9qzCLTWnUo ****************************************Editors************************************ Install Dreamweaver https://youtu.be/uoVadST-5fE Instaling Notepad ++ https://youtu.be/e7HjldVeeHI **************************************************************************************** LIKE COMMENT SHARE AND SUSCRIBE Stay With COdeDuke Thankyou soo Much **************************************************************************************** Next Tutorial is on Color Dont Forget to see. Don't Forget it SuScribe also.
Views: 8 Code DUKE
inside out – STEP 012 | Practicing: Coding Our Books Page
 
32:57
In this lesson we take some of the things we have learned up to this point and use them to complete our books.html page. Table of Contents: 00:00 - Introduction 00:09 - lesson overview 03:46 - create images/books folder 05:19 - create books.css file 06:48 - link books.css in books.html head 07:03 - add comment for style.css link 07:22 - add comment for books.css link 08:51 - add comment for quote div 09:11 - create quote container div 09:53 - add quote p element 10:38 - add quote author p element 11:08 - add quote 12:58 - create container to place books in 13:19 - comment begining and ending of div 13:58 - create div for first book 16:12 - create front of book card div 16:51 - create front of book card title div 17:39 - create front of book card image div 18:56 - create front of book card author div 19:56 - create back of book card div 20:11 - create back of book card title div 21:06 - create back of book card info div 21:49 - create back of book card link div 22:18 - create back of book card a tag 24:14 - copy completed card and paste 25:11 - add images to books image folder 26:22 - discuss placing books images with css 27:46 - merge in content
Views: 350 Brian Savage
Fixed Header Tutorial | HTML & CSS
 
12:57
Easiest way to fix a nav or header bar to the top of your website. Watch this video on how to create a fixed nav or header bar. Leave a like, comment & subscribe! Media Temple the #1 hosting company. Get on the grid now: http://bit.ly/1ghElf3 Let's take our relationship to the next level: Website: http://pixelarts.co Facebook: http://goo.gl/R6ZwgF Twitter: http://goo.gl/oYIaWa
Views: 175829 Patrick Benske
How to Create a Nav Bar | HTML & CSS Tutorial
 
15:29
© Copyright Of oston code cypher 2016. This Tutorial shows you how to create a Navigation Bar for your website using notepad++ in an unordered list and CSS styling!. If you need any help then please do personal message me! Thanks and follow me on twitter @timoston. TWITTER: https://twitter.com/oston_code FACEBOOK: https://www.facebook.com/tim.oston Thanks for being a bro! ........... ...................__ ............./´¯/'...'/´¯¯`·¸ ........../'/.../..../......./¨¯\ ........('(...´...´.... ¯~/'...') .........\.................'...../ ..........''...\.......... _.·´ ............\..............(
Views: 493558 Oston Code Cypher
HTML and CSS tutorial episode 2 - Head and Body Tags
 
04:04
In this episode we talk about what tags are and we teach you the three most common tags in a website
Views: 155 howdoesihack
How to Add CSS in HTML in 3 Different ways? In Hindi
 
13:44
Hello Friends...Today i will be teaching about those 3 different ways by which we can add CSS in HTML. Here we will be learning 3 different CSS methods,We have used: 1.Inline CSS 2.Internal CSS 3.External CSS 1) Inline CSS Inline CSS is used to apply CSS on a single line or element. 2) Internal CSS Internal CSS is used to apply CSS on a single document or page. It can affect all the elements of the page. It is written inside the style tag within head section of html. 3) External CSS External CSS is used to apply CSS on multiple pages or all pages. Here, we write all the CSS code in a css file. Its extension must be .css for example style.css. I have given examples as well to understand the topic more effectively. If you have any concerns please comment down below and like ,share and subscribe the channel.. Thanks for watching...!! JAI HIND!!
Views: 27 devotional study
HTML5, CSS3 & JS | Referencing CSS Stylesheet from Filesystem | Part-8
 
10:03
In order to link our CSS stylesheet with our HTML page, we need to organize all the stylesheets into their own directory or sub-folder. Using the link tag inside the head section of an HTML document, we can reference an external stylesheet. The link tag will only work once the browser can correctly find the CSS file in the specified path provided. The relative path to the filesystem must be defined correctly and this lesson will teach us how to correctly look inside the sub-folder and find the CSS stylesheets. Once, this is done successfully, we shall divert our attention into the discussion on the structure of an HTML document. It is compulsory for every HTML page to have a head section followed by a body section. We will also see how the hierarchy of the document is rendered out on our browser with and without CSS formatting applied. We will also briefly see how the title tags can help us to place a title for easy recognition by the user.
Views: 197 Nafis's Classroom
WordPress 101 - Part 2: How to properly include CSS and JS files
 
21:55
:: Support Me :: https://www.patreon.com/alecaddd http://www.alecaddd.com/support-me/ https://amzn.to/2Hcp5mo Second lesson of the series WordPress 101 for Beginners Developers. How to properly include CSS and JS files Learn how to build a Theme from scratch, create the folder and the necessary files to install and activate a custom theme. This tutorials are meant to be a starter help for developers who never used WordPress before and want to learn how to code themes and plugins without using pre-coded assets. 1st Part: https://www.youtube.com/watch?v=oTRZYnYQlmo Tutorial Page: http://www.alecaddd.com/wordpress-101-wordpress-beginner-developers/ http://www.alecaddd.com/
Views: 217003 Alessandro Castellani
Code Editor: how to edit 'head' section
 
01:20
Code Editor extension now allows to insert a code before 'head' section, inside 'head' section and at the end of 'body' section. https://mobirise.com html website builder html website builder software html code website builder
Views: 11647 Mobirise
How to Edit the CSS Styles on Gantry 5 RocketTheme Templates - A How to Edit Joomla CSS Tutorial
 
05:03
Here is how to modify the CSS for your entire Rocket Theme Template. Subscribe Today! ► https://goo.gl/Y3wTy5 Modifying the Joomla template on your site is fairly simple if you are using a template from RocketTheme.com (they have a few free ones for use as well.) This tutorial will show you how to easily change the CSS tags on your Gantry 5 RocketTheme Joomla Template. Tools used in the tutorial are: Gantry and Hydrogen Template for Joomla 3.4+ - found at: http://www.gantry-framework.org/download Here is the text of the subtitles for this video: Hi, I'm Tim Davis from Cybersalt's Basic Joomla channel. I really like the templates that RocketTheme puts out. Their Gantry 5 system makes it super easy to customize the CSS to fit my style and your style. That's what this tutorial is about. Let's head on over to the computer and check it out. Before we get started, apologies for a little bit of garbally audio in that intro; it's the first video I've used the green screen on and I'm still setting things up. But, let's get back to the point here. In order to customize the CSS of a template template using gantry 5 you first need to create a folder inside the template folder to put your custom CSS. So, let's see how to do that first. I'm already logged into my cpanel account and the file manager where this Basic Joomla site is installed and what you want to do is go to the templates folder, go into there and you want to go into the folder that has the same name of the template that you want to customize CSS for. In this case it is the Gantry 5 Hydrogen; G5 Hydrogen. Go into that folder and then you want to go into the custom folder. Now, I just want to point out we're gonna be creating a folder called SCSS there's already one that exists in the template folder, but this is not the one that we're looking for. What we want to do is go into the custom folder and then we're going to create a folder called SCSS. Once we've created the SCSS folder we're going to then go into it and we're going to create a new file this time and that file is going to be named custom .scss. And we'll create that file. Now, that's an empty file, let's get some CSS to customize and put in there. I'm going to the homepage of Basic Joomla right now, I have it set up with the default Gantry 5 page, and change the color of this font here. I'm using Chrome so I'm going to use hit f12 to bring up the element inspector and I'm going to click this arrow and scroll then we'll select this text here. We'll see that getting started is - as we see down here - it's a heading 1 and heading one here is the colored grey. Now I can click this button and I can change the color - you'll notice it will change up here - to something that I want and you will also notice that you sort of get a magnifying glass you can pick a color that's on the screen. This is great for matching up existing colors in the theme or as you're doing your work along. So why don't we just select this purple here, I'll mouse over it click on it, and I click outside of here and go back down, here we have heading one; color is purple. Now, this css, this code here, I'm just going to left click and drag and select it and go CTRL-C to copy it. Now we then go to the .SCSS custom page that we made. We're going to, right click, go edit and now I'm going to paste CSS information in there. Now, if I want to change the color of heading 1, heading 2 to that purple that we selected back here, then I would leave the CSS like this. But let's just change it for heading 1. And basically we've pasted that code in there. We'll save our changes. Now, I'm going to go quickly into the back end of the Joomla site here and click the clean cache button - I use Regular Labs' cache manager - that will clean the cache and that guarantees that now when I refresh this page heading 1 is purple. We can even close the inspector and basically you're all set up to look for other CSS that you want to customize and once you get a hold of the code that you want and set it in the manner that I just showed you you would then go back and add it to your custom .SCSS file. So there you have it; that's how to edit the CSS and a template that's being run on Gantry 5. I hope this tutorial was helpful for you. If it was why not give it a thumbs up or even subscribe to the channel? Thanks for watching and enjoying working on your Joomla sites - God bless. Tutorial Theme Song "Bluewater" courtesy of http://www.freestockmusic.com Looping Background "Teal Tiles" courtesy of http://www.motionbackgroundsforfree.com #joomla #basicjoomla #cybersalt
Views: 12880 Basic Joomla Tutorials
Web Design Bangla Tutorial Part-3 (div tag in HTML)
 
05:41
Web Design Bangla Tutorial Part-3 ----------------------------------------------------------------------------------------------------------- How to work div tag in html ?? = Creating Web Layout using Div Tag. Div tag is a container tag inside div tag we can put more than one HTML element and can group together and can apply CSS for them. ... ------------------------------------------------------------------------------------------------------------ How to write inline css?? = An internal style sheet may be used if one single page has a unique style. = Internal styles are defined within the "style" element, inside the "head" section of an HTML page: Note: Do not add a space between the property value and the unit such as margin-left: 20 px;. The correct way is: margin-left: 20px; ----------------------------------------------------------------------------------------------------------- Music Link: https://www.ashamaluevmusic.com Facebook = https://www.facebook.com/webkingad/ -~-~~-~~~-~~-~- Please watch: Part-1 : https://www.youtube.com/watch?v=s2_vhHmNYlk&t=16s Part-2: https://www.youtube.com/watch?v=FOVneVigh34&t=83s Part-3: https://www.youtube.com/watch?v=bt92oRZDoMA&t=214s Playlist : https://www.youtube.com/channel/UCPTQcycfQjBSzDua5ygAjJg/playlists?view_as=subscriber -~-~~-~~~-~~-~-
Views: 48 AD WebKing
Where should the script tag be placed in html
 
09:40
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2014/11/where-should-script-tag-be-placed-in.html In this video we will discuss, where should the script tag be placed in the html. Should it be placed in the body or head section of the page. In general the script tag can be placed either in the head or body section. Let's look at a few examples : Example 1 : Script tag in the head section [html] [head] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script] [/head] [body] [form id="form1" runat="server"] [/form] [/body] [/html] Example 2 : Script tag in the body section [html] [head] [/head] [body] [form id="form1" runat="server"] [/form] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script] [/body] [/html] In Example 1 we placed the script tag in the head section and in Example 2, we placed it in body section. In both the cases JavaScript works as expected. Example 3 : Sets the background color of the TextBox to red. [html] [head] [/head] [body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script] [/body] [/html] Example 4 : This is same as Example 3, except we moved the script tag to the head section. In this case the script will not work as expected. Depending on the browser you are using you get one of the following JavaScript error. Firefox - TypeError: document.getElementById(...) is null Chrome - Uncaught TypeError: Cannot read property 'style' of null IE - Unable to get property 'style' of undefined or null reference To see these JavaScript errors press F12 which launches developer tools. F12 works for all the 3 browsers. [html] [head] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script] [/head] [body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [/body] [/html] Why did the JavaScript did not work in this case JavaScript code is present before the textbox control. By the time the JavaScript code is executed, the textbox is still not loaded into browser DOM (Document Object Model). This is the reason JavaScript can't find the textbox and throws a NULL reference error. In Part 6, we discussed that, in general it is a good practice to store JavaScript in an external .js file. So, if the JavaScript is present in an external file and if you are referencing it on a page using [script] element, where should such [script] element be placed. To answer this question, first let's understand what happens when a browser starts loading a web page. 1. The browser starts parsing the HTML 2. When the parser encounters a [script] tag that references an external JavaScript file. The parser stops parsing the HTML and the browser makes a request to download the script file. Until the download is complete, the parser is blocked from parsing the rest of the HTML on the page. 3. When the download is complete, that's when the parser will resume to parse the rest of the HTML. This means the page loading is stopped until all the scripts are loaded which affects user experience. In general, the suggested good practice is to place the [script] tag just before the closing [body] tag, so it doesn't block the HTML parser. However, modern browsers support async and defer attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded. But even with these attributes, from a performance standpoint it is still better to place [script] tag just before closing [body] tag. According to HTTP/1.1 specification browsers download no more than two components in parallel. So, if the page has several images to download and if you place [script] tags at the top of the page, the script files start to download first which blocks the images download which adds to the total page load time.
Views: 91800 kudvenkat
How to use Style Attribute in HTML( Hindi) |HTML basic  part-2 .
 
10:03
The style attribute is part of the Global Attributes, and can be used on any HTML element. Styles in HTML are basically rules that describe how a document will be presented in a browser. Style information can be either attached as a separate document or embedded in the HTML document. There are 3 ways of implementing style in HTML : Inline Style : In this method, the style attribute is used inside the HTML start tag. Embedded Style : In this method, the style element is used inside the head element of the document. External Style Sheet : In this method the link element is used to point to an external CSS file. In this video i have use inline style ..we have use style attribute in the start tag. please guys like ,subscribe and press the bell icon .............................
Views: 22 SKD
HTML Styling With CSS (Inline Style | Internal Style | External style ) #7
 
10:56
In this video, you will learn about about inline style, internal style, external style. This video will really help you to understand the concept of these style. _____________________* List of HTML Training Videos *_____________________ * Web Development Training | Course ( HTML, CSS, Bootstrap, Java Script JQUERY PHP) #1 Click: https://youtu.be/RLU7EJYh188 * Basic tags of Html | Head | Title | Link | Style | Body tags #2 Click: https://youtu.be/5zhQUM5AfQw * Html Headings (h1 h2 h3 h4 h5 h6) tags | Paragraph tag and Anchor tag #3 Click: https://youtu.be/UqvvIzoqL1U * Button tag and Image tag in html #4 Click: https://youtu.be/LEtwiu0Nqbs * Inspect html elements | How to use console | Change CSS Live #5 Click: https://youtu.be/rUNortWlLn4 * Create Tooltip in html | interesting Concept | Small Popup #6 Click: https://youtu.be/U8GYOe118KY * HTML Styling With CSS (Inline Style | Internal Style | External style ) #7 Click: https://youtu.be/lVB_cPr7hIo * HTML Formatting Basic Tags (br strong i em sub sup del ins mark small ) #8 Click: https://youtu.be/WtVHGenTiuM * HTML Links ( _blank _self _top _parent) Where to Open the Page or Link #9 Click: https://youtu.be/30i-4l7ZNQY * HTML Table | ( table tr th td ) | See Brief and Practical Example #10 Click: https://youtu.be/UdWRVGuITNE * Row Span and Col Span in HTML Table | Simple and Easy Explanation #11 Click: https://youtu.be/zQm0E25vXzI * HTML iframe | Open Page inside Page | very interesting | Why insecure ? #12 Click: https://youtu.be/kd_KPNgipw0 * Style HTML Elements by ID and Class | Learn Difference | Practical Example #13 Click: https://youtu.be/DY0dLM5ikCI * HTML Form | Practicle Example | very Simple and Easy #14 Click: https://youtu.be/NfmB5Q4U1sk * HTML Form with CSS | Practicle Example | Really Simple and Easy #15 Click: https://youtu.be/njlqVFU9K0g * HTML input Attributes ( Placeholder | Required | Readonly | Disabled | Checked) very important #16 Click: https://youtu.be/IY2DWFIL8qM * Types of List in HTML (Ordered List | Unordered List | Description List) Quick Explanation #17 Click: https://youtu.be/7DsSV8UwgWM * Audio Video tags in HTML | interesting Video #18 Click: https://youtu.be/BujSDqvk2Lc * Useful HTML Tags (div, pre, hr, label, hr, empty tags, nested tags) Very Useful Video #19 Click: https://youtu.be/-Cjsq0Guh1s * HTML inline and Block Elements | Practical Difference with example on console #20 Click: https://youtu.be/uLnNZfNf2E8 * Date picker and Color picker in HTML | Solve date validation problem #21 Click: https://youtu.be/EYbpqqWcdIU * html fundamentals (&nbsp, upload, span, entities etc) very important concepts #22 Click: https://youtu.be/DCbF70VtOpU ______________________________________________________ * Quickly Create Website using HTML/CSS * ------------------------------------------------------ Click: https://youtu.be/YKkaRvj49Wk ______________________________________________________ * CSS Training * ------------------------------------------------------ Click: https://youtu.be/0c3gvHTzr3E ______________________________________________________ * PHP Training * ------------------------------------------------------ Click: https://youtu.be/sRUecHHhFp4 ______________________________________________________ * C Language Training * ------------------------------------------------------ Click: https://youtu.be/OZ6nHWdDHEg ______________________________________________________ * Training for How to Create a Blog * ------------------------------------------------------ Click: https://youtu.be/vYuhvYjpkTI ______________________________________________________ * Adobe Photoshop Training * ------------------------------------------------------ Click: https://youtu.be/vYuhvYjpkTI ______________________________________________________ * Computer Graphics Programs * ------------------------------------------------------ Click: https://youtu.be/uKj7TUdTJCM ______________________________________________________ * MS Office Training * ------------------------------------------------------ Click: https://youtu.be/wKUSACgrtG4 ______________________________________________________ * Computer Basics Training * ------------------------------------------------------ Click: https://youtu.be/ZTCknN5RlYo ______________________________________________________ * English Speaking Course * ------------------------------------------------------ Click: https://youtu.be/wnC_KW9uHWw ______________________________________________________ * Wordpress Training * ------------------------------------------------------ Click: https://youtu.be/3Cm6mnoZrH8 ______________________________________________________ * Bootstrap Training (uploading soon...) * LIKE | COMMENT | SHARE | SUBSCRIBE The channel link is : https://goo.gl/XiMV5S
Views: 8 Amazing Learning
CSS TUTORIALS - Changing HTML Element's Colors Using CSS
 
02:05
This video demonstrates how to change the background and text colors of HTML elements using CSS.
Views: 58 WisdomBytes
How to Create Web Pages Using HTML : How to Add a Background Image to a Web Page
 
02:06
To add a background image to a Web page, add a background attribute to the body tag with the location or URL of the image, either absolute or relative. Add a background image when creating a Web site with tips from a software developer in this free video on Web design and the Internet. Expert: Luis Estrada Bio: Luis Estrada has a Bachelor's degree in Computer Science. He specializes in developing web sites and web applications. Estrada has been designing and creating websites for more than 8 years. Filmmaker: Luis Estrada
Views: 344622 eHow
X Theme Cornerstone Tutorial: Custom CSS Styling with the ID, Class, and Style Boxes
 
07:19
In this Wordpress Tutorial we go over the only three customization's that are available on ALL of X Theme Cornerstone’s Elements: the ID, Class, and Style boxes. Understanding these is an integral part of customizing Elements CSS inside of Cornerstone. They provide shortcuts and add flexibility to the CSS customization process. This video is meant to be a precursor to our Cornerstone Element video series where we go into detail on how to use the Elements best to fit the purpose of your website. Hope you enjoy- Please Subscribe! http://www.youtube.com/channel/UCWEh6lSRyaxqgcYKb9y4TrQ?sub_confirmation=1 Don’t have X Yet? Get it here (affilliate): http://visualicity.com/XTheme Helper Classes Video: https://www.youtube.com/watch?v=RceKp6qgQfo More X Theme/Cornerstone tutorials: http://visualicity.com/tutorials/ Visit our site! http://visualicity.com Background Music: http://audionautix.com/
Inline vs external javascript
 
06:30
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2014/11/inline-vs-external-javascript.html In this video we will discuss 1. Different places where JavaScript can be present 2. Advantages of external JavaScript over inline JavaScript JavaScript can be stored either inline on the page or in an external .js file. Let's look at an example of both the approaches. Inline JavaScript example : In this example, IsEven() JavaScript function is present inline on the page. [html] [head] [script type="text/javascript"] function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number + " is odd number"); } } [/script] [/head] [body] [form id="form1" runat="server"] Number : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [input type="button" value="Check Number" onclick="IsEven()" /] [/form] [/body] [/html] External JavaScript example : Steps to store JavaScript in an external .js file 1. In Visual Studio, right click on the project name in Solution Explorer and select add select Add =] New Item 2. From the "Add New Item" dialog box select "JScript File". Name the file "ExternalJavaScript.js" and click Add. 3. Copy and paste the following JavaScript function in the "ExternalJavaScript.js" file function IsEven() { var number = document.getElementById("TextBox1").value; if (number % 2 == 0) { alert(number + " is even number"); } else { alert(number + " is odd number"); } } 4. On your webform in the head section include a reference to the external JavaScript file using script element as shown below [script type="text/javascript" src="ExternalJavaScript.js"][/script] 5. At this point the HTML on your webform should be as shown below. [html] [head] [script type="text/javascript" src="ExternalJavaScript.js"][/script] [/head] [body] [form id="form1" runat="server"] Number : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [input type="button" value="Check Number" onclick="IsEven()" /] [/form] [/body] [/html] Advantages of external JavaScript over inline JavaScript : Here are some of the general advantages of external JavaScript over inline JavaScript Maintainability : JavaScript in external files can be referenced on multiple pages without having to duplicate the code inline on every page. If something has to change, you only have one place to change. So external JavaScript code can be reused and maintenance will be much easier. Separation of Concerns : Storing JavaScript in a separate external .js file adheres to Separation of concerns design principle. In general it is a good practice to separate HTML, CSS and JavaScript as it makes it easier working with them. Also allows multiple developers to work simultaneously. Performance : An external JavaScript file can be cached by the browser, where as an inline JavaScript on the page is loaded every time the page loads.
Views: 102160 kudvenkat
CSS Positioning Tutorial #8 - Position Relative
 
04:58
Hey gang, in this CSS positioning tutorial, I'll be showing you the position property in CSS. In particular, we'll be looking at relative position and how it can help us offset elements without removing them from normal document flow. Relative position can also be used in conjunction with absolute position, to provide child elements with a relative parent to position themselves within. SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ========== JavaScript for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ========== CSS for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ========== HTML for Beginners Playlist ========== https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc ========== The Net Ninja ============ For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ========== Social Links ========== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 34412 The Net Ninja
HTML iframe | Open Page inside Page | very interesting | Why insecure ? #12
 
09:30
In this video, you will learn about HTML iframe | Open Page inside Page | very interesting | Why insecure ? _____________________* List of HTML Training Videos *_____________________ * Web Development Training | Course ( HTML, CSS, Bootstrap, Java Script JQUERY PHP) #1 Click: https://youtu.be/RLU7EJYh188 * Basic tags of Html | Head | Title | Link | Style | Body tags #2 Click: https://youtu.be/5zhQUM5AfQw * Html Headings (h1 h2 h3 h4 h5 h6) tags | Paragraph tag and Anchor tag #3 Click: https://youtu.be/UqvvIzoqL1U * Button tag and Image tag in html #4 Click: https://youtu.be/LEtwiu0Nqbs * Inspect html elements | How to use console | Change CSS Live #5 Click: https://youtu.be/rUNortWlLn4 * Create Tooltip in html | interesting Concept | Small Popup #6 Click: https://youtu.be/U8GYOe118KY * HTML Styling With CSS (Inline Style | Internal Style | External style ) #7 Click: https://youtu.be/lVB_cPr7hIo * HTML Formatting Basic Tags (br strong i em sub sup del ins mark small ) #8 Click: https://youtu.be/WtVHGenTiuM * HTML Links ( _blank _self _top _parent) Where to Open the Page or Link #9 Click: https://youtu.be/30i-4l7ZNQY * HTML Table | ( table tr th td ) | See Brief and Practical Example #10 Click: https://youtu.be/UdWRVGuITNE * Row Span and Col Span in HTML Table | Simple and Easy Explanation #11 Click: https://youtu.be/zQm0E25vXzI * HTML iframe | Open Page inside Page | very interesting | Why insecure ? #12 Click: https://youtu.be/kd_KPNgipw0 * Style HTML Elements by ID and Class | Learn Difference | Practical Example #13 Click: https://youtu.be/DY0dLM5ikCI * HTML Form | Practicle Example | very Simple and Easy #14 Click: https://youtu.be/NfmB5Q4U1sk * HTML Form with CSS | Practicle Example | Really Simple and Easy #15 Click: https://youtu.be/njlqVFU9K0g * HTML input Attributes ( Placeholder | Required | Readonly | Disabled | Checked) very important #16 Click: https://youtu.be/IY2DWFIL8qM * Types of List in HTML (Ordered List | Unordered List | Description List) Quick Explanation #17 Click: https://youtu.be/7DsSV8UwgWM * Audio Video tags in HTML | interesting Video #18 Click: https://youtu.be/BujSDqvk2Lc * Useful HTML Tags (div, pre, hr, label, hr, empty tags, nested tags) Very Useful Video #19 Click: https://youtu.be/-Cjsq0Guh1s * HTML inline and Block Elements | Practical Difference with example on console #20 Click: https://youtu.be/uLnNZfNf2E8 * Date picker and Color picker in HTML | Solve date validation problem #21 Click: https://youtu.be/EYbpqqWcdIU * html fundamentals (&nbsp, upload, span, entities etc) very important concepts #22 Click: https://youtu.be/DCbF70VtOpU ______________________________________________________ * Quickly Create Website using HTML/CSS * ------------------------------------------------------ Click: https://youtu.be/YKkaRvj49Wk ______________________________________________________ * CSS Training * ------------------------------------------------------ Click: https://youtu.be/0c3gvHTzr3E ______________________________________________________ * PHP Training * ------------------------------------------------------ Click: https://youtu.be/sRUecHHhFp4 ______________________________________________________ * C Language Training * ------------------------------------------------------ Click: https://youtu.be/OZ6nHWdDHEg ______________________________________________________ * Training for How to Create a Blog * ------------------------------------------------------ Click: https://youtu.be/vYuhvYjpkTI ______________________________________________________ * Adobe Photoshop Training * ------------------------------------------------------ Click: https://youtu.be/vYuhvYjpkTI ______________________________________________________ * Computer Graphics Programs * ------------------------------------------------------ Click: https://youtu.be/uKj7TUdTJCM ______________________________________________________ * MS Office Training * ------------------------------------------------------ Click: https://youtu.be/wKUSACgrtG4 ______________________________________________________ * Computer Basics Training * ------------------------------------------------------ Click: https://youtu.be/ZTCknN5RlYo ______________________________________________________ * English Speaking Course * ------------------------------------------------------ Click: https://youtu.be/wnC_KW9uHWw ______________________________________________________ * Wordpress Training * ------------------------------------------------------ Click: https://youtu.be/3Cm6mnoZrH8 ______________________________________________________ * Bootstrap Training (uploading soon...) * LIKE | COMMENT | SHARE | SUBSCRIBE The channel link is : https://goo.gl/XiMV5S
Views: 14 Amazing Learning
#frontendfunn - Pure CSS Badges using icons and text tutorial
 
28:41
#purecss #cssanimation #cssbadges #css3 #html5 In this Pure CSS Badges using icons and text tutorial, we will make use of material icons and create some cool looking badges using pure css. we will start by creating the badge head section. inside the head section we will add the material desing icons and add some styling to make it look like a badge. next we will add the badge ribbon and place it at the back of the badge head. we will make use of pseudo elements to style the badge head as well as the ribbon section finally to add the shiny effect we will add some span elements and make use of keyframes animation and animate the sparkles to create shiny effect. Thanks For Watching. hope you enjoyed this video. Please do watch other videos on my channel. please share and subscribe. You can find the source code at frontendfunn.com http://www.frontendfunn.com Happy Coding :D ====================================
Views: 76 FrontEndFunn

How to start a cover letter engineering intern
Uvm admissions essay sample
Dialysis nurse resume cover letter
Accenture internship cover letter
Paper writing service on the