Category: css

Aug 10

CSS – Links

CSS – Links ”; Previous Next Links serve to connect and navigate between one webpage and another, with CSS properties offering options to style these links in a variety of ways. Link States The idea of link states involves understanding the different states in which links might exist. Various pseudo-classes can be used to style these states. Link – A link styled with the :link pseudo class that has a destination (rather than merely being a named anchor). Visited – A link with the :visited pseudo class style that indicates it has already been visited (it is present in the browser”s history). Hover – A link styled with the :hover pseudo class that is hovered over by the user”s mouse cursor. Focus – A focused link is styled with the :focus pseudo class. It can be focused dynamically using HTMLElement.focus(), or it can be shifted to by the user using the Tab key or any comparable keyboard shortcut. Active – A link with the :active pseudo class applied when it is activated, such as when it is clicked. Default Styles of Links Properties of default links Links are underlined. Unvisited links are blue. Visited links are purple The mouse pointer changes to a little hand icon when you hover over a link. Focused links are visually highlighted with an outline. You can navigate to links on this page using the keyboard by pressing the tab key. On Mac, use option + tab or enable Full Keyboard Access: All controls with Ctrl + F7. Active links are styled in red. You can test this by holding down the mouse button while clicking on the link. CSS links – Basic Example The following example demonstrates the simple links. <html> <head> <style> a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <a href=”https://www.tutorialspoint.com/index.htm”>Simple Link</a> </body> </html> For clarity, make sure links are underlined; do not underline other items. If you don”t want links to be underlined, use another highlighting technique. Add link hover and focus effects as well as unique style when links are clicked. The following CSS properties can be used to modify or disable the default styles: Color for the text color. Cursor for the mouse pointer style Outline for the text outline. CSS links- Stlying Some Links The following example demonstrates the various types link states. <html> <head> <style> body { width: 300px; margin: 0 auto; font-size: 1.2rem; font-family: sans-serif; } p { line-height: 1.4; } a { outline-color: transparent; } a:link { color: #007bff; } a:visited { color: #800080; } a:focus { text-decoration: none; background: #bae498; } a:hover { text-decoration: none; background: #cdfeaa; } a:active { background: #007bff; color: #cdfeaa; } </style> </head> <body> <p> Follow us on social media: <a href=”https://www.youtube.com/” target=”_blank”>YouTube</a>, <a href=”https://www.facebook.com/” target=”_blank”>Facebook</a>, <a href=”https://www.instagram.com/” target=”_blank”>Instagram</a>, and <a href=”https://twitter.com/” target=”_blank”>Twitter</a>. </p> </body> </html> Including icons on links By providing visual clues, integrating symbols with links especially external ones, improves user experience. External links are typically indicated with a little arrow pointing out of a box, which helps users quickly determine the destination of a link. CSS links – Including Icons The following example demonstrates the usage of icons on links. <html> <head> <style> body { width: 80%; margin: 0 auto; font-family: ”Segoe UI”, Tahoma, Geneva, Verdana, sans-serif; background-color: #f9f9f9; color: #333; } h1 { text-align: center; margin-top: 30px; } p { line-height: 1.6; } a { color: #007bff; text-decoration: none; transition: color 0.3s ease; } a:hover { color: #0056b3; } .links-list { margin-top: 20px; list-style-type: none; padding-left: 0; } .links-list li { margin-bottom: 10px; } .external-link-icon { display: inline-block; width: 16px; height: 16px; background: url(“images/external-link.png”) no-repeat; background-size: cover; margin-right: 5px; vertical-align: middle; } </style> </head> <body> <h1>Explore New Tutorial</h1> <p>Discover a world of learning, Tutorials Point, offering diverse courses from programming to personal development.</p> <p>Expand your knowledge, sharpen your skills, and embark on your learning journey today!</p> <ul class=”links-list”> <li> <span class=”external-link-icon”></span> <a href=”https://www.tutorialspoint.com/css/index.htm”>CSS Tutorial</a> </li> <li> <span class=”external-link-icon”></span> <a href=”https://www.tutorialspoint.com/python/index.htm”>Python Tutorial</a> </li> <li> <span class=”external-link-icon”></span> <a href=”https://www.tutorialspoint.com/php/index.htm”>PHP Tutorial</a> </li> </ul> </body> </html> Links as buttons Beyond the conventions of link styling, designers may improve user interaction and aesthetic appeal by using CSS to transform links into button-like objects. Links may blend in with other website elements with ease by using characteristics like background-color, padding, and border-radius. This makes for user experiences that are both engaging and navigational. CSS links – Links as Buttons The following example demonstrates links being styled as buttons. <html> <head> <style> body, html { margin: 0; padding: 0; font-family: Arial, sans-serif; } .container { display: flex; gap: 10px; justify-content: center; margin-top: 20px; } .btn-link { flex: 1; text-decoration: none; outline-color: transparent; text-align: center; line-height: 3; color: white; background-color: #007bff; border: 1px solid #007bff; border-radius: 5px; transition: background-color 0.3s ease; padding: 10px 20px; margin: 0 5px; } .btn-link:hover { background-color: #0056b3; } .btn-link:active { background-color: #003366; } header { background-color: #333; color: white; text-align: center; padding: 20px 0; } h1 { margin: 0; } p { margin-top: 20px; text-align: center; } </style> </head> <body> <header> <h1>Welcome to Demo Website</h1> </header> <nav class=”container”> <a href=”#” class=”btn-link”>Home</a> <a href=”#” class=”btn-link”>Technologies</a> <a href=”#” class=”btn-link”>Services</a> <a href=”#” class=”btn-link”>Gallery</a> <a href=”#” class=”btn-link”>Contact Us</a> </nav> <p>This is a demonstration website showcasing various features.</p> </body> </html> Print Page Previous Next Advertisements ”;

Aug 10

CSS – Syntax

CSS – Syntax ”; Previous Next A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts − Selector − A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc. Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border etc. Value − Values are assigned to properties. For example, color property can have value either red or #F1F1F1 etc. You can put CSS Style Rule Syntax as follows − selector { property: value } Example − You can define a table border as follows − table{ border :1px solid #C00; } Here table is a selector and border is a property and given value 1px solid #C00 is the value of that property. You can define selectors in various simple ways based on your comfort. Let me put these selectors one by one. The Type Selectors This is the same selector we have seen above. Again, one more example to give a color to all level 1 headings − h1 { color: #36CFFF; } The Universal Selectors Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type − * { color: #000000; } This rule renders the content of every element in our document in black. The Descendant Selectors Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag. ul em { color: #000000; } The Class Selectors You can define style rules based on the class attribute of the elements. All the elements having that class will be formatted according to the defined rule. .black { color: #000000; } This rule renders the content in black for every element with class attribute set to black in our document. You can make it a bit more particular. For example − h1.black { color: #000000; } This rule renders the content in black for only <h1> elements with class attribute set to black. You can apply more than one class selectors to given element. Consider the following example − <p class = “center bold”> This para will be styled by the classes center and bold. </p> The ID Selectors You can define style rules based on the id attribute of the elements. All the elements having that id will be formatted according to the defined rule. #black { color: #000000; } This rule renders the content in black for every element with id attribute set to black in our document. You can make it a bit more particular. For example − h1#black { color: #000000; } This rule renders the content in black for only <h1> elements with id attribute set to black. The true power of id selectors is when they are used as the foundation for descendant selectors, For example − #black h2 { color: #000000; } In this example all level 2 headings will be displayed in black color when those headings will lie with in tags having id attribute set to black. The Child Selectors You have seen the descendant selectors. There is one more type of selector, which is very similar to descendants but have different functionality. Consider the following example − body > p { color: #000000; } This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <div> or <td&gt would not have any effect of this rule. The Attribute Selectors You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text − input[type = “text”] { color: #000000; } The advantage to this method is that the <input type = “submit” /> element is unaffected, and the color applied only to the desired text fields. There are following rules applied to attribute selector. p[lang] − Selects all paragraph elements with a lang attribute. p[lang=”fr”] − Selects all paragraph elements whose lang attribute has a value of exactly “fr”. p[lang~=”fr”] − Selects all paragraph elements whose lang attribute contains the word “fr”. p[lang|=”en”] − Selects all paragraph elements whose lang attribute contains values that are exactly “en”, or begin with “en-“. Multiple Style Rules You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example − h1 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } Here all the property and value pairs are separated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, we keep them in separate lines. For a while, don”t bother about the properties mentioned in the above block. These properties will be explained in the coming chapters and you can find complete detail about properties in CSS References Grouping Selectors You can apply a style to many selectors if you like. Just separate the selectors with a comma, as given in the following example − h1, h2, h3 { color: #36C; font-weight: normal; letter-spacing: .4em; margin-bottom: 1em; text-transform: lowercase; } This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them. You can combine the various id selectors together as shown below − #content, #footer, #supplement { position: absolute; left: 510px; width: 200px; } Print Page

Aug 10

CSS – Fonts

CSS – Font ”; Previous Next CSS Fonts allows to customize font style of webpages using various font related properties. In this tutorial we will understand the font styling in CSS. What is CSS Font? In CSS font property is used to style and adjust type of text used in webpage. You can define fonts and customize their appearance by setting properties like font-family, font-size, font-weight and font-style. You can also use shorthand property font to manipulate all the font style. Table of Contents Types of Font Families Examples of CSS Fonts CSS Font Family Adjust Font Weight and Style CSS Font Shorthand CSS Font Related Properties   Types of Font Families Monospace Fonts: The font in which every letter have equal width. Serif Fonts: Have small stroke at the edge of each letter. San-Serif Fonts: Clean fonts with out any strokes. Fantasy Fonts: Decorative fancy fonts. Cursive Fonts: The font that resembles human handwriting. Popular CSS Fonts Generic Font Family Examples of Font Names Serif Times New Roman Georgia Garamond Sans-serif Arial Verdana Helvetica Monospace Courier New Lucida Console Monaco Cursive Brush Script MT Lucida Handwriting Fantasy Copperplate Papyrus   CSS Font Family Property The font-family property is used to specify font name for a text content. Syntax selector { font-family: family-name, generic-family; } Example Here is the example using font-family property. <html> <head> <style> p { font-family: Lucida Handwriting, Cursive; } </style> </head> <body> <p > This is a font that written in Lucida Handwriting. THis is a font that looks like human handwriting. </p> </body> </html> Adjust Font Weight, Size and Style In CSS we can use font-size, font-weight and font-style. properties to modify size, weight and style of texts. Example Let”s check an example for this. <html> <head> <style> .font-size-example { font-size: 20px; } .font-weight-example { font-weight: bold; } .font-style-example { font-style: italic; } </style> </head> <body> <p class=”font-size-example”> This is an example of text with an adjusted font size. </p> <p class=”font-weight-example”> This is an example of text with an adjusted font weight. </p> <p class=”font-style-example”> This is an example of text with an adjusted font style. </p> </body> </html> CSS Font Shorthand Property In CSS we can use the font shorthand property to modify size, weight, and style of texts. Example In this example we will use font shorthand property to set font style, weight, size and family. <html> <head> <style> .font-example { /* in-order: font style, weight, size, family */ font: italic bold 20px Arial, sans-serif; } </style> </head> <body> <p class=”font-example”> This is an example of text with an adjusted font style, weight, and size using the font shorthand property. </p> </body> </html> CSS Font Related Properties Following is the list of all the CSS properties related to font: Property Description Example font-family Specifies the font for an element. Try It font-size Specifies the size of the font. Try It font-weight Specifies the boldness of the font. Try It font-style Specifies the style of the font (normal, italic, oblique). Try It font-variant Specifies whether or not a text should be displayed in a small-caps font. Try It line-height Specifies the line height. Try It Print Page Previous Next Advertisements ”; Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. About us Company Our Team Careers Jobs Contact Us Terms of use Privacy Policy Refund Policy Cookies Policy FAQ”s Tutorials Point India Private Limited, Incor9 Building, Kavuri Hills, Madhapur, Hyderabad, Telangana – 500081, INDIA Tutorials Articles Jobs Courses Certifications Annual Membership Languages Python Tutorial Java Tutorial C++ Tutorial C Programming Tutorial C# Tutorial PHP Tutorial R Tutorial Go Tutorial Web Technologies HTML Tutorial CSS Tutorial JavaScript Tutorial ReactJS Tutorial Bootstrap Tutorial AngularJS Tutorial Node.js Tutorial TypeScript Tutorial Database SQL Tutorial MySQL Tutorial DBMS Tutorial MongoDB Tutorial SQLite Tutorial PL/SQL Tutorial PostgreSQL Tutorial Excel Tutorial Editors Online SQL Editor Online Html Editor Online Css Editor Online Javascript Editor Online Latext Editor Online TEX Editor Online Mathml Compiler Online Markdown Editor Trending Technologies Cloud Computing Tutorial Amazon Web Services Tutorial Microsoft Azure Tutorial Git Tutorial Ethical Hacking Tutorial Docker Tutorial Kubernetes Tutorial Compilers Online Java Compiler Online C Compiler Online C++ Compiler Online C# Compiler Online Php Compiler Online Matlab Compiler Online Bash Compiler Terminals Online Unix Terminal Online Python3 Terminal Online Php Terminal Online Nodejs Terminal Online R Terminal Online Numpy Terminal Online Octave Terminal Data Science & ML NLP Tutorial NumPy Tutorial Python Pandas Tutorial Machine Learning Tutorial Big Data Analytics Tutorial Cryptography Tutorial Power BI Tutorial Computer Science DSA Tutorial Spring Boot Tutorial SDLC Tutorial Unix Tutorial Operating System Tutorial Assembly Programming Tutorial Digital Circuits Tutorial Microprocessor Tutorial System Analysis and Design Tutorial Flutter Tutorial Top Certifications Business Analytics Certification Java & Spring Boot Advanced Certification Data Science Advanced Certification Advanced Certification In Cloud Computing And DevOps Advanced Certification

Aug 10

CSS – Introduction

CSS – Introduction ”; Previous Next CSS is acronym of Cascading Style Sheets. It helps to define the presentation of HTML elements as a separate file known as CSS file having .css extension. What is CSS? CSS stands for Cascading Style Sheets, used to describe the presentation and design of a web pages. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used. CSS can control the layout of multiple web pages all at once. CSS Styling Example Following is layout of a webpage, click the button below to add CSS styling to the page and see difference between a webpage with and without CSS. Add CSS Webpage Layout Sidebar Sidebar content here. Click to Add Style You can toggle between styled version and unstyled version of this page using above button. © 2024 Webpage Layout. All rights reserved.   Why Use CSS? CSS Saves Time: You can write CSS once and then reuse same sheet in multiple HTML pages. Pages Load Faster: If you are using CSS, you do not need to write HTML tag or attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. Easy Maintenance: To make a global change, simply change the style, and all elements in all the web pages will be updated automatically. Superior Styles to HTML: CSS has a much wider array of attributes than HTML, so you can get a far better look to your HTML page. Multiple Device Compatibility: For the same HTML document, different versions of a website can be presented for different screen widths Global Web Standards: Now most of the HTML attributes are being deprecated and it is being recommended to use CSS. CSS Syntax Syntax of CSS consist of selectors and declaration used to apply styles to HTML elements. selector { property: value; } The selector targets the HTML element/elements that you want to style. The declaration block contains one or more declarations enclosed in curly braces {}. Each declaration consists of a property and a value separated by a colon :. Declarations are separated by semicolons ;. There are several types of selectors available in CSS, commonly used selectors are classes, IDs and tags. To know complete list of selectors visit CSS Selectors article. CSS History and Versions Current version of CSS3 and early versions were CSS1 and CSS2. As of now CSS is continuesly evolving and adapting new capabilities that full fills the current website”s requirements. Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December 1996. This version describes the CSS language as well as a simple visual formatting model for all the HTML tags. CSS2 became a W3C recommendation in May 1998 and builds on CSS1. This version adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts, element positioning and tables. CSS3 was became a W3C recommendation in June 1999 and builds on older versions CSS. It has divided into documentations is called as Modules and here each module having new extension features defined in CSS2. CSS3 Modules CSS3 Modules are having old CSS specifications as well as extension features. Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2D and 3D Transformations Animations Multiple Column Layout User Interface For a quick guide on types of style used in CSS, visit our CSS cheat-sheet Print Page Previous Next Advertisements ”;