CSS Basics
In this article, We will learn what is CSS, types of Selectors in CSS, how to add CSS in web page and code commenting in CSS
What is CSS ?
CSS stands for Cascading Style Sheets. It is the language which we use to style an HTML document including the design, layout and variations in display for different devices and screen sizes. mainly it describes how HTML elements should be displayed. It can control the layout of multiple web pages all at once.
Syntax
CSS Syntax contains Selector and Declaration Block.
Selector It points to the HTML element you want to style.
Declaration Block contains one or more declarations separated by semicolons.
Selectors
There are 5 types of selectors
i) Simple selectors (select elements based on name, id, class)
ii) Combinator selectors (select elements based on a specific relationship between them)
iii) Pseudo-class selectors (select elements based on a certain state)
iv) Pseudo-elements selectors (select and style a part of an element)
v) Attribute selectors (select elements based on an attribute or attribute value)
Example of Simple Selectors
1) To select an element
p {
text-align: center;
color: red;
}
2) To select an element with a specific id, write a hash (#) character, followed by the id of the element. id should be unique.
#para1 {
text-align: center;
color: red;
}
3) To select elements with a specific class, write a period (.) character, followed by the class name. class need not to be unique.
.center {
text-align: center;
color: red;
}
4) The universal selector (*) selects all HTML elements on the page.
Get Sudha Priya’s stories in your inbox
Join Medium for free to get updates from this writer.
* {
text-align: center;
color: blue;
}
Adding CSS to HTML
When a browser reads a style sheet, it will format the HTML document according to the information in the style sheet.
There are 3 ways to insert CSS
1) External CSS are defined within the <link> element inside the <head> section of an HTML page.
2) Internal CSS are defined inside the <style> element, inside the head section.
3) Inline CSS add the style attribute to the element. style attribute can contain any CSS property.
Cascading Order
What style will be used when there is more than one style specified for an HTML element?
i) Inline style (inside an HTML element)
ii) External and internal style sheets (in the head section)
iii) Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.
CSS Comments
A CSS comment is placed inside the <style> element, and starts with /* and ends with */ . They are not displayed in the browser, but they can help document your source code.
/* This is a single-line comment */
/* This is
a multi-line
comment */
