This post is also available in: العربية (Arabic)
Web development involves developing a Web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. A more comprehensive list of Web development tasks commonly refers to Web Engineering, Web Design, Web Content Development, Client Liasion, Client-Side/Server-Side Scripting, Web Server and Network Security configuration, and e-commerce development.
What is CSS?
CSS is a commonly used term in HTML and web development. Do you know what is CSS?
The term CSS is used with HTML (HyperText Markup Language). CSS stands for Cascading Style Sheets with an emphasis placed on “Style”. While HTML is used to structure a web document, CSS comes through and specifies your document’s style. It is a simple design language intended to simplify the process of making web pages presentable.
HTML is used to define things like headings and paragraphs and allows you to embed images, videos, and other media.
CSS brings style to your web pages by interacting with HTML elements. Elements are the individual HTML components of a web page – for instance, a paragraph – which in HTML might look like this:
<p>This is my paragraph!</p>If you want to make this paragraph appear pink and bold, use the following CSS code:
p{color:pink; font-weight:bold;}In this case, “p” (the paragraph) is called the “selector”. it’s the part of CSS code specifying which HTML element the CSS styling will affect. In CSS, the selector is written to the left of the first curly bracket.
The information between the curly brackets is called a declaration. It contains properties like font size, colour and margins, and values that are applied to the selector like “pink” and “bold”.
How To Use CSS in HTML Document
CSS can either be attached as a separate document or embedded in the HTML document itself. There are three methods of including CSS in an HTML document:
- Inline Styles: Using the <style> attribute in the HTML start tag.
- Embedded Styles: Using the <style> element in the head section of a document.
- External Style Sheets: Using the <link> element, pointing to an external CSS file.
Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag. It can be attached to an element using the style attribute.
The style attribute includes a series of CSS property and value pairs. Each “property: value” pair is separated by a semicolon (;), just as you would write into embedded or external style sheets. But it needs to be all in one line i.e. no line break after the semicolon, as shown here:
<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>Using the inline styles is generally considered a bad practice. As style rules are embedded directly inside the HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates the purpose of using CSS.
Embedded or internal style sheets only affect the document they are embedded in. Embedded style sheets are defined in the <head> section of an HTML document using the <style> element. You can define any number of <style> elements in an HTML document but they must appear between the <head> and </head> tags. Let’s consider the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>My HTML Document</title>
<style>
body { background-color: YellowGreen; }
p { color: #fff; }
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph of text.</p>
</body>
</html>An external style sheet is ideal when the style is applied to many pages of the website.
An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because, with an external style sheet, you can change the look of an entire website by changing just one file.
You can attach external style sheets in two ways — linking and importing.
Advantages of CSS
- CSS Saves Time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
- Pages Load Faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
- 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 give a far better look to your HTML page in comparison to HTML attributes.
- Multiple Device Compatibility − Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
- Global Web Standards − Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Who Should Learn CSS?
CSS is a must for students and working professionals to become great Software Engineers especially when they are working in Web Development Domain. There are many platforms where kids can learn to use CSS in web development. Some of the key advantages of learning CSS:
- Create Stunning Web Site – CSS handles the look and feel part of a web page. 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, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
- Become a Web Designer – If you want to start a career as a professional web designer, HTML and CSS designing is a must skill.
- Control Web – CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
- Learn Other Languages – Once you understands the basic of HTML and CSS then other related technologies like JavaScript, php, or angular are become easier to understand.
Who Creates and Maintains CSS?
CSS is created and maintained through a group of people within the W3C called the CSS Working Group. The CSS Working Group creates documents called specifications. When a specification has been discussed and officially ratified by the W3C members, it becomes a recommendation.
