You may ask yourself, “Have I run into CSS before?”
- Speak to a career coach to get guidance
- Coaching sessions are free and always will be
The answer is a definite yes. CSS adds style to your webpage. Without it, you would just see a bland page with no structure, no colors, and lines of text and images thrown in the mix. That’s not very attractive, is it?
CSS steps in to provide your website with that makeover it needs. Using CSS turns your website from a bland document into a work of art. Yes, there is definitely art in programming.
So let’s go ahead, get our digital art supplies ready, and begin to paint a pretty picture of our journey into tech by learning about the purpose of CSS.
What is CSS Exactly?
CSS stands for Cascading Style Sheets. It is a styling language that provides the layout and presentation for a web page.
Before CSS, developers had a tough time working with HTML code to format their content in a document. HTML was intended to be only a markup language to link various online documents together: It was never meant for formatting a page.
When HTML 3.2 presented style formatting tags for properties like fonts, it caused difficulties for developers. Programmers would spend a long and expensive process coding lengthy pages of HTML code. This made it difficult to find errors within the HTML syntax if things went wrong in the web page.
The World Wide Web Consortium (W3C) saw this and created CSS to settle this issue. CSS did HTML, and the tech world in general, a favor and removed all style formatting tags from the page, replacing them with lists of rules called style sheets.
If you think of the development of a house or any type of building, HTML represents the foundation of the building. CSS would represent the walls, windows, doors, and materials used to build the structure. While HTML provides your base structure, CSS provides the style of your webpage— making it stand out among other webpages on the Internet.
The style includes the design, layout, and even the displays on various devices, screens and browsers. Additionally, CSS is completely separate from HTML and it can be used by any markup language, including XHTML (a variant of HTML), and XML (Extensible Markup Language).
How Does CSS Work?
CSS brings style to your web pages by interacting with individual HTML components called elements. The language enables the separation of presentation and content. This improves accessibility and performance in web page processing. It also provides more flexibility across many pages and reduces repetition and difficulty in the HTML code. Developers style their CSS through a word processor or text editor and link the CSS to HTML in three different ways.
External style sheets, the most recommended method, are saved as a separate file from the HTML document with a .css extension. This method is recommended if you have several rules that can span across many pages on your website. To use your external style sheet, you include a link tag in your header section of the HTML file that sources to your .css file.
Internal style sheets are included within the header section of your HTML file but within a style tag. Internal style sheets are recommended if you have a single page with a couple of rules that are unique to the other pages on your website.
Inline style sheets are within the elements in your HTML file. These are small segments of CSS written into the code. Inline style sheets should only be used when the style is a single coding instance in your entire webpage.
How Do I Use CSS?
CSS syntax is simple and consists of a plain text document called a style sheet. Style sheets separated into blocks of code are called rules. A CSS rule consists of two parts to work with the HTML code.
The first part of a CSS rule is the selector. Selectors declare which elements in the HTML document the developer wants to style. You can call a rule with a selector that applies to paragraphs (identified with the ‘p’ tag) and it will affect all paragraphs within your HTML document.
Selectors apply to the HTML in two ways. You either apply your styles to all elements on the page like mentioned earlier or apply it to certain ones within a page through attributes. CSS selectors for HTML attributes are identified in two forms: id and class.
The id affects a unique identifier within the document. They would be marked with a ‘#’ symbol. The id cannot share the same identifying name with another id in the document. If you would like to use the same identifier name for multiple elements in the document, you would use the class attribute. The ‘.’ symbol represents the class attribute you want to style in your CSS code. Both attributes are case-sensitive and start with their identifying symbols and letters. They can include alphanumeric characters, hyphens, and underscores in their names.
The second part of the CSS rule is the declaration block. This block is a list of declarations consisting of a property, a value, and a colon between the two items. These declarations are surrounded by curly brackets or braces within the CSS rule.
Properties are items that are affected in the selector. These include, but are not limited to, the font size, color, layout, and margins. Properties are specified in the CSS standard and have a set of possible values. Values are the settings that you want to insert into your properties to change their presentation on the HTML page. Values can be a wide range of keywords, numerical values, or measurements.
If many declarations are included in a block, a semicolon must separate each declaration for them to work in the rule.
Now that we know what a CSS rule is and what it includes we need to learn the running order of CSS. This is where the “cascading” in CSS comes in.
You can include several rules across many style sheets, but what if they conflict with each other? When this occurs, the styles will cascade into new styles by using a priority order to define which one the HTML code answers to. The priority levels are:
- Priority 1: Inline styles
- Priority 2: External and internal style sheets
- Priority 3: Browser defaults
But what if you have two styles that have the same priority level? Executing two styles with similar priority levels will cause the code to run from top to bottom. Therefore, the last one gets the highest priority.
How Do I Start Learning CSS?
CSS, along with HTML, is very easy to pick up when you want to start learning code. There are many resources available all over the Web where you can start learning CSS.
To start developing your brain with syntax and learning the basics, you should use applications like Grasshopper, SoloLearn, and Codecademy. These applications are available in both browser and mobile formats. They provide many activities to help you grasp a basic understanding of languages such as HTML and CSS.
When you feel that you want to push the bar a bit more, take a look at the best free online resource for learning web development at freeCodeCamp. This non-profit organization helps beginners learn to code through free online courses and resources in various media formats.
CSS provides the presentation, character, and personality in a website. You wouldn’t want to go outside looking plain and bland. You wouldn’t want your house, your car, or anything that represents what you are to lack style. Even if you just put a flag on your car or a wreath on your front door, it is something that provides style.
The same concept applies to your websites. CSS gives you the ability to play around with colors, fonts, and layouts to build attractive websites for the public. It also eases the workload for developers by separating the style formatting from the actual structure of the webpage. So that if you run into any issues with your code, you can figure out where your problems lie simply with separate coding files. No need to spend hours to find where the syntax went wrong in one long document.
Want to style your career with a future in tech? Download the Career Karma app today and start painting your own picture of a promising future.