Skip to main content

Recent Posts

Latest News

● Posts on CSS and SEO coming soon ...●

Types of Style Sheets in CSS

by TechnofreakAN

 How we can insert CSS in HTML code?

There are 3 ways to insert  CSS in HTML to style webpage inline, internal and external CSS. Let’s understand this three types of CSS.

1. Inline CSS: Inline CSS can be inserted in HTML by using style attribute. All container tags have style attribute. Inline CSS design is only applied to element in which style attribute is used. Inline CSS is not much recommended to use for styling multiple elements because this make HTML code more complex and it becomes difficult to maintain styling and content. HTML Code will be easy to understand if content and styling are separated.

Syntax is <tag style="";>content<tag>


 
 (the code is written big to realize that how inline style can complicates the HTML code)

2. Internal CSS: Internal CSS can be inserted in HTML by using <style> tag in head section of HTML document.

With internal CSS we can apply style sheet on a page where style tag is used i.e. it can apply style sheet only in single webpage. 



 

3. External CSS: External style sheet can be inserted in HTML document by a link tag inside head section. This Style sheet helps to apply style on multiple pages by linking pages with external CSS file. External style sheet can be created in any text editor, saved with extension .css, which contains set of rules or style definitions.

Attributes of link tag

• REL: this attribute defines relation between html document and linked page.

• HREF: this attribute is used to give URL of file

• Type: this attribute define media type and with value text\css. 

There is no need to use type attribute of link for specifying CSS because by default value is text/css and if you are using it then write as it is don’t write like css/text, css, because css will not applied.

Lets understand External CSS through code:- 


                                         External CSS file


What will happen if we use all this style sheet types to a single element which will be displayed in browser?

Priority of style sheet elements depends on order in a HTML code. Inline CSS is always used in body so it will have highest priority. Internal and external  style sheets are used in head section, one at bottom of another style element will have high priority. If you use Important in declaration box it will be of highest priority.









From Topic:

Comments

Post a Comment

Top Posts

Basics of Web

by TechnofreakAN
 How Website Works?:  When a client search a particular website on internet, his request is sends to DNS for obtaining IP Address. This IP Address is send to the client-server. Clients server requests the web-server for sending files to the client in terms of HTML, CSS and Javascript to the location of clients IP Address. Finally client views content in his browser which he had requested.  Let us now define some common terms in Web Development which are required to understand before moving forward in web development. Web page is a document or information resource on www (world wide web) and can be accessed through web browser and displayed on a monitor. Web publishing describes the software and methodologies to design web pages and website. Web Server is a Computer which stores websites or A Web server is an application or a computer that sends webpages over the internet using the HTTP protocol. The functionality of website is managed by web server. Web Browser is a sof...
Post a Comment
Click Here For More Details

HTML Paragraphs and Responsive

by TechnofreakAN
  How Paragraph Tags used in HTML? :-  Paragraph tags are used to group sentences in the one paragraph.  It is denoted by <p> tag. It is a container tag i.e. it has start and end tag. It contains a content. It is a block level element (always start on new line and creates its horizontal block). Paragraph tags also have attribute style, used to design text inside this tags.              Output is :-     HTML Responsive :-       To make webpage responsive (adjust size according to device screen) following code is used in head tag. It is important for any webpage to display properly according to device width.
Post a Comment
Click Here For More Details

Introduction to HTML

by TechnofreakAN
  WHAT IS HTML AND WHY IT IS USED :  HTML stands for Hypertext Markup Language. HTML forms a basic structure for any websites. HTML is standard language used for creating a website. It is necessary for anyone who want to build a website. HTML file has a extension .html. HTML file can be created in any text editor and executed in web browser. HTML5 is current major version of HTML Basic structure of HTML file given bellow: HTML tags are element names enclosed with angular brackets. Tags are not case sensitive. HTML page is enclosed within <html></html> tag. HTML page mainly contains following syntax. Html elements mainly contains  opening tags, content and closing tags. HTML tags are of two types : • Container tags : tags which have opening and closing tags are called Container tags. This tags contains content. This tag can also contain other tags.  Eg. <body></body> • Empty tags : tags which don’t have end closing tags are called Empty ...
Post a Comment
Click Here For More Details

Text Formatting in HTML

by TechnofreakAN
  What are the Text Formatting Elements in HTML  : Text formatting elements are used to make beautiful or to design the HTML document. (This tags are used to made attractive webpages but not recommended because CSS is used for the purpose of styling webpage rather than using text formatting tags). Following are some Text Formatting Elements: Let's understand each and every text formatting elements through HTML code :-  For now just ignore </br> tag in the code.  
Post a Comment
Click Here For More Details