CSS Fundamentals: Styling elements, selectors, and common properties
DE9MICS CONSULTS
To be the providers of I.C.T services. Delivers long term commercial benefits, based on clients key business demands.
CSS is a styling language used to style texts written in a markup language (e.g. HTML). It determines how these texts will be displayed on the web page.?
This article will expose the CSS fundamentals, Styling elements, selectors, and common properties of CSS.
What is CSS?
According to Wikipedia, Cascading Style Sheets (CSS) is a style sheet language used to select a specific presentation pattern and style a document written in markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
CSS describes how HTML (Hyper-text Markup Language) elements are displayed and at which part of the page. It designs the color, design, layout, size, border, and margin of texts in the website etc.?
The style sheets usually have an extension .css. For example, within a folder, the HTML file can be named index.html and the CSS file named style.css. The CSS file can be linked in the HTML file using the 'link rel' tag.
This ensures that styles and designs can be made to texts in the HTML file but in a seperate style sheet. This ensures convenience, and less issues with writing code.
Types of Cascading Style Sheets
There are 3 main types of CSS. They include;
Styling Elements
Styling elements are referred to as <style> tags. It defines the style information (CSS) for a document. The <style> elements help to specify how HTML elements should appear in a browser. The <style> element must be included inside the <head> section of the document.
Style sheet
A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block.
Selector
The CSS selector is the first part of a CSS Rule, it declares which part of the markup a style applies to by matching tags and attributes in the markup itself. It refers to a pattern of elements and other terms that inform the browser which HTML elements should have the CSS property values inside the rule applied to them.
In an article by MDN web docs, three CSS selectors were highlighted. These are the type, class, and ID selectors.?
Type Selectors
Type selectors are alternatively called tag name selectors or element selectors because they select HTML tags/elements in a document. For example, using the span element?
span {
color: red;
}
<h1>Type selectors</h1>
<p>An IT consulting firm is branded by its results over time. Not all of them have tangible results. However, <span>De9mics Consults</span> has proven, beyond any doubt, its credibility with its unbeatable results.</p>
Result:
An IT consulting firm is branded by its results over time. Not all of them have tangible results. However, De9mics Consults has proven, beyond any doubt, its credibility with its unbeatable results.
Class Selectors
Unlike the type selectors, the class selectors are case-sensitive. They are always preceded by a dot (.). The class created will affect the texts applied to.?
For example: the class highlight was created. Look at the application below:
领英推荐
.highlight {
background-color: yellow;
}
<h1 class="highlight">De9mics Consults</h1>
<p>De9mics Consults is an IT consulting firm that provides a line of IT services including<span class="highlight">IT training and certification, consulting services, and courses on new IT technologies</span> for both individuals and organizations.
Result:
De9mics Consults?
De9mics Consults is an IT consulting firm that provides valuable IT services including IT training and certification, consulting services, and courses on new IT technologies for individuals and organizations.
ID selectors
The ID selectors are also case-sensitive, however, they begin with a hash (#) rather than a dot (.). The ID selector is used in the same way as a class selector. Elements can only have a single ID value applied to them and only one ID selector is used per page.?
The ID selector has high specificity. This means styles applied based on matching an ID selector will overrule styles applied based on another selector, including class and type selectors. As ID selectors can only occur once on a page and have high specificity, class selectors are preferred over the ID.
Common Properties of CSS
SheCodes listed out a few common properties of CSS. They are displayed below:
Color
In CSS, color is used to set the color of the text in a document or selected texts in the document.
Font Size
This sets the size of the font used in the document.
Background Colour
This property of CSS deals with setting the background color of selected text or all texts in a document.
Margin
Margin is used to create space around elements in CSS.
Display
Display specifies the display behavior of an element in CSS. It deals with how the elements are displayed.
Padding
Padding, just like the margin, creates space. However, it creates space within an element instead of around as in the case of the margin.
Border
The border creates a border around an element.?
Conclusion`
To learn more about the Cascading Styling Sheets, subscribe to the newsletter.