The other day, a client asked me what CSS is. I was a little surprised, as most clients are not familiar with such web design terminology. That got me thinking that perhaps I should write an article to explain what CSS is and how it is used in Web Design.
What is CSS?
CSS, which stands for Cascading Style Sheets, is simply the “style” language used to create a visual style of web pages. Thus, CSS is used to establish how fonts, colors and the layout of a web page is rendered in a web browser.
What CSS is Not
CSS is NOT a programming language. Why? Unlike a programming language, such as PHP, JavaScript and SQL, CSS cannot be used to write software applications that instruct a computer how to execute a variety of tasks.
How Does CSS Work?
CSS works by recognizing established rules. These rules tell the browser how to display specific elements of a website, such as fonts, colors and layout. A CSS rule is usually comprised of two parts:
Selector
A selector is the means by which an HTML element can be identified to have a CSS rule applied to it. An example of one type of selector would be an HTML tag such as those used for paragraphs, headings, divs, etc.
Declaration
A declaration is what defines the styling that should be applied to the selected to an HTML element. A declaration encompasses a property (such as color, font-size, etc.) and a value (such as red, 24px, etc.).
Example of CSS Selector and Declaration
h1 {
color: #000;
font-size: 24px;
}
In the example above, “h1” is the Selector. “Font-size” is the property declaration and “24px” is the value declaration.
Benefits of CSS
Separation of Content and Presentation
CSS facilitates a cleaner and more organized approach to web design. Why? That is because CSS makes it possible to split up the HTML content from the styling. This makes code easier to read, manage and update.
Consistent Styling
CSS makes it possible to apply consistent styling across an entire website, ensuring a cohesive and more professional look.
Improved Accessibility
CSS gives you the ability to style websites in a way that makes them accessible to persons with disabilities, by implementing acceptable levels of contrast and larger font sizes.
How CSS is Applied
CSS can be applied to a website in three significant ways:
Inline Styles
Inline styles are applied directly within HTML elements themselves, using the style attribute. While this is an acceptable usage for small adjustments, it’s really not recommended for larger projects.
Internal Styles
Internal styles are those that are defined within the <style> tags in the <head> section of the HTML document. This is a fairly common approach in web design.
External Stylesheets
External stylesheets are implemented in separate CSS files, which are then linked to the HTML document using the <link> tag. This is the most recommended and widely used method for larger websites.
Features of CSS
CSS continues to evolve over time, allowing for wider range of advanced features, such as:
Layout Techniques
CSS offers techniques like Flexbox and Grid for creating complex and flexible layouts.
Animations and Transitions
CSS allows you to add motion and visual effects to your websites.
Media Queries for Responsive Design
Media queries enable you to create responsive websites that adapt to different screen sizes and devices.
EMAIL US